[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":646,"topic:css-width-height-min-max":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":479,"title":480,"slug":481,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":59,"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":773,"quiz":5,"exercises":809,"published_at":5,"updated_at":831,"prev":832,"next":833},"\u003Ch2 id=\"css-width-height-min-width-max-width-min-height-and-max-height\">CSS Width, Height, Min-Width, Max-Width, Min-Height and Max-Height\u003C\u002Fh2>\u003Cp>The CSS properties \u003Cstrong>width\u003C\u002Fstrong>, \u003Cstrong>height\u003C\u002Fstrong>, \u003Cstrong>min-width\u003C\u002Fstrong>, \u003Cstrong>max-width\u003C\u002Fstrong>, \u003Cstrong>min-height\u003C\u002Fstrong> and \u003Cstrong>max-height\u003C\u002Fstrong> control the size of an element's box. Understanding them, together with units such as %, rem, vw and dvh and functions such as \u003Ccode>clamp()\u003C\u002Fcode>, is the key to \u003Cstrong>responsive design\u003C\u002Fstrong>. This lesson explains how the browser calculates sizes, when to use min and max limits, and how to avoid classic problems such as overflow, collapsed heights and the mobile 100vh bug.\u003C\u002Fp>\u003Ch3 id=\"what-you-will-learn\">What You Will Learn\u003C\u002Fh3>\u003Cul>\u003Cli>How width and height behave by default (auto)\u003C\u002Fli>\u003Cli>Sizing units: px, %, em, rem, vw, vh, svh, lvh, dvh, ch\u003C\u002Fli>\u003Cli>How min-width, max-width, min-height and max-height work and which one wins\u003C\u002Fli>\u003Cli>The responsive image and container pattern with max-width\u003C\u002Fli>\u003Cli>Intrinsic sizing keywords: min-content, max-content, fit-content\u003C\u002Fli>\u003Cli>Modern functions: min(), max() and clamp()\u003C\u002Fli>\u003Cli>aspect-ratio, overflow and logical sizing properties\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"the-width-property\">The width Property\u003C\u002Fh3>\u003Cp>\u003Ccode>width\u003C\u002Fcode> sets the width of the content box (or the border box if \u003Ccode>box-sizing: border-box\u003C\u002Fcode>). The default value is \u003Ccode>auto\u003C\u002Fcode>, and what auto means depends on the element:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Block elements\u003C\u002Fstrong>: fill the available width of the parent (minus their own margin, border and padding).\u003C\u002Fli>\u003Cli>\u003Cstrong>Inline elements\u003C\u002Fstrong>: width does not apply; the width is set by the content.\u003C\u002Fli>\u003Cli>\u003Cstrong>Floated, absolutely positioned and inline-block elements\u003C\u002Fstrong>: shrink to fit their content.\u003C\u002Fli>\u003Cli>\u003Cstrong>Flex and grid items\u003C\u002Fstrong>: sized by the flex or grid algorithm.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"width-auto-vs-width-100\">width: auto vs width: 100%\u003C\u002Fh3>\u003Cp>A block with \u003Ccode>width: auto\u003C\u002Fcode> automatically fits inside its parent, including margin, border and padding. With \u003Ccode>width: 100%\u003C\u002Fcode>, the content box alone becomes as wide as the parent, so padding, border or margin can push the element out (in content-box mode). Prefer \u003Ccode>auto\u003C\u002Fcode> for normal blocks, and always use \u003Ccode>box-sizing: border-box\u003C\u002Fcode> globally.\u003C\u002Fp>\u003Ch3 id=\"the-height-property\">The height Property\u003C\u002Fh3>\u003Cp>The default \u003Ccode>height: auto\u003C\u002Fcode> means the height is determined by the content. Fixed heights are risky for text containers because content can overflow when fonts are larger, text is translated or the viewport is narrow. Prefer \u003Ccode>min-height\u003C\u002Fcode> for boxes that contain text.\u003C\u002Fp>\u003Ch3 id=\"percentage-heights-need-a-parent-height\">Percentage Heights Need a Parent Height\u003C\u002Fh3>\u003Cp>A percentage \u003Ccode>height\u003C\u002Fcode> only works if the parent has a definite height. If the parent height is auto, the percentage computes to auto. To make a page-level layout fill the screen, give the root elements a height or use \u003Ccode>min-height: 100dvh\u003C\u002Fcode> instead.\u003C\u002Fp>\u003Ch3 id=\"sizing-units-overview\">Sizing Units Overview\u003C\u002Fh3>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Unit\u003C\u002Fth>\u003Cth>Relative to\u003C\u002Fth>\u003Cth>Typical use\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>px\u003C\u002Ftd>\u003Ctd>Fixed CSS pixel\u003C\u002Ftd>\u003Ctd>Borders, small fixed sizes\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>%\u003C\u002Ftd>\u003Ctd>Containing block size\u003C\u002Ftd>\u003Ctd>Fluid widths\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>em\u003C\u002Ftd>\u003Ctd>Element font size\u003C\u002Ftd>\u003Ctd>Components that scale with text\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>rem\u003C\u002Ftd>\u003Ctd>Root font size\u003C\u002Ftd>\u003Ctd>Spacing and size systems\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>ch\u003C\u002Ftd>\u003Ctd>Width of the character 0\u003C\u002Ftd>\u003Ctd>Readable line length (max-width: 65ch)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>vw, vh\u003C\u002Ftd>\u003Ctd>1% of viewport width or height\u003C\u002Ftd>\u003Ctd>Full-screen sections\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>svh, lvh, dvh\u003C\u002Ftd>\u003Ctd>Small, large or dynamic viewport height\u003C\u002Ftd>\u003Ctd>Mobile-safe full-height layouts\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>cqw, cqh\u003C\u002Ftd>\u003Ctd>Container query size\u003C\u002Ftd>\u003Ctd>Component-level responsive sizes\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch3 id=\"the-mobile-100vh-problem-and-dvh\">The Mobile 100vh Problem and dvh\u003C\u002Fh3>\u003Cp>On phones, the browser address bar can show or hide, so \u003Ccode>100vh\u003C\u002Fcode> (based on the largest viewport) can be taller than the visible screen and cause a jump or a hidden footer. Modern CSS provides \u003Ccode>svh\u003C\u002Fcode> (smallest viewport), \u003Ccode>lvh\u003C\u002Fcode> (largest) and \u003Ccode>dvh\u003C\u002Fcode> (dynamic, updates as the bars change). For full-screen sections, use \u003Ccode>min-height: 100dvh\u003C\u002Fcode>, with \u003Ccode>min-height: 100vh\u003C\u002Fcode> as a fallback written before it.\u003C\u002Fp>\u003Ch3 id=\"min-width-and-max-width\">min-width and max-width\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>max-width\u003C\u002Fcode> sets an upper limit: the element can shrink but never grows beyond it.\u003C\u002Fli>\u003Cli>\u003Ccode>min-width\u003C\u002Fcode> sets a lower limit: the element can grow but never gets smaller.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>The most important pattern in responsive design is \u003Ccode>max-width\u003C\u002Fcode> with fluid widths. A container with \u003Ccode>width: 100%; max-width: 1200px; margin-inline: auto;\u003C\u002Fcode> is fluid on small screens and centered with a cap on large screens. Another classic is \u003Ccode>img { max-width: 100%; height: auto; }\u003C\u002Fcode>, which makes images scale down inside their containers without distortion.\u003C\u002Fp>\u003Ch3 id=\"min-height-and-max-height\">min-height and max-height\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>min-height\u003C\u002Fcode> guarantees a minimum size but lets the box grow with content. Perfect for hero sections, cards and full-page layouts (for example a sticky footer).\u003C\u002Fli>\u003Cli>\u003Ccode>max-height\u003C\u002Fcode> caps the size. Combine with \u003Ccode>overflow: auto\u003C\u002Fcode> for scrollable panels, dropdowns and chat boxes.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"which-wins-width-min-width-or-max-width\">Which Wins: width, min-width or max-width?\u003C\u002Fh3>\u003Cp>The browser calculates the width first, then applies the limits in this order: if the result is larger than \u003Ccode>max-width\u003C\u002Fcode>, it is reduced to max-width; then if it is smaller than \u003Ccode>min-width\u003C\u002Fcode>, it is raised to min-width. So \u003Cstrong>min-width always beats max-width\u003C\u002Fstrong> when they conflict, and both beat \u003Ccode>width\u003C\u002Fcode>. The same rules apply to height, min-height and max-height.\u003C\u002Fp>\u003Ch3 id=\"intrinsic-sizing-keywords\">Intrinsic Sizing Keywords\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>min-content\u003C\u002Fcode>: the smallest size that does not cause overflow (for text, the longest word).\u003C\u002Fli>\u003Cli>\u003Ccode>max-content\u003C\u002Fcode>: the size needed to lay out all content on one line.\u003C\u002Fli>\u003Cli>\u003Ccode>fit-content\u003C\u002Fcode> (or \u003Ccode>fit-content(200px)\u003C\u002Fcode>): uses the available space, but never more than max-content and never less than min-content. It is excellent for shrink-wrapped centered boxes: \u003Ccode>width: fit-content; margin-inline: auto;\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"modern-functions-min-max-and-clamp\">Modern Functions: min(), max() and clamp()\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>width: min(100%, 60rem)\u003C\u002Fcode> is a one-line replacement for width 100% plus max-width 60rem.\u003C\u002Fli>\u003Cli>\u003Ccode>width: max(50%, 300px)\u003C\u002Fcode> picks the larger of the two values.\u003C\u002Fli>\u003Cli>\u003Ccode>width: clamp(16rem, 50%, 40rem)\u003C\u002Fcode> sets a minimum, a preferred fluid value and a maximum. It is widely used for fluid typography and spacing as well.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"aspect-ratio\">aspect-ratio\u003C\u002Fh3>\u003Cp>The \u003Ccode>aspect-ratio\u003C\u002Fcode> property keeps a consistent ratio between width and height, for example \u003Ccode>aspect-ratio: 16 \u002F 9;\u003C\u002Fcode> for videos or \u003Ccode>1 \u002F 1\u003C\u002Fcode> for avatars. It replaces the old padding-top percentage hack. Combine it with \u003Ccode>object-fit: cover\u003C\u002Fcode> on images to avoid distortion and reduce layout shift (good for Core Web Vitals and CLS). Setting width and height attributes on images also lets browsers reserve space before the image loads.\u003C\u002Fp>\u003Ch3 id=\"overflow-what-happens-when-content-is-bigger\">Overflow: What Happens When Content Is Bigger?\u003C\u002Fh3>\u003Cp>When content exceeds a fixed width or height, the \u003Ccode>overflow\u003C\u002Fcode> property decides the result: \u003Ccode>visible\u003C\u002Fcode> (default, content spills out), \u003Ccode>hidden\u003C\u002Fcode> (clipped), \u003Ccode>scroll\u003C\u002Fcode> or \u003Ccode>auto\u003C\u002Fcode> (scrollbars when needed). Use \u003Ccode>overflow-x: auto\u003C\u002Fcode> on wide tables and code blocks so they scroll inside their own container instead of breaking the page width.\u003C\u002Fp>\u003Ch3 id=\"flexbox-and-grid-the-min-width-0-fix\">Flexbox and Grid: The min-width: 0 Fix\u003C\u002Fh3>\u003Cp>Flex and grid items have a default \u003Ccode>min-width: auto\u003C\u002Fcode>, which prevents them from shrinking below their content size. A long word or wide image can cause overflow. Setting \u003Ccode>min-width: 0\u003C\u002Fcode> (or \u003Ccode>overflow: hidden\u003C\u002Fcode>) on the flex item lets it shrink, and is the standard fix for text that refuses to truncate inside flex layouts. In Grid, \u003Ccode>minmax(0, 1fr)\u003C\u002Fcode> does the same job.\u003C\u002Fp>\u003Ch3 id=\"logical-sizing-properties\">Logical Sizing Properties\u003C\u002Fh3>\u003Cp>Logical equivalents adapt to writing mode: \u003Ccode>inline-size\u003C\u002Fcode> (width in horizontal text), \u003Ccode>block-size\u003C\u002Fcode> (height), \u003Ccode>min-inline-size\u003C\u002Fcode>, \u003Ccode>max-inline-size\u003C\u002Fcode>, \u003Ccode>min-block-size\u003C\u002Fcode> and \u003Ccode>max-block-size\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"readable-line-length-with-ch\">Readable Line Length with ch\u003C\u002Fh3>\u003Cp>For comfortable reading, limit paragraph width to about 60 to 75 characters: \u003Ccode>p { max-width: 65ch; }\u003C\u002Fcode>. The ch unit scales with the font, so the line length stays readable at any size.\u003C\u002Fp>\u003Ch3 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh3>\u003Cul>\u003Cli>Using a fixed \u003Ccode>height\u003C\u002Fcode> on text containers, causing overflow.\u003C\u002Fli>\u003Cli>Using \u003Ccode>width: 100%\u003C\u002Fcode> with padding in content-box mode.\u003C\u002Fli>\u003Cli>Expecting percentage height to work when the parent has no height.\u003C\u002Fli>\u003Cli>Using \u003Ccode>100vh\u003C\u002Fcode> on mobile without dvh, hiding content behind the browser bars.\u003C\u002Fli>\u003Cli>Using fixed \u003Ccode>width: 1200px\u003C\u002Fcode> instead of \u003Ccode>max-width\u003C\u002Fcode>, which breaks small screens.\u003C\u002Fli>\u003Cli>Forgetting \u003Ccode>height: auto\u003C\u002Fcode> on responsive images with width or height attributes.\u003C\u002Fli>\u003Cli>Confusing min-width (floor) with max-width (ceiling).\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"best-practices\">Best Practices\u003C\u002Fh3>\u003Cul>\u003Cli>Prefer \u003Ccode>max-width\u003C\u002Fcode> over \u003Ccode>width\u003C\u002Fcode> for containers and media.\u003C\u002Fli>\u003Cli>Prefer \u003Ccode>min-height\u003C\u002Fcode> over \u003Ccode>height\u003C\u002Fcode> for boxes that hold text.\u003C\u002Fli>\u003Cli>Use \u003Ccode>dvh\u003C\u002Fcode> with a \u003Ccode>vh\u003C\u002Fcode> fallback for full-screen sections.\u003C\u002Fli>\u003Cli>Use rem, ch and clamp() for scalable, accessible sizes.\u003C\u002Fli>\u003Cli>Use \u003Ccode>aspect-ratio\u003C\u002Fcode> for media to avoid layout shift.\u003C\u002Fli>\u003Cli>Set \u003Ccode>box-sizing: border-box\u003C\u002Fcode> globally.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"frequently-asked-questions\">Frequently Asked Questions\u003C\u002Fh3>\u003Ch4 id=\"what-is-the-difference-between-width-and-max-width\">What is the difference between width and max-width?\u003C\u002Fh4>\u003Cp>Width sets a preferred size. Max-width is an upper limit that allows the element to shrink on small screens but never grow beyond the cap.\u003C\u002Fp>\u003Ch4 id=\"why-is-height-100-not-working\">Why is height: 100% not working?\u003C\u002Fh4>\u003Cp>The parent does not have a definite height. Set the parent height, or use min-height with viewport units.\u003C\u002Fp>\u003Ch4 id=\"what-is-the-difference-between-vh-and-dvh\">What is the difference between vh and dvh?\u003C\u002Fh4>\u003Cp>vh uses the largest viewport height, while dvh follows the visible height as mobile browser bars show and hide.\u003C\u002Fp>\u003Ch4 id=\"does-min-width-override-max-width\">Does min-width override max-width?\u003C\u002Fh4>\u003Cp>Yes. When both conflict, min-width wins.\u003C\u002Fp>\u003Ch3 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh3>\u003Cul>\u003Cli>Default width and height are auto, driven by the layout and the content.\u003C\u002Fli>\u003Cli>max-width and min-height are the responsive-friendly choices for containers and text boxes.\u003C\u002Fli>\u003Cli>min-width beats max-width, and both beat width.\u003C\u002Fli>\u003Cli>Use dvh, clamp(), min(), ch and aspect-ratio for modern, mobile-safe sizing.\u003C\u002Fli>\u003Cli>Use min-width: 0 to fix overflow in flex items.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n* { box-sizing: border-box; }\n.parent { background: #eaf2f8; padding: 10px; width: 400px; font-family: sans-serif; }\n.auto { background: #aed6f1; padding: 16px; margin: 8px 0; border: 4px solid #2471a3; }\n.full { background: #f5b7b1; padding: 16px; margin: 8px 0; border: 4px solid #c0392b; width: 100%; }\n<\u002Fstyle>\n<div class='parent'>\n  <div class='auto'>width: auto fills the parent<\u002Fdiv>\n  <div class='full'>width: 100% (border-box keeps it inside)<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n* { box-sizing: border-box; }\nbody { margin: 0; font-family: sans-serif; }\n.container { width: 100%; max-width: 600px; margin-inline: auto; padding: 16px; background: #d5f5e3; }\nimg { max-width: 100%; height: auto; }\n<\u002Fstyle>\n<div class='container'>\n  <h3>Fluid, capped and centered<\u002Fh3>\n  <p>Resize the preview window. The container shrinks on small screens and stops growing at 600px.<\u002Fp>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n* { box-sizing: border-box; }\n.box { font-family: sans-serif; padding: 12px; margin: 8px 0; background: #fad7a0; }\n.a { width: 500px; max-width: 300px; }                   \u002F* capped to 300px *\u002F\n.b { width: 100px; min-width: 250px; }                   \u002F* raised to 250px *\u002F\n.c { width: 500px; max-width: 200px; min-width: 350px; } \u002F* min-width wins: 350px *\u002F\n<\u002Fstyle>\n<div class='box a'>width 500, max-width 300 = 300px<\u002Fdiv>\n<div class='box b'>width 100, min-width 250 = 250px<\u002Fdiv>\n<div class='box c'>min-width beats max-width = 350px<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n* { box-sizing: border-box; }\nbody { font-family: sans-serif; }\n.card { width: 260px; min-height: 120px; padding: 16px; background: #e8daef; margin-bottom: 12px; }\n.scroll { width: 260px; max-height: 100px; overflow: auto; padding: 12px; background: #d6eaf8; }\n<\u002Fstyle>\n<div class='card'>min-height: short content still gets 120px, and the box grows if the content is longer.<\u002Fdiv>\n<div class='scroll'>max-height with overflow auto: this panel scrolls when the content is longer than 100px. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n* { box-sizing: border-box; }\nbody { margin: 0; font-family: sans-serif; }\n.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }\n.page header, .page footer { background: #2c3e50; color: white; padding: 16px; }\n.page main { flex: 1; padding: 16px; background: #ecf0f1; }\n<\u002Fstyle>\n<div class='page'>\n  <header>Header<\u002Fheader>\n  <main>Main content grows to push the footer to the bottom (sticky footer with min-height and dvh).<\u002Fmain>\n  <footer>Footer<\u002Ffooter>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n* { box-sizing: border-box; }\nbody { font-family: sans-serif; }\n.fit { width: fit-content; margin-inline: auto; padding: 12px 20px; background: #abebc6; margin-bottom: 12px; }\n.min { width: min-content; padding: 12px; background: #f9e79f; margin-bottom: 12px; }\n.max { width: max-content; max-width: 100%; padding: 12px; background: #f5b7b1; }\n<\u002Fstyle>\n<div class='fit'>fit-content and centered<\u002Fdiv>\n<div class='min'>min-content wraps every word<\u002Fdiv>\n<div class='max'>max-content keeps it on one line<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n* { box-sizing: border-box; }\nbody { font-family: sans-serif; }\n.a { width: min(100%, 420px); padding: 12px; background: #aed6f1; margin-bottom: 10px; }\n.b { width: max(50%, 250px); padding: 12px; background: #f5cba7; margin-bottom: 10px; }\n.c { width: clamp(200px, 50%, 450px); padding: 12px; background: #d2b4de; }\n<\u002Fstyle>\n<div class='a'>min(100%, 420px)<\u002Fdiv>\n<div class='b'>max(50%, 250px)<\u002Fdiv>\n<div class='c'>clamp(200px, 50%, 450px)<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\nbody { font-family: sans-serif; }\n.video { aspect-ratio: 16 \u002F 9; width: 100%; max-width: 400px; background: #34495e; color: white; display: grid; place-items: center; margin-bottom: 12px; }\n.avatar { aspect-ratio: 1 \u002F 1; width: 100px; background: #e67e22; border-radius: 50%; }\n<\u002Fstyle>\n<div class='video'>16 \u002F 9<\u002Fdiv>\n<div class='avatar'><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\nbody { font-family: Georgia, serif; font-size: 18px; line-height: 1.6; margin: 20px; }\n.readable { max-width: 65ch; }\n<\u002Fstyle>\n<p class='readable'>With max-width set to 65ch, this paragraph stays at a comfortable reading length of about 65 characters per line on any screen size, which improves readability and accessibility for long articles.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n* { box-sizing: border-box; }\nbody { font-family: sans-serif; }\n.row { display: flex; gap: 10px; width: 320px; background: #eaf2f8; padding: 8px; }\n.avatar { flex: none; width: 40px; height: 40px; background: #3498db; }\n.text { background: #d6eaf8; padding: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n<\u002Fstyle>\n<div class='row'>\n  <div class='avatar'><\u002Fdiv>\n  <div class='text'>Averyveryverylongunbrokenfilename_with_no_spaces_document.pdf<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const el = document.createElement('div');\nel.style.cssText = 'width:500px;max-width:300px;min-width:350px;box-sizing:border-box;';\ndocument.body.appendChild(el);\nconsole.log('Rendered width:', el.getBoundingClientRect().width);\nel.style.minWidth = '0';\nconsole.log('Without min-width:', el.getBoundingClientRect().width);\nel.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-width-height-min-max","CSS Width, Height, Min & Max Explained with Examples","Master CSS width, height, min-width, max-width, min-height, max-height, vh\u002Fdvh units, clamp(), fit-content and aspect-ratio for responsive layouts.",[686],{"id":687,"text":688,"level":23,"children":689},"css-width-height-min-width-max-width-min-height-and-max-height","CSS Width, Height, Min-Width, Max-Width, Min-Height and Max-Height",[690,694,698,702,706,710,714,718,722,726,730,734,738,741,745,749,753,757,761,765,769],{"id":691,"text":692,"level":31,"children":693},"what-you-will-learn","What You Will Learn",[],{"id":695,"text":696,"level":31,"children":697},"the-width-property","The width Property",[],{"id":699,"text":700,"level":31,"children":701},"width-auto-vs-width-100","width: auto vs width: 100%",[],{"id":703,"text":704,"level":31,"children":705},"the-height-property","The height Property",[],{"id":707,"text":708,"level":31,"children":709},"percentage-heights-need-a-parent-height","Percentage Heights Need a Parent Height",[],{"id":711,"text":712,"level":31,"children":713},"sizing-units-overview","Sizing Units Overview",[],{"id":715,"text":716,"level":31,"children":717},"the-mobile-100vh-problem-and-dvh","The Mobile 100vh Problem and dvh",[],{"id":719,"text":720,"level":31,"children":721},"min-width-and-max-width","min-width and max-width",[],{"id":723,"text":724,"level":31,"children":725},"min-height-and-max-height","min-height and max-height",[],{"id":727,"text":728,"level":31,"children":729},"which-wins-width-min-width-or-max-width","Which Wins: width, min-width or max-width?",[],{"id":731,"text":732,"level":31,"children":733},"intrinsic-sizing-keywords","Intrinsic Sizing Keywords",[],{"id":735,"text":736,"level":31,"children":737},"modern-functions-min-max-and-clamp","Modern Functions: min(), max() and clamp()",[],{"id":739,"text":739,"level":31,"children":740},"aspect-ratio",[],{"id":742,"text":743,"level":31,"children":744},"overflow-what-happens-when-content-is-bigger","Overflow: What Happens When Content Is Bigger?",[],{"id":746,"text":747,"level":31,"children":748},"flexbox-and-grid-the-min-width-0-fix","Flexbox and Grid: The min-width: 0 Fix",[],{"id":750,"text":751,"level":31,"children":752},"logical-sizing-properties","Logical Sizing Properties",[],{"id":754,"text":755,"level":31,"children":756},"readable-line-length-with-ch","Readable Line Length with ch",[],{"id":758,"text":759,"level":31,"children":760},"common-mistakes","Common Mistakes",[],{"id":762,"text":763,"level":31,"children":764},"best-practices","Best Practices",[],{"id":766,"text":767,"level":31,"children":768},"frequently-asked-questions","Frequently Asked Questions",[],{"id":770,"text":771,"level":31,"children":772},"key-takeaways","Key Takeaways",[],[774,778,781,784,787,790,793,796,799,802,805],{"id":775,"language":652,"code":776,"is_editable":777},316,"\u003Cstyle>\n* { box-sizing: border-box; }\n.parent { background: #eaf2f8; padding: 10px; width: 400px; font-family: sans-serif; }\n.auto { background: #aed6f1; padding: 16px; margin: 8px 0; border: 4px solid #2471a3; }\n.full { background: #f5b7b1; padding: 16px; margin: 8px 0; border: 4px solid #c0392b; width: 100%; }\n\u003C\u002Fstyle>\n\u003Cdiv class='parent'>\n  \u003Cdiv class='auto'>width: auto fills the parent\u003C\u002Fdiv>\n  \u003Cdiv class='full'>width: 100% (border-box keeps it inside)\u003C\u002Fdiv>\n\u003C\u002Fdiv>",true,{"id":779,"language":652,"code":780,"is_editable":777},317,"\u003Cstyle>\n* { box-sizing: border-box; }\nbody { margin: 0; font-family: sans-serif; }\n.container { width: 100%; max-width: 600px; margin-inline: auto; padding: 16px; background: #d5f5e3; }\nimg { max-width: 100%; height: auto; }\n\u003C\u002Fstyle>\n\u003Cdiv class='container'>\n  \u003Ch3>Fluid, capped and centered\u003C\u002Fh3>\n  \u003Cp>Resize the preview window. The container shrinks on small screens and stops growing at 600px.\u003C\u002Fp>\n\u003C\u002Fdiv>",{"id":782,"language":652,"code":783,"is_editable":777},318,"\u003Cstyle>\n* { box-sizing: border-box; }\n.box { font-family: sans-serif; padding: 12px; margin: 8px 0; background: #fad7a0; }\n.a { width: 500px; max-width: 300px; }                   \u002F* capped to 300px *\u002F\n.b { width: 100px; min-width: 250px; }                   \u002F* raised to 250px *\u002F\n.c { width: 500px; max-width: 200px; min-width: 350px; } \u002F* min-width wins: 350px *\u002F\n\u003C\u002Fstyle>\n\u003Cdiv class='box a'>width 500, max-width 300 = 300px\u003C\u002Fdiv>\n\u003Cdiv class='box b'>width 100, min-width 250 = 250px\u003C\u002Fdiv>\n\u003Cdiv class='box c'>min-width beats max-width = 350px\u003C\u002Fdiv>",{"id":785,"language":652,"code":786,"is_editable":777},319,"\u003Cstyle>\n* { box-sizing: border-box; }\nbody { font-family: sans-serif; }\n.card { width: 260px; min-height: 120px; padding: 16px; background: #e8daef; margin-bottom: 12px; }\n.scroll { width: 260px; max-height: 100px; overflow: auto; padding: 12px; background: #d6eaf8; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>min-height: short content still gets 120px, and the box grows if the content is longer.\u003C\u002Fdiv>\n\u003Cdiv class='scroll'>max-height with overflow auto: this panel scrolls when the content is longer than 100px. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u003C\u002Fdiv>",{"id":788,"language":652,"code":789,"is_editable":777},320,"\u003Cstyle>\n* { box-sizing: border-box; }\nbody { margin: 0; font-family: sans-serif; }\n.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }\n.page header, .page footer { background: #2c3e50; color: white; padding: 16px; }\n.page main { flex: 1; padding: 16px; background: #ecf0f1; }\n\u003C\u002Fstyle>\n\u003Cdiv class='page'>\n  \u003Cheader>Header\u003C\u002Fheader>\n  \u003Cmain>Main content grows to push the footer to the bottom (sticky footer with min-height and dvh).\u003C\u002Fmain>\n  \u003Cfooter>Footer\u003C\u002Ffooter>\n\u003C\u002Fdiv>",{"id":791,"language":652,"code":792,"is_editable":777},321,"\u003Cstyle>\n* { box-sizing: border-box; }\nbody { font-family: sans-serif; }\n.fit { width: fit-content; margin-inline: auto; padding: 12px 20px; background: #abebc6; margin-bottom: 12px; }\n.min { width: min-content; padding: 12px; background: #f9e79f; margin-bottom: 12px; }\n.max { width: max-content; max-width: 100%; padding: 12px; background: #f5b7b1; }\n\u003C\u002Fstyle>\n\u003Cdiv class='fit'>fit-content and centered\u003C\u002Fdiv>\n\u003Cdiv class='min'>min-content wraps every word\u003C\u002Fdiv>\n\u003Cdiv class='max'>max-content keeps it on one line\u003C\u002Fdiv>",{"id":794,"language":652,"code":795,"is_editable":777},322,"\u003Cstyle>\n* { box-sizing: border-box; }\nbody { font-family: sans-serif; }\n.a { width: min(100%, 420px); padding: 12px; background: #aed6f1; margin-bottom: 10px; }\n.b { width: max(50%, 250px); padding: 12px; background: #f5cba7; margin-bottom: 10px; }\n.c { width: clamp(200px, 50%, 450px); padding: 12px; background: #d2b4de; }\n\u003C\u002Fstyle>\n\u003Cdiv class='a'>min(100%, 420px)\u003C\u002Fdiv>\n\u003Cdiv class='b'>max(50%, 250px)\u003C\u002Fdiv>\n\u003Cdiv class='c'>clamp(200px, 50%, 450px)\u003C\u002Fdiv>",{"id":797,"language":652,"code":798,"is_editable":777},323,"\u003Cstyle>\nbody { font-family: sans-serif; }\n.video { aspect-ratio: 16 \u002F 9; width: 100%; max-width: 400px; background: #34495e; color: white; display: grid; place-items: center; margin-bottom: 12px; }\n.avatar { aspect-ratio: 1 \u002F 1; width: 100px; background: #e67e22; border-radius: 50%; }\n\u003C\u002Fstyle>\n\u003Cdiv class='video'>16 \u002F 9\u003C\u002Fdiv>\n\u003Cdiv class='avatar'>\u003C\u002Fdiv>",{"id":800,"language":652,"code":801,"is_editable":777},324,"\u003Cstyle>\nbody { font-family: Georgia, serif; font-size: 18px; line-height: 1.6; margin: 20px; }\n.readable { max-width: 65ch; }\n\u003C\u002Fstyle>\n\u003Cp class='readable'>With max-width set to 65ch, this paragraph stays at a comfortable reading length of about 65 characters per line on any screen size, which improves readability and accessibility for long articles.\u003C\u002Fp>",{"id":803,"language":652,"code":804,"is_editable":777},325,"\u003Cstyle>\n* { box-sizing: border-box; }\nbody { font-family: sans-serif; }\n.row { display: flex; gap: 10px; width: 320px; background: #eaf2f8; padding: 8px; }\n.avatar { flex: none; width: 40px; height: 40px; background: #3498db; }\n.text { background: #d6eaf8; padding: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\n  \u003Cdiv class='avatar'>\u003C\u002Fdiv>\n  \u003Cdiv class='text'>Averyveryverylongunbrokenfilename_with_no_spaces_document.pdf\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":806,"language":807,"code":808,"is_editable":777},326,"javascript","const el = document.createElement('div');\nel.style.cssText = 'width:500px;max-width:300px;min-width:350px;box-sizing:border-box;';\ndocument.body.appendChild(el);\nconsole.log('Rendered width:', el.getBoundingClientRect().width);\nel.style.minWidth = '0';\nconsole.log('Without min-width:', el.getBoundingClientRect().width);\nel.remove();",[810,817,824],{"id":811,"title":812,"slug":813,"prompt":814,"starter_code":815,"expected_output":816,"language":652,"order_index":9},125,"Build a Fluid Centered Container","build-fluid-centered-container","Make .container fill the width of small screens but never grow wider than 800px, and center it horizontally. Add 1rem of horizontal padding and make sure padding does not increase the total width.","\u003Cstyle>\n\u002F* Add box-sizing reset and container rules here *\u002F\n.container { background: #d5f5e3; font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cdiv class='container'>Fluid, capped and centered container.\u003C\u002Fdiv>","* { box-sizing: border-box; } .container { width: 100%; max-width: 800px; margin-inline: auto; padding-inline: 1rem; }",{"id":818,"title":819,"slug":820,"prompt":821,"starter_code":822,"expected_output":823,"language":652,"order_index":23},126,"Fix the Hero Section Height","fix-hero-section-height","The hero has a fixed height and its text overflows on small screens. Change it so it is at least 60% of the dynamic viewport height but grows with its content. Keep a vh fallback before the dvh declaration.","\u003Cstyle>\n.hero { height: 300px; background: #34495e; color: white; padding: 24px; font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cdiv class='hero'>Long hero text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\u003C\u002Fdiv>",".hero { min-height: 60vh; min-height: 60dvh; }",{"id":825,"title":826,"slug":827,"prompt":828,"starter_code":829,"expected_output":830,"language":807,"order_index":31},127,"Which Width Wins?","which-width-wins","Write a function finalWidth(width, minWidth, maxWidth) that returns the rendered width after applying the CSS rules: first cap at maxWidth, then raise to minWidth (so min-width wins on conflict). Use null for values that are not set.","function finalWidth(width, minWidth, maxWidth) {\n  \u002F\u002F TODO: implement\n}\n\nconsole.log(finalWidth(500, null, 300));\nconsole.log(finalWidth(100, 250, null));\nconsole.log(finalWidth(500, 350, 200));","300\n250\n350","2026-09-30T16:55:40+00:00",{"id":475,"slug":477,"title":476},{"id":483,"slug":485,"title":484}]