[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":646,"topic:css-overflow":670},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,334],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,27,30,34,38,42],{"id":23,"title":24,"slug":25,"order_index":9,"cornerstone":26,"reading_time_minutes":23},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":9,"title":28,"slug":29,"order_index":9,"cornerstone":26,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":26,"reading_time_minutes":23},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":26,"reading_time_minutes":23},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":26,"reading_time_minutes":23},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":26,"reading_time_minutes":23},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":23,"name":47,"slug":48,"order_index":23,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":26,"reading_time_minutes":23},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":26,"reading_time_minutes":23},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":26,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":26,"reading_time_minutes":23},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":26,"reading_time_minutes":23},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":26,"reading_time_minutes":23},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":26,"reading_time_minutes":23},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":26,"reading_time_minutes":23},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":26,"reading_time_minutes":23},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":26,"reading_time_minutes":23},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":26,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":26,"reading_time_minutes":23},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":26,"reading_time_minutes":23},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":26,"reading_time_minutes":23},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":26,"reading_time_minutes":23},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":26,"reading_time_minutes":23},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":26,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":26,"reading_time_minutes":23},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":26,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":26,"reading_time_minutes":23},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":26,"reading_time_minutes":23},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":26,"reading_time_minutes":23},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":26,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":26,"reading_time_minutes":23},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":26,"reading_time_minutes":23},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":26,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":26,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":26,"reading_time_minutes":23},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":26,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":26,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":26,"reading_time_minutes":23},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":26,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":26,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":26,"reading_time_minutes":23},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":26,"reading_time_minutes":23},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":26,"reading_time_minutes":23},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":26,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":26,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":26,"reading_time_minutes":23},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":26,"reading_time_minutes":23},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":26,"reading_time_minutes":23},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":26,"reading_time_minutes":23},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":26,"reading_time_minutes":23},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":26,"reading_time_minutes":23},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":26,"reading_time_minutes":23},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":26,"reading_time_minutes":23},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":26,"reading_time_minutes":23},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":26,"reading_time_minutes":23},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":26,"reading_time_minutes":23},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":26,"reading_time_minutes":23},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":26,"reading_time_minutes":23},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":26,"reading_time_minutes":23},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":23,"cornerstone":26,"reading_time_minutes":23},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":26,"reading_time_minutes":23},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":26,"reading_time_minutes":23},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":26,"reading_time_minutes":23},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":26,"reading_time_minutes":23},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":26,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":26,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":23,"name":335,"slug":336,"icon":5,"icon_url":5,"short_description":337,"meta_title":338,"meta_description":339,"og_image":5,"locale":16,"subcategories":340},"CSS","css","Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[341,370,394,430,462,494,526,558,586,614],{"id":129,"name":342,"slug":343,"order_index":344,"topics":345},"UI Components","ui-components",0,[346,350,354,358,362,366],{"id":347,"title":348,"slug":349,"order_index":255,"cornerstone":26,"reading_time_minutes":43},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":351,"title":352,"slug":353,"order_index":263,"cornerstone":26,"reading_time_minutes":43},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":355,"title":356,"slug":357,"order_index":267,"cornerstone":26,"reading_time_minutes":51},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":359,"title":360,"slug":361,"order_index":271,"cornerstone":26,"reading_time_minutes":43},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":363,"title":364,"slug":365,"order_index":275,"cornerstone":26,"reading_time_minutes":43},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":367,"title":368,"slug":369,"order_index":279,"cornerstone":26,"reading_time_minutes":43},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":75,"name":371,"slug":372,"order_index":344,"topics":373},"CSS Fundamentals & Setup","css-fundamentals-setup",[374,378,382,386,390],{"id":375,"title":376,"slug":377,"order_index":9,"cornerstone":26,"reading_time_minutes":35},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":379,"title":380,"slug":381,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":383,"title":384,"slug":385,"order_index":31,"cornerstone":26,"reading_time_minutes":31},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":387,"title":388,"slug":389,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":391,"title":392,"slug":393,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":79,"name":395,"slug":396,"order_index":344,"topics":397},"Selectors & the Cascade","selectors-the-cascade",[398,402,406,410,414,418,422,426],{"id":399,"title":400,"slug":401,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":403,"title":404,"slug":405,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":407,"title":408,"slug":409,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":411,"title":412,"slug":413,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":415,"title":416,"slug":417,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":419,"title":420,"slug":421,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":423,"title":424,"slug":425,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":427,"title":428,"slug":429,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":87,"name":431,"slug":432,"order_index":344,"topics":433},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[434,438,442,446,450,454,458],{"id":435,"title":436,"slug":437,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":439,"title":440,"slug":441,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":443,"title":444,"slug":445,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":447,"title":448,"slug":449,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":451,"title":452,"slug":453,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":455,"title":456,"slug":457,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":459,"title":460,"slug":461,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":91,"name":463,"slug":464,"order_index":344,"topics":465},"Box Model & Spacing","box-model-spacing",[466,470,474,478,482,486,490],{"id":467,"title":468,"slug":469,"order_index":119,"cornerstone":26,"reading_time_minutes":51},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":471,"title":472,"slug":473,"order_index":124,"cornerstone":26,"reading_time_minutes":51},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":475,"title":476,"slug":477,"order_index":129,"cornerstone":26,"reading_time_minutes":43},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":479,"title":480,"slug":481,"order_index":111,"cornerstone":26,"reading_time_minutes":59},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":483,"title":484,"slug":485,"order_index":116,"cornerstone":26,"reading_time_minutes":39},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":487,"title":488,"slug":489,"order_index":121,"cornerstone":26,"reading_time_minutes":51},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":491,"title":492,"slug":493,"order_index":126,"cornerstone":26,"reading_time_minutes":51},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":95,"name":495,"slug":496,"order_index":344,"topics":497},"Typography & Text","typography-text",[498,502,506,510,514,518,522],{"id":499,"title":500,"slug":501,"order_index":131,"cornerstone":26,"reading_time_minutes":51},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":503,"title":504,"slug":505,"order_index":135,"cornerstone":26,"reading_time_minutes":51},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":507,"title":508,"slug":509,"order_index":139,"cornerstone":26,"reading_time_minutes":51},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":511,"title":512,"slug":513,"order_index":143,"cornerstone":26,"reading_time_minutes":51},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":515,"title":516,"slug":517,"order_index":147,"cornerstone":26,"reading_time_minutes":55},113,"Styling Links","styling-links-css",{"id":519,"title":520,"slug":521,"order_index":167,"cornerstone":26,"reading_time_minutes":51},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":523,"title":524,"slug":525,"order_index":171,"cornerstone":26,"reading_time_minutes":63},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":99,"name":527,"slug":528,"order_index":344,"topics":529},"Display, Position & Layout Basics","display-position-layout-basics",[530,534,538,542,546,550,554],{"id":531,"title":532,"slug":533,"order_index":175,"cornerstone":26,"reading_time_minutes":51},116,"Display & Inline-block","display-and-inline-block",{"id":535,"title":536,"slug":537,"order_index":179,"cornerstone":26,"reading_time_minutes":43},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":539,"title":540,"slug":541,"order_index":190,"cornerstone":26,"reading_time_minutes":43},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":543,"title":544,"slug":545,"order_index":195,"cornerstone":26,"reading_time_minutes":39},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":547,"title":548,"slug":549,"order_index":200,"cornerstone":26,"reading_time_minutes":43},120,"Centering Techniques","centering-techniques",{"id":551,"title":552,"slug":553,"order_index":205,"cornerstone":26,"reading_time_minutes":51},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":555,"title":556,"slug":557,"order_index":210,"cornerstone":26,"reading_time_minutes":55},122,"Website Layout Basics","website-layout-basics",{"id":114,"name":559,"slug":560,"order_index":344,"topics":561},"The Modern CSS Toolkit","the-modern-css-toolkit",[562,566,570,574,578,582],{"id":563,"title":564,"slug":565,"order_index":215,"cornerstone":26,"reading_time_minutes":55},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":567,"title":568,"slug":569,"order_index":224,"cornerstone":26,"reading_time_minutes":55},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":571,"title":572,"slug":573,"order_index":229,"cornerstone":26,"reading_time_minutes":51},131,"Native CSS Nesting","native-css-nesting",{"id":575,"title":576,"slug":577,"order_index":238,"cornerstone":26,"reading_time_minutes":51},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":579,"title":580,"slug":581,"order_index":243,"cornerstone":26,"reading_time_minutes":59},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":583,"title":584,"slug":585,"order_index":248,"cornerstone":26,"reading_time_minutes":55},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":119,"name":587,"slug":588,"order_index":344,"topics":589},"Responsive Design","responsive-design",[590,594,598,602,606,610],{"id":591,"title":592,"slug":593,"order_index":253,"cornerstone":26,"reading_time_minutes":59},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":595,"title":596,"slug":597,"order_index":187,"cornerstone":26,"reading_time_minutes":55},136,"Media Queries","media-queries",{"id":599,"title":600,"slug":601,"order_index":192,"cornerstone":26,"reading_time_minutes":55},137,"Responsive Images & Video","responsive-images-and-video",{"id":603,"title":604,"slug":605,"order_index":197,"cornerstone":26,"reading_time_minutes":59},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":607,"title":608,"slug":609,"order_index":202,"cornerstone":26,"reading_time_minutes":59},139,"Container Queries","container-queries",{"id":611,"title":612,"slug":613,"order_index":207,"cornerstone":26,"reading_time_minutes":71},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":124,"name":615,"slug":616,"order_index":344,"topics":617},"Transitions & Animation","transitions-animation",[618,622,626,630,634,638,642],{"id":619,"title":620,"slug":621,"order_index":212,"cornerstone":26,"reading_time_minutes":39},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":623,"title":624,"slug":625,"order_index":221,"cornerstone":26,"reading_time_minutes":35},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":627,"title":628,"slug":629,"order_index":226,"cornerstone":26,"reading_time_minutes":39},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":631,"title":632,"slug":633,"order_index":235,"cornerstone":26,"reading_time_minutes":39},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":635,"title":636,"slug":637,"order_index":240,"cornerstone":26,"reading_time_minutes":39},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":639,"title":640,"slug":641,"order_index":245,"cornerstone":26,"reading_time_minutes":39},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":643,"title":644,"slug":645,"order_index":250,"cornerstone":26,"reading_time_minutes":43},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":647},[648,651,655,660,665],{"name":335,"slug":336,"description":649,"post_count":23,"subcategories":650},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":652,"description":653,"post_count":23,"subcategories":654},"html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":656,"slug":657,"description":658,"post_count":9,"subcategories":659},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":661,"slug":662,"description":663,"post_count":9,"subcategories":664},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":666,"slug":667,"description":668,"post_count":9,"subcategories":669},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":671},{"id":487,"title":488,"slug":489,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":51,"cornerstone":26,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":756,"quiz":5,"exercises":780,"published_at":5,"updated_at":799,"prev":800,"next":801},"\u003Ch2 id=\"css-overflow-hidden-scroll-auto-clip-and-text-overflow\">CSS Overflow: hidden, scroll, auto, clip and text-overflow\u003C\u002Fh2>\u003Cp>The \u003Cstrong>CSS overflow\u003C\u002Fstrong> property controls what happens when content is too big for its box. Should it spill out, be cut off, or get a scrollbar? Overflow is behind scrollable panels, modals, carousels, truncated text and the dreaded accidental horizontal scrollbar, so it is one of the most practical properties to master.\u003C\u002Fp>\u003Ch3 id=\"what-you-will-learn\">What You Will Learn\u003C\u002Fh3>\u003Cul>\u003Cli>All overflow values: \u003Ccode>visible\u003C\u002Fcode>, \u003Ccode>hidden\u003C\u002Fcode>, \u003Ccode>scroll\u003C\u002Fcode>, \u003Ccode>auto\u003C\u002Fcode>, \u003Ccode>clip\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>overflow-x\u003C\u002Fcode> and \u003Ccode>overflow-y\u003C\u002Fcode> and their surprising interaction\u003C\u002Fli>\u003Cli>Truncating text with \u003Ccode>text-overflow: ellipsis\u003C\u002Fcode> and \u003Ccode>line-clamp\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Breaking long words with \u003Ccode>overflow-wrap\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>scrollbar-gutter\u003C\u002Fcode>, \u003Ccode>overscroll-behavior\u003C\u002Fcode> and scroll snapping basics\u003C\u002Fli>\u003Cli>How overflow interacts with \u003Ccode>position: sticky\u003C\u002Fcode>, margin collapse and block formatting contexts\u003C\u002Fli>\u003Cli>How to find and fix unwanted horizontal scrolling\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"when-does-overflow-happen\">When Does Overflow Happen?\u003C\u002Fh3>\u003Cp>Overflow happens when the content of a box does not fit inside its set size. For example, a box with a fixed \u003Ccode>height: 100px\u003C\u002Fcode> that contains 300px of text will overflow vertically. If the height is \u003Ccode>auto\u003C\u002Fcode>, the box grows and there is no vertical overflow.\u003C\u002Fp>\u003Ch3 id=\"the-overflow-values\">The Overflow Values\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>visible\u003C\u002Fcode> (default): content is not clipped and spills outside the box. It can overlap other elements.\u003C\u002Fli>\u003Cli>\u003Ccode>hidden\u003C\u002Fcode>: content outside the padding box is clipped and cannot be reached by the user with scrollbars. It can still be scrolled with JavaScript or by focusing an element inside.\u003C\u002Fli>\u003Cli>\u003Ccode>scroll\u003C\u002Fcode>: content is clipped and scrollbars are \u003Cstrong>always\u003C\u002Fstrong> shown, even if nothing overflows.\u003C\u002Fli>\u003Cli>\u003Ccode>auto\u003C\u002Fcode>: scrollbars appear \u003Cstrong>only when needed\u003C\u002Fstrong>. This is usually the best choice for scrollable panels.\u003C\u002Fli>\u003Cli>\u003Ccode>clip\u003C\u002Fcode>: like hidden, but no scroll container is created and programmatic scrolling is impossible. It is stricter and slightly cheaper.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"overflow-x-and-overflow-y\">overflow-x and overflow-y\u003C\u002Fh3>\u003Cp>You can control each axis separately. There is an important rule: if one axis is \u003Ccode>visible\u003C\u002Fcode> and the other is not, the \u003Ccode>visible\u003C\u002Fcode> value computes to \u003Ccode>auto\u003C\u002Fcode>. So \u003Ccode>overflow-x: auto; overflow-y: visible;\u003C\u002Fcode> does \u003Cstrong>not\u003C\u002Fstrong> give you visible vertical overflow. Use \u003Ccode>overflow-y: clip\u003C\u002Fcode> or restructure the layout if you need that. The shorthand \u003Ccode>overflow: hidden auto\u003C\u002Fcode> sets x then y.\u003C\u002Fp>\u003Ch3 id=\"scroll-containers\">Scroll Containers\u003C\u002Fh3>\u003Cp>Any element with \u003Ccode>overflow\u003C\u002Fcode> set to \u003Ccode>hidden\u003C\u002Fcode>, \u003Ccode>scroll\u003C\u002Fcode> or \u003Ccode>auto\u003C\u002Fcode> becomes a \u003Cstrong>scroll container\u003C\u002Fstrong>. A scroll container also creates a new block formatting context, which means it contains its floats and stops margin collapse between itself and its children. This is why \u003Ccode>overflow: hidden\u003C\u002Fcode> used to be a popular clearfix hack. Today prefer \u003Ccode>display: flow-root\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"truncating-text-with-an-ellipsis\">Truncating Text with an Ellipsis\u003C\u002Fh3>\u003Cp>Single line truncation needs three properties together:\u003C\u002Fp>\u003Cpre>.truncate {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\u003C\u002Fpre>\u003Cp>For multi-line truncation use \u003Ccode>line-clamp\u003C\u002Fcode>. The widely supported form is:\u003C\u002Fp>\u003Cpre>.clamp-3 {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n  overflow: hidden;\n}\u003C\u002Fpre>\u003Ch3 id=\"breaking-long-words-overflow-wrap\">Breaking Long Words: overflow-wrap\u003C\u002Fh3>\u003Cp>Long URLs or unbroken strings can overflow their container. Use \u003Ccode>overflow-wrap: anywhere\u003C\u002Fcode> (or \u003Ccode>break-word\u003C\u002Fcode>) to let the browser break them. In flex and grid children, also set \u003Ccode>min-width: 0\u003C\u002Fcode>, because flex items default to \u003Ccode>min-width: auto\u003C\u002Fcode> and refuse to shrink below their content.\u003C\u002Fp>\u003Ch3 id=\"scrollbar-gutter\">scrollbar-gutter\u003C\u002Fh3>\u003Cp>When a scrollbar appears, it can shift content sideways because it takes space. \u003Ccode>scrollbar-gutter: stable;\u003C\u002Fcode> reserves that space in advance so the layout does not jump when content grows. Use \u003Ccode>stable both-edges\u003C\u002Fcode> to keep centered content symmetric.\u003C\u002Fp>\u003Ch3 id=\"overscroll-behavior\">overscroll-behavior\u003C\u002Fh3>\u003Cp>\u003Ccode>overscroll-behavior: contain;\u003C\u002Fcode> on a scrollable panel, like a modal body or chat list, stops the page behind from scrolling when the user reaches the end of the panel (scroll chaining).\u003C\u002Fp>\u003Ch3 id=\"scroll-snap-basics\">Scroll Snap Basics\u003C\u002Fh3>\u003Cp>On a scroll container, \u003Ccode>scroll-snap-type: x mandatory;\u003C\u002Fcode> together with \u003Ccode>scroll-snap-align: start;\u003C\u002Fcode> on children creates smooth carousel-like snapping without JavaScript.\u003C\u002Fp>\u003Ch3 id=\"overflow-and-position-sticky\">overflow and position: sticky\u003C\u002Fh3>\u003Cp>A sticky element sticks relative to its nearest ancestor scroll container. If any ancestor has \u003Ccode>overflow: hidden\u003C\u002Fcode>, \u003Ccode>auto\u003C\u002Fcode> or \u003Ccode>scroll\u003C\u002Fcode>, sticky may seem broken because that ancestor becomes the scroll container. Fix it by removing overflow from the ancestor or by using \u003Ccode>overflow: clip\u003C\u002Fcode>, which does not create a scroll container.\u003C\u002Fp>\u003Ch3 id=\"overflow-hidden-and-positioned-children\">overflow: hidden and Positioned Children\u003C\u002Fh3>\u003Cp>Overflow clipping only affects descendants whose containing block is the element or one of its descendants. An absolutely positioned child whose containing block is an ancestor \u003Cem>outside\u003C\u002Fem> the overflow element is not clipped by it. Dropdown menus often break for exactly this reason: they are clipped when their parent has overflow hidden and is the positioned ancestor.\u003C\u002Fp>\u003Ch3 id=\"finding-unwanted-horizontal-scroll\">Finding Unwanted Horizontal Scroll\u003C\u002Fh3>\u003Col>\u003Cli>Open DevTools and check which element is wider than the viewport. A quick debug rule is \u003Ccode>* { outline: 1px solid red; }\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Look for \u003Ccode>width: 100vw\u003C\u002Fcode>. The \u003Ccode>vw\u003C\u002Fcode> unit includes the vertical scrollbar width, so it causes overflow on desktop. Use \u003Ccode>100%\u003C\u002Fcode> instead.\u003C\u002Fli>\u003Cli>Check for fixed widths, wide images without \u003Ccode>max-width: 100%\u003C\u002Fcode>, wide tables and long unbroken text.\u003C\u002Fli>\u003Cli>Check negative margins and absolutely positioned elements pushed off-screen.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Avoid fixing this with \u003Ccode>overflow-x: hidden\u003C\u002Fcode> on the body, because it hides the symptom and can break sticky positioning. Fix the element that is too wide.\u003C\u002Fp>\u003Ch3 id=\"accessibility-notes\">Accessibility Notes\u003C\u002Fh3>\u003Cul>\u003Cli>Scrollable regions must be reachable by keyboard. Add \u003Ccode>tabindex='0'\u003C\u002Fcode> and an accessible name (for example \u003Ccode>role='region'\u003C\u002Fcode> with \u003Ccode>aria-label\u003C\u002Fcode>) to scrollable areas that contain no focusable elements.\u003C\u002Fli>\u003Cli>Do not hide important content with \u003Ccode>overflow: hidden\u003C\u002Fcode> and fixed height. Text zoom and translation can make text larger than expected.\u003C\u002Fli>\u003Cli>Truncated text should be available in full elsewhere, such as a title attribute or expanded view.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh3>\u003Cul>\u003Cli>Using \u003Ccode>overflow: scroll\u003C\u002Fcode> when \u003Ccode>auto\u003C\u002Fcode> is enough.\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>overflow-y: visible\u003C\u002Fcode> to work when \u003Ccode>overflow-x\u003C\u002Fcode> is auto.\u003C\u002Fli>\u003Cli>Forgetting \u003Ccode>white-space: nowrap\u003C\u002Fcode> with \u003Ccode>text-overflow: ellipsis\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Using \u003Ccode>overflow-x: hidden\u003C\u002Fcode> on body to hide layout bugs.\u003C\u002Fli>\u003Cli>Forgetting \u003Ccode>min-width: 0\u003C\u002Fcode> on flex children that hold long text.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"frequently-asked-questions\">Frequently Asked Questions\u003C\u002Fh3>\u003Ch4 id=\"what-is-the-difference-between-overflow-hidden-and-clip\">What is the difference between overflow hidden and clip?\u003C\u002Fh4>\u003Cp>Both cut the content. \u003Ccode>hidden\u003C\u002Fcode> creates a scroll container (so it can still be scrolled by script and affects sticky), while \u003Ccode>clip\u003C\u002Fcode> does not.\u003C\u002Fp>\u003Ch4 id=\"why-is-my-text-overflow-ellipsis-not-working\">Why is my text-overflow ellipsis not working?\u003C\u002Fh4>\u003Cp>You need a constrained width, \u003Ccode>overflow\u003C\u002Fcode> other than visible and \u003Ccode>white-space: nowrap\u003C\u002Fcode>. In flex layouts add \u003Ccode>min-width: 0\u003C\u002Fcode> to the item.\u003C\u002Fp>\u003Ch4 id=\"why-is-there-a-horizontal-scrollbar-on-my-page\">Why is there a horizontal scrollbar on my page?\u003C\u002Fh4>\u003Cp>Some element is wider than the viewport. Common causes are \u003Ccode>100vw\u003C\u002Fcode>, fixed widths and wide media. Find it in DevTools.\u003C\u002Fp>\u003Ch4 id=\"does-overflow-auto-always-show-a-scrollbar\">Does overflow: auto always show a scrollbar?\u003C\u002Fh4>\u003Cp>No. The scrollbar appears only when the content actually overflows.\u003C\u002Fp>\u003Ch3 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh3>\u003Cul>\u003Cli>Default is visible. Use \u003Ccode>auto\u003C\u002Fcode> for scroll panels, \u003Ccode>hidden\u003C\u002Fcode> or \u003Ccode>clip\u003C\u002Fcode> to cut content.\u003C\u002Fli>\u003Cli>Ellipsis needs nowrap, overflow hidden and text-overflow together.\u003C\u002Fli>\u003Cli>overflow creates a scroll container, which affects sticky, floats and margin collapse.\u003C\u002Fli>\u003Cli>Use \u003Ccode>scrollbar-gutter\u003C\u002Fcode> and \u003Ccode>overscroll-behavior\u003C\u002Fcode> for polished scrolling.\u003C\u002Fli>\u003Cli>Fix the wide element instead of hiding overflow on the body.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.box { width: 180px; height: 70px; border: 2px solid #2c3e50; margin: 8px; padding: 6px; float: left; font-size: 14px; }\n.v { overflow: visible; }\n.h { overflow: hidden; }\n.s { overflow: scroll; }\n.a { overflow: auto; }\n<\u002Fstyle>\n<div class='box v'>visible: this long text spills outside of the box and keeps going down the page.<\u002Fdiv>\n<div class='box h'>hidden: this long text is clipped at the padding edge and the rest is cut.<\u002Fdiv>\n<div class='box s'>scroll: scrollbars always show. Some more text to scroll through here.<\u002Fdiv>\n<div class='box a'>auto: scrollbar only when needed. Add more text to this box to see it appear.<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.truncate { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #999; padding: 8px; }\n<\u002Fstyle>\n<div class='truncate'>This is a very long single line of text that will be cut with an ellipsis.<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.clamp { width: 260px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; border: 1px solid #999; padding: 8px; }\n<\u002Fstyle>\n<p class='clamp'>Multi-line truncation shows only the first three lines of text and then adds an ellipsis. Everything after that is hidden, even if the paragraph is very long and keeps going for many more lines of content.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.row { display: flex; gap: 12px; width: 320px; border: 1px solid #999; padding: 8px; }\n.icon { flex: none; width: 32px; height: 32px; background: #3498db; }\n.text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n<\u002Fstyle>\n<div class='row'>\n  <div class='icon'><\u002Fdiv>\n  <div class='text'>Flex child text truncates only because min-width is set to 0 on it.<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px; overscroll-behavior-x: contain; }\n.slide { flex: 0 0 220px; height: 120px; background: #f5b7b1; scroll-snap-align: start; display: grid; place-items: center; font-family: sans-serif; }\n<\u002Fstyle>\n<div class='carousel' tabindex='0' role='region' aria-label='Slides'>\n  <div class='slide'>Slide 1<\u002Fdiv><div class='slide'>Slide 2<\u002Fdiv><div class='slide'>Slide 3<\u002Fdiv><div class='slide'>Slide 4<\u002Fdiv><div class='slide'>Slide 5<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\nhtml { scrollbar-gutter: stable; }\n.panel { height: 120px; overflow: auto; border: 1px solid #999; padding: 8px; }\n<\u002Fstyle>\n<p>scrollbar-gutter: stable reserves space for the scrollbar so the layout does not jump.<\u002Fp>\n<div class='panel'>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7<br>Line 8<br>Line 9<br>Line 10<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>\u002F* Find elements wider than the viewport (paste in the DevTools console) *\u002F\nconst vw = document.documentElement.clientWidth;\nconst wide = [...document.querySelectorAll('body *')].filter(el => el.getBoundingClientRect().right > vw);\nconsole.log('Elements causing horizontal overflow:', wide.length);\nwide.forEach(el => console.log(el.tagName, el.className, Math.round(el.getBoundingClientRect().right)));\n\n\u002F* Check if a box overflows vertically or horizontally *\u002F\nconst box = document.createElement('div');\nbox.style.cssText = 'width:100px;height:50px;overflow:auto;';\nbox.innerHTML = '<div style=\"width:300px;height:200px\"><\u002Fdiv>';\ndocument.body.appendChild(box);\nconsole.log('scrollWidth:', box.scrollWidth, 'clientWidth:', box.clientWidth);\nconsole.log('overflows:', box.scrollWidth > box.clientWidth || box.scrollHeight > box.clientHeight);\nbox.remove();\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":463,"slug":464},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-overflow","CSS Overflow Explained: hidden, scroll, auto, clip, ellipsis","Learn CSS overflow with examples: hidden vs scroll vs auto vs clip, text-overflow ellipsis, line-clamp, scrollbar-gutter, sticky issues and fixing horizontal scroll.",[686],{"id":687,"text":688,"level":23,"children":689},"css-overflow-hidden-scroll-auto-clip-and-text-overflow","CSS Overflow: hidden, scroll, auto, clip and text-overflow",[690,694,698,702,706,710,714,718,721,724,728,732,736,740,744,748,752],{"id":691,"text":692,"level":31,"children":693},"what-you-will-learn","What You Will Learn",[],{"id":695,"text":696,"level":31,"children":697},"when-does-overflow-happen","When Does Overflow Happen?",[],{"id":699,"text":700,"level":31,"children":701},"the-overflow-values","The Overflow Values",[],{"id":703,"text":704,"level":31,"children":705},"overflow-x-and-overflow-y","overflow-x and overflow-y",[],{"id":707,"text":708,"level":31,"children":709},"scroll-containers","Scroll Containers",[],{"id":711,"text":712,"level":31,"children":713},"truncating-text-with-an-ellipsis","Truncating Text with an Ellipsis",[],{"id":715,"text":716,"level":31,"children":717},"breaking-long-words-overflow-wrap","Breaking Long Words: overflow-wrap",[],{"id":719,"text":719,"level":31,"children":720},"scrollbar-gutter",[],{"id":722,"text":722,"level":31,"children":723},"overscroll-behavior",[],{"id":725,"text":726,"level":31,"children":727},"scroll-snap-basics","Scroll Snap Basics",[],{"id":729,"text":730,"level":31,"children":731},"overflow-and-position-sticky","overflow and position: sticky",[],{"id":733,"text":734,"level":31,"children":735},"overflow-hidden-and-positioned-children","overflow: hidden and Positioned Children",[],{"id":737,"text":738,"level":31,"children":739},"finding-unwanted-horizontal-scroll","Finding Unwanted Horizontal Scroll",[],{"id":741,"text":742,"level":31,"children":743},"accessibility-notes","Accessibility Notes",[],{"id":745,"text":746,"level":31,"children":747},"common-mistakes","Common Mistakes",[],{"id":749,"text":750,"level":31,"children":751},"frequently-asked-questions","Frequently Asked Questions",[],{"id":753,"text":754,"level":31,"children":755},"key-takeaways","Key Takeaways",[],[757,761,764,767,770,773,776],{"id":758,"language":652,"code":759,"is_editable":760},333,"\u003Cstyle>\n.box { width: 180px; height: 70px; border: 2px solid #2c3e50; margin: 8px; padding: 6px; float: left; font-size: 14px; }\n.v { overflow: visible; }\n.h { overflow: hidden; }\n.s { overflow: scroll; }\n.a { overflow: auto; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box v'>visible: this long text spills outside of the box and keeps going down the page.\u003C\u002Fdiv>\n\u003Cdiv class='box h'>hidden: this long text is clipped at the padding edge and the rest is cut.\u003C\u002Fdiv>\n\u003Cdiv class='box s'>scroll: scrollbars always show. Some more text to scroll through here.\u003C\u002Fdiv>\n\u003Cdiv class='box a'>auto: scrollbar only when needed. Add more text to this box to see it appear.\u003C\u002Fdiv>",true,{"id":762,"language":652,"code":763,"is_editable":760},334,"\u003Cstyle>\n.truncate { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #999; padding: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='truncate'>This is a very long single line of text that will be cut with an ellipsis.\u003C\u002Fdiv>",{"id":765,"language":652,"code":766,"is_editable":760},335,"\u003Cstyle>\n.clamp { width: 260px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; border: 1px solid #999; padding: 8px; }\n\u003C\u002Fstyle>\n\u003Cp class='clamp'>Multi-line truncation shows only the first three lines of text and then adds an ellipsis. Everything after that is hidden, even if the paragraph is very long and keeps going for many more lines of content.\u003C\u002Fp>",{"id":768,"language":652,"code":769,"is_editable":760},336,"\u003Cstyle>\n.row { display: flex; gap: 12px; width: 320px; border: 1px solid #999; padding: 8px; }\n.icon { flex: none; width: 32px; height: 32px; background: #3498db; }\n.text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\n  \u003Cdiv class='icon'>\u003C\u002Fdiv>\n  \u003Cdiv class='text'>Flex child text truncates only because min-width is set to 0 on it.\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":771,"language":652,"code":772,"is_editable":760},337,"\u003Cstyle>\n.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px; overscroll-behavior-x: contain; }\n.slide { flex: 0 0 220px; height: 120px; background: #f5b7b1; scroll-snap-align: start; display: grid; place-items: center; font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cdiv class='carousel' tabindex='0' role='region' aria-label='Slides'>\n  \u003Cdiv class='slide'>Slide 1\u003C\u002Fdiv>\u003Cdiv class='slide'>Slide 2\u003C\u002Fdiv>\u003Cdiv class='slide'>Slide 3\u003C\u002Fdiv>\u003Cdiv class='slide'>Slide 4\u003C\u002Fdiv>\u003Cdiv class='slide'>Slide 5\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":774,"language":652,"code":775,"is_editable":760},338,"\u003Cstyle>\nhtml { scrollbar-gutter: stable; }\n.panel { height: 120px; overflow: auto; border: 1px solid #999; padding: 8px; }\n\u003C\u002Fstyle>\n\u003Cp>scrollbar-gutter: stable reserves space for the scrollbar so the layout does not jump.\u003C\u002Fp>\n\u003Cdiv class='panel'>Line 1\u003Cbr>Line 2\u003Cbr>Line 3\u003Cbr>Line 4\u003Cbr>Line 5\u003Cbr>Line 6\u003Cbr>Line 7\u003Cbr>Line 8\u003Cbr>Line 9\u003Cbr>Line 10\u003C\u002Fdiv>",{"id":777,"language":778,"code":779,"is_editable":760},339,"javascript","\u002F* Find elements wider than the viewport (paste in the DevTools console) *\u002F\nconst vw = document.documentElement.clientWidth;\nconst wide = [...document.querySelectorAll('body *')].filter(el => el.getBoundingClientRect().right > vw);\nconsole.log('Elements causing horizontal overflow:', wide.length);\nwide.forEach(el => console.log(el.tagName, el.className, Math.round(el.getBoundingClientRect().right)));\n\n\u002F* Check if a box overflows vertically or horizontally *\u002F\nconst box = document.createElement('div');\nbox.style.cssText = 'width:100px;height:50px;overflow:auto;';\nbox.innerHTML = '\u003Cdiv style=\"width:300px;height:200px\">\u003C\u002Fdiv>';\ndocument.body.appendChild(box);\nconsole.log('scrollWidth:', box.scrollWidth, 'clientWidth:', box.clientWidth);\nconsole.log('overflows:', box.scrollWidth > box.clientWidth || box.scrollHeight > box.clientHeight);\nbox.remove();",[781,787,793],{"id":567,"title":782,"slug":783,"prompt":784,"starter_code":785,"expected_output":786,"language":652,"order_index":9},"Truncate with an Ellipsis","truncate-with-ellipsis","The title below wraps onto several lines and overflows its 200px card. Using only the .title rule, make it stay on one line and end with an ellipsis (three dots) when it is too long.","\u003Cstyle>\n.card { width: 200px; border: 1px solid #999; padding: 10px; }\n.title { \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\n  \u003Cdiv class='title'>A very long article title that should never wrap\u003C\u002Fdiv>\n\u003C\u002Fdiv>","The title stays on one line and ends with an ellipsis.",{"id":571,"title":788,"slug":789,"prompt":790,"starter_code":791,"expected_output":792,"language":652,"order_index":23},"Scrollable Chat Panel","scrollable-chat-panel","Make the .chat panel 150px tall with a vertical scrollbar that appears only when needed. Also stop the page behind it from scrolling when the user reaches the end of the panel.","\u003Cstyle>\n.chat { width: 260px; border: 1px solid #999; padding: 8px; \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Cdiv class='chat'>\n  \u003Cp>Message 1\u003C\u002Fp>\u003Cp>Message 2\u003C\u002Fp>\u003Cp>Message 3\u003C\u002Fp>\u003Cp>Message 4\u003C\u002Fp>\u003Cp>Message 5\u003C\u002Fp>\u003Cp>Message 6\u003C\u002Fp>\u003Cp>Message 7\u003C\u002Fp>\n\u003C\u002Fdiv>","The panel is 150px tall, scrolls vertically only when needed and does not chain scrolling to the page.",{"id":575,"title":794,"slug":795,"prompt":796,"starter_code":797,"expected_output":798,"language":778,"order_index":31},"Detect Overflow","detect-overflow","Write a function isOverflowing(scrollWidth, clientWidth, scrollHeight, clientHeight) that returns true if the content overflows on either axis.","function isOverflowing(scrollWidth, clientWidth, scrollHeight, clientHeight) {\n  \u002F\u002F TODO: implement\n}\n\nconsole.log(isOverflowing(300, 100, 50, 50));\nconsole.log(isOverflowing(100, 100, 200, 50));\nconsole.log(isOverflowing(100, 100, 50, 50));","true\ntrue\nfalse","2026-09-30T17:00:51+00:00",{"id":483,"slug":485,"title":484},{"id":491,"slug":493,"title":492}]