[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:css-units":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,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","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":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"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.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"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":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"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",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"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.",[365,394,418,454,486,518,550,582,610,638],{"id":155,"name":366,"slug":367,"order_index":368,"topics":369},"UI Components","ui-components",0,[370,374,378,382,386,390],{"id":371,"title":372,"slug":373,"order_index":281,"cornerstone":52,"reading_time_minutes":69},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":375,"title":376,"slug":377,"order_index":289,"cornerstone":52,"reading_time_minutes":69},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":379,"title":380,"slug":381,"order_index":293,"cornerstone":52,"reading_time_minutes":77},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":383,"title":384,"slug":385,"order_index":297,"cornerstone":52,"reading_time_minutes":69},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":387,"title":388,"slug":389,"order_index":301,"cornerstone":52,"reading_time_minutes":69},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":391,"title":392,"slug":393,"order_index":305,"cornerstone":52,"reading_time_minutes":69},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":101,"name":395,"slug":396,"order_index":368,"topics":397},"CSS Fundamentals & Setup","css-fundamentals-setup",[398,402,406,410,414],{"id":399,"title":400,"slug":401,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":403,"title":404,"slug":405,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":407,"title":408,"slug":409,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":411,"title":412,"slug":413,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":415,"title":416,"slug":417,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":105,"name":419,"slug":420,"order_index":368,"topics":421},"Selectors & the Cascade","selectors-the-cascade",[422,426,430,434,438,442,446,450],{"id":423,"title":424,"slug":425,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":427,"title":428,"slug":429,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":431,"title":432,"slug":433,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":435,"title":436,"slug":437,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":439,"title":440,"slug":441,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":443,"title":444,"slug":445,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":447,"title":448,"slug":449,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":451,"title":452,"slug":453,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":113,"name":455,"slug":456,"order_index":368,"topics":457},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[458,462,466,470,474,478,482],{"id":459,"title":460,"slug":461,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":463,"title":464,"slug":465,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":467,"title":468,"slug":469,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":471,"title":472,"slug":473,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":475,"title":476,"slug":477,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":479,"title":480,"slug":481,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":483,"title":484,"slug":485,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":117,"name":487,"slug":488,"order_index":368,"topics":489},"Box Model & Spacing","box-model-spacing",[490,494,498,502,506,510,514],{"id":491,"title":492,"slug":493,"order_index":145,"cornerstone":52,"reading_time_minutes":77},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":495,"title":496,"slug":497,"order_index":150,"cornerstone":52,"reading_time_minutes":77},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":499,"title":500,"slug":501,"order_index":155,"cornerstone":52,"reading_time_minutes":69},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":503,"title":504,"slug":505,"order_index":137,"cornerstone":52,"reading_time_minutes":85},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":507,"title":508,"slug":509,"order_index":142,"cornerstone":52,"reading_time_minutes":65},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":511,"title":512,"slug":513,"order_index":147,"cornerstone":52,"reading_time_minutes":77},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":515,"title":516,"slug":517,"order_index":152,"cornerstone":52,"reading_time_minutes":77},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":121,"name":519,"slug":520,"order_index":368,"topics":521},"Typography & Text","typography-text",[522,526,530,534,538,542,546],{"id":523,"title":524,"slug":525,"order_index":157,"cornerstone":52,"reading_time_minutes":77},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":527,"title":528,"slug":529,"order_index":161,"cornerstone":52,"reading_time_minutes":77},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":531,"title":532,"slug":533,"order_index":165,"cornerstone":52,"reading_time_minutes":77},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":535,"title":536,"slug":537,"order_index":169,"cornerstone":52,"reading_time_minutes":77},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":539,"title":540,"slug":541,"order_index":173,"cornerstone":52,"reading_time_minutes":81},113,"Styling Links","styling-links-css",{"id":543,"title":544,"slug":545,"order_index":193,"cornerstone":52,"reading_time_minutes":77},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":547,"title":548,"slug":549,"order_index":197,"cornerstone":52,"reading_time_minutes":89},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":125,"name":551,"slug":552,"order_index":368,"topics":553},"Display, Position & Layout Basics","display-position-layout-basics",[554,558,562,566,570,574,578],{"id":555,"title":556,"slug":557,"order_index":201,"cornerstone":52,"reading_time_minutes":77},116,"Display & Inline-block","display-and-inline-block",{"id":559,"title":560,"slug":561,"order_index":205,"cornerstone":52,"reading_time_minutes":69},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":563,"title":564,"slug":565,"order_index":216,"cornerstone":52,"reading_time_minutes":69},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":567,"title":568,"slug":569,"order_index":221,"cornerstone":52,"reading_time_minutes":65},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":571,"title":572,"slug":573,"order_index":226,"cornerstone":52,"reading_time_minutes":69},120,"Centering Techniques","centering-techniques",{"id":575,"title":576,"slug":577,"order_index":231,"cornerstone":52,"reading_time_minutes":77},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":579,"title":580,"slug":581,"order_index":236,"cornerstone":52,"reading_time_minutes":81},122,"Website Layout Basics","website-layout-basics",{"id":140,"name":583,"slug":584,"order_index":368,"topics":585},"The Modern CSS Toolkit","the-modern-css-toolkit",[586,590,594,598,602,606],{"id":587,"title":588,"slug":589,"order_index":241,"cornerstone":52,"reading_time_minutes":81},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":591,"title":592,"slug":593,"order_index":250,"cornerstone":52,"reading_time_minutes":81},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":595,"title":596,"slug":597,"order_index":255,"cornerstone":52,"reading_time_minutes":77},131,"Native CSS Nesting","native-css-nesting",{"id":599,"title":600,"slug":601,"order_index":264,"cornerstone":52,"reading_time_minutes":77},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":603,"title":604,"slug":605,"order_index":269,"cornerstone":52,"reading_time_minutes":85},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":607,"title":608,"slug":609,"order_index":274,"cornerstone":52,"reading_time_minutes":81},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":145,"name":611,"slug":612,"order_index":368,"topics":613},"Responsive Design","responsive-design",[614,618,622,626,630,634],{"id":615,"title":616,"slug":617,"order_index":279,"cornerstone":52,"reading_time_minutes":85},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":619,"title":620,"slug":621,"order_index":213,"cornerstone":52,"reading_time_minutes":81},136,"Media Queries","media-queries",{"id":623,"title":624,"slug":625,"order_index":218,"cornerstone":52,"reading_time_minutes":81},137,"Responsive Images & Video","responsive-images-and-video",{"id":627,"title":628,"slug":629,"order_index":223,"cornerstone":52,"reading_time_minutes":85},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":631,"title":632,"slug":633,"order_index":228,"cornerstone":52,"reading_time_minutes":85},139,"Container Queries","container-queries",{"id":635,"title":636,"slug":637,"order_index":233,"cornerstone":52,"reading_time_minutes":97},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":150,"name":639,"slug":640,"order_index":368,"topics":641},"Transitions & Animation","transitions-animation",[642,646,650,654,658,662,666],{"id":643,"title":644,"slug":645,"order_index":238,"cornerstone":52,"reading_time_minutes":65},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":647,"title":648,"slug":649,"order_index":247,"cornerstone":52,"reading_time_minutes":61},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":651,"title":652,"slug":653,"order_index":252,"cornerstone":52,"reading_time_minutes":65},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":655,"title":656,"slug":657,"order_index":261,"cornerstone":52,"reading_time_minutes":65},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":659,"title":660,"slug":661,"order_index":266,"cornerstone":52,"reading_time_minutes":65},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":663,"title":664,"slug":665,"order_index":271,"cornerstone":52,"reading_time_minutes":65},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":667,"title":668,"slug":669,"order_index":276,"cornerstone":52,"reading_time_minutes":69},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":671},{"id":515,"title":516,"slug":517,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":77,"cornerstone":52,"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":754,"quiz":5,"exercises":778,"published_at":5,"updated_at":797,"prev":798,"next":799},"\u003Ch2 id=\"css-units-px-rem-em-vw-vh-and-dvh-explained\">CSS Units: px, rem, em, %, vw, vh and dvh Explained\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS units\u003C\u002Fstrong> decide how big things are. Choosing between \u003Ccode>px\u003C\u002Fcode>, \u003Ccode>rem\u003C\u002Fcode>, \u003Ccode>em\u003C\u002Fcode>, \u003Ccode>%\u003C\u002Fcode>, \u003Ccode>vw\u003C\u002Fcode> and the newer \u003Ccode>dvh\u003C\u002Fcode> affects responsiveness, accessibility and how your layout behaves on phones. This lesson explains what each unit is relative to, when to use it, and the traps to avoid.\u003C\u002Fp>\u003Ch3 id=\"what-you-will-learn\">What You Will Learn\u003C\u002Fh3>\u003Cul>\u003Cli>Absolute vs relative units\u003C\u002Fli>\u003Cli>What \u003Ccode>rem\u003C\u002Fcode>, \u003Ccode>em\u003C\u002Fcode> and \u003Ccode>%\u003C\u002Fcode> are relative to\u003C\u002Fli>\u003Cli>Viewport units: \u003Ccode>vw\u003C\u002Fcode>, \u003Ccode>vh\u003C\u002Fcode>, \u003Ccode>vmin\u003C\u002Fcode>, \u003Ccode>vmax\u003C\u002Fcode> and the dynamic variants \u003Ccode>svh\u003C\u002Fcode>, \u003Ccode>lvh\u003C\u002Fcode>, \u003Ccode>dvh\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Other useful units: \u003Ccode>ch\u003C\u002Fcode>, \u003Ccode>lh\u003C\u002Fcode>, \u003Ccode>fr\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Fluid sizing with \u003Ccode>clamp()\u003C\u002Fcode>, \u003Ccode>min()\u003C\u002Fcode> and \u003Ccode>max()\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Which unit to choose for font size, spacing, width, height and media queries\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"absolute-units-px\">Absolute Units: px\u003C\u002Fh3>\u003Cp>The \u003Ccode>px\u003C\u002Fcode> unit is a CSS pixel, a fixed reference size that scales with device pixel ratio, not one physical screen dot. Other absolute units such as \u003Ccode>cm\u003C\u002Fcode>, \u003Ccode>mm\u003C\u002Fcode>, \u003Ccode>in\u003C\u002Fcode>, \u003Ccode>pt\u003C\u002Fcode> and \u003Ccode>pc\u003C\u002Fcode> exist but are almost only useful for print stylesheets. On screens, \u003Ccode>px\u003C\u002Fcode> is good for borders, shadows, hairlines and small fixed details.\u003C\u002Fp>\u003Ch3 id=\"rem-relative-to-the-root-font-size\">rem: Relative to the Root Font Size\u003C\u002Fh3>\u003Cp>One \u003Ccode>rem\u003C\u002Fcode> equals the computed \u003Ccode>font-size\u003C\u002Fcode> of the \u003Ccode>html\u003C\u002Fcode> element. Browsers default to 16px, so \u003Ccode>1rem = 16px\u003C\u002Fcode> unless the user or your CSS changes it. Because rem respects the user font-size setting in the browser, it is the best unit for font sizes and global spacing scales. \u003Ccode>1.5rem\u003C\u002Fcode> is 24px by default.\u003C\u002Fp>\u003Ch3 id=\"em-relative-to-the-element-font-size\">em: Relative to the Element Font Size\u003C\u002Fh3>\u003Cp>One \u003Ccode>em\u003C\u002Fcode> equals the font size of the element itself when used for most properties, but when used for \u003Ccode>font-size\u003C\u002Fcode> it is relative to the \u003Cstrong>parent\u003C\u002Fstrong> font size. This makes em powerful for components whose padding should scale with their text, such as a button with \u003Ccode>padding: 0.5em 1em;\u003C\u002Fcode>. It also makes nested \u003Ccode>em\u003C\u002Fcode> font sizes compound: a list inside a list with \u003Ccode>font-size: 0.9em\u003C\u002Fcode> gets smaller at each level.\u003C\u002Fp>\u003Ch3 id=\"rem-vs-em-quick-guide\">rem vs em Quick Guide\u003C\u002Fh3>\u003Cul>\u003Cli>Use \u003Ccode>rem\u003C\u002Fcode> for font sizes, page spacing and media queries. It is predictable.\u003C\u002Fli>\u003Cli>Use \u003Ccode>em\u003C\u002Fcode> for component internals (button padding, icon size next to text) that should scale with the local font size.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"the-625-trick-use-with-care\">The 62.5% Trick: Use with Care\u003C\u002Fh3>\u003Cp>Some developers set \u003Ccode>html { font-size: 62.5%; }\u003C\u002Fcode> so that \u003Ccode>1rem = 10px\u003C\u002Fcode>. It makes mental math easier but it breaks many third-party components and shrinks default text unless you reset the body size. A safer option is to keep the default and use a spacing scale like 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem. Never set the root font size in \u003Ccode>px\u003C\u002Fcode>, because that overrides the user preference.\u003C\u002Fp>\u003Ch3 id=\"percentages-relative-to-what\">Percentages (%): Relative to What?\u003C\u002Fh3>\u003Cp>The meaning of \u003Ccode>%\u003C\u002Fcode> depends on the property:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>width\u003C\u002Fcode>, \u003Ccode>margin\u003C\u002Fcode>, \u003Ccode>padding\u003C\u002Fcode>: percent of the containing block \u003Cstrong>width\u003C\u002Fstrong> (even for vertical margin and padding).\u003C\u002Fli>\u003Cli>\u003Ccode>height\u003C\u002Fcode>: percent of the containing block height, but only if that height is explicitly set. Otherwise it is treated as \u003Ccode>auto\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>font-size\u003C\u002Fcode>: percent of the parent font size.\u003C\u002Fli>\u003Cli>\u003Ccode>top\u003C\u002Fcode>, \u003Ccode>left\u003C\u002Fcode> and similar on positioned elements: percent of the containing block size.\u003C\u002Fli>\u003Cli>\u003Ccode>transform: translate()\u003C\u002Fcode>: percent of the element \u003Cstrong>own\u003C\u002Fstrong> size, which is why \u003Ccode>translate(-50%, -50%)\u003C\u002Fcode> is used to center.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"viewport-units-vw-vh-vmin-vmax\">Viewport Units: vw, vh, vmin, vmax\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>1vw\u003C\u002Fcode> = 1% of the viewport width.\u003C\u002Fli>\u003Cli>\u003Ccode>1vh\u003C\u002Fcode> = 1% of the viewport height.\u003C\u002Fli>\u003Cli>\u003Ccode>1vmin\u003C\u002Fcode> = 1% of the smaller viewport dimension, \u003Ccode>1vmax\u003C\u002Fcode> = 1% of the larger.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>Trap:\u003C\u002Fstrong> \u003Ccode>100vw\u003C\u002Fcode> includes the width of the vertical scrollbar on desktop, so a full-width element with \u003Ccode>width: 100vw\u003C\u002Fcode> creates a horizontal scrollbar. Prefer \u003Ccode>width: 100%\u003C\u002Fcode> for layout and use vw mainly for fluid type and decorative sizing.\u003C\u002Fp>\u003Ch3 id=\"the-mobile-problem-with-100vh\">The Mobile Problem with 100vh\u003C\u002Fh3>\u003Cp>On phones, the browser toolbar slides in and out while scrolling. Classic \u003Ccode>100vh\u003C\u002Fcode> is based on the \u003Cem>largest\u003C\u002Fem> possible viewport (toolbar hidden), so a \u003Ccode>height: 100vh\u003C\u002Fcode> hero can be cut off behind the toolbar on first load. Modern CSS fixes this with three new families:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>svh\u003C\u002Fcode>, \u003Ccode>svw\u003C\u002Fcode>: \u003Cstrong>small\u003C\u002Fstrong> viewport, sized as if the toolbars are visible.\u003C\u002Fli>\u003Cli>\u003Ccode>lvh\u003C\u002Fcode>, \u003Ccode>lvw\u003C\u002Fcode>: \u003Cstrong>large\u003C\u002Fstrong> viewport, sized as if the toolbars are hidden (same as classic vh).\u003C\u002Fli>\u003Cli>\u003Ccode>dvh\u003C\u002Fcode>, \u003Ccode>dvw\u003C\u002Fcode>: \u003Cstrong>dynamic\u003C\u002Fstrong> viewport, which updates as the toolbar shows or hides.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>For full-screen sections use \u003Ccode>min-height: 100svh\u003C\u002Fcode> for a stable layout, or \u003Ccode>100dvh\u003C\u002Fcode> when you want it to track the visible area exactly (it can cause resizing while scrolling). Provide a fallback for older browsers: \u003Ccode>min-height: 100vh; min-height: 100dvh;\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"other-useful-units\">Other Useful Units\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>ch\u003C\u002Fcode>: width of the zero character in the current font. Perfect for readable text columns: \u003Ccode>max-width: 65ch;\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>lh\u003C\u002Fcode>: the computed line height. Handy for vertical rhythm: \u003Ccode>margin-block: 1lh;\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>ex\u003C\u002Fcode>: the x-height of the font (rarely used).\u003C\u002Fli>\u003Cli>\u003Ccode>fr\u003C\u002Fcode>: a fraction of free space, only in CSS Grid, for example \u003Ccode>grid-template-columns: 1fr 2fr;\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Container query units \u003Ccode>cqw\u003C\u002Fcode>, \u003Ccode>cqh\u003C\u002Fcode>, \u003Ccode>cqi\u003C\u002Fcode>, \u003Ccode>cqb\u003C\u002Fcode>: relative to the size of a query container, useful for component-level responsiveness.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"fluid-sizing-with-clamp-min-and-max\">Fluid Sizing with clamp(), min() and max()\u003C\u002Fh3>\u003Cp>Math functions let a value grow with the viewport inside safe limits:\u003C\u002Fp>\u003Cpre>h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem); }\n.container { width: min(100% - 2rem, 70rem); margin-inline: auto; }\u003C\u002Fpre>\u003Cp>Mixing a \u003Ccode>rem\u003C\u002Fcode> term with a \u003Ccode>vw\u003C\u002Fcode> term in the preferred value keeps text zoomable for accessibility. A pure \u003Ccode>vw\u003C\u002Fcode> font size does not respond properly to browser zoom.\u003C\u002Fp>\u003Ch3 id=\"unitless-values\">Unitless Values\u003C\u002Fh3>\u003Cp>A few properties accept unitless numbers: \u003Ccode>line-height: 1.5\u003C\u002Fcode> (multiplier of the element font size, recommended), \u003Ccode>flex-grow\u003C\u002Fcode>, \u003Ccode>opacity\u003C\u002Fcode>, \u003Ccode>z-index\u003C\u002Fcode> and \u003Ccode>0\u003C\u002Fcode> for lengths (\u003Ccode>margin: 0\u003C\u002Fcode> needs no unit).\u003C\u002Fp>\u003Ch3 id=\"choosing-the-right-unit\">Choosing the Right Unit\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Font size:\u003C\u002Fstrong> \u003Ccode>rem\u003C\u002Fcode>, or \u003Ccode>clamp()\u003C\u002Fcode> with rem and vw.\u003C\u002Fli>\u003Cli>\u003Cstrong>Padding and margin:\u003C\u002Fstrong> \u003Ccode>rem\u003C\u002Fcode> for layout spacing, \u003Ccode>em\u003C\u002Fcode> for component internals.\u003C\u002Fli>\u003Cli>\u003Cstrong>Borders, shadows, hairlines:\u003C\u002Fstrong> \u003Ccode>px\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Width of layout blocks:\u003C\u002Fstrong> \u003Ccode>%\u003C\u002Fcode>, \u003Ccode>fr\u003C\u002Fcode>, \u003Ccode>min()\u003C\u002Fcode>, or \u003Ccode>max-width\u003C\u002Fcode> in \u003Ccode>ch\u003C\u002Fcode> or \u003Ccode>rem\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Full-screen sections:\u003C\u002Fstrong> \u003Ccode>svh\u003C\u002Fcode>, \u003Ccode>dvh\u003C\u002Fcode> with a \u003Ccode>vh\u003C\u002Fcode> fallback.\u003C\u002Fli>\u003Cli>\u003Cstrong>Media queries:\u003C\u002Fstrong> \u003Ccode>em\u003C\u002Fcode> or \u003Ccode>rem\u003C\u002Fcode>, so breakpoints respect user font size.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh3>\u003Cul>\u003Cli>Setting \u003Ccode>html { font-size: 16px; }\u003C\u002Fcode> in px and blocking user scaling.\u003C\u002Fli>\u003Cli>Using \u003Ccode>100vw\u003C\u002Fcode> for full width and getting a horizontal scrollbar.\u003C\u002Fli>\u003Cli>Using \u003Ccode>100vh\u003C\u002Fcode> on mobile and losing content behind the browser toolbar.\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>height: 50%\u003C\u002Fcode> to work when the parent has no explicit height.\u003C\u002Fli>\u003Cli>Nesting \u003Ccode>em\u003C\u002Fcode> font sizes and ending up with tiny or huge text.\u003C\u002Fli>\u003Cli>Using pure \u003Ccode>vw\u003C\u002Fcode> for text, which breaks zoom.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"frequently-asked-questions\">Frequently Asked Questions\u003C\u002Fh3>\u003Ch4 id=\"should-i-use-px-or-rem\">Should I use px or rem?\u003C\u002Fh4>\u003Cp>Use \u003Ccode>rem\u003C\u002Fcode> for text and spacing so the page respects user settings, and \u003Ccode>px\u003C\u002Fcode> for thin details like borders.\u003C\u002Fp>\u003Ch4 id=\"what-is-the-difference-between-em-and-rem\">What is the difference between em and rem?\u003C\u002Fh4>\u003Cp>\u003Ccode>rem\u003C\u002Fcode> is always relative to the root font size. \u003Ccode>em\u003C\u002Fcode> is relative to the current element (or parent for font-size) and can compound when nested.\u003C\u002Fp>\u003Ch4 id=\"what-is-dvh-in-css\">What is dvh in CSS?\u003C\u002Fh4>\u003Cp>It is the dynamic viewport height, which adjusts as mobile browser toolbars appear and disappear.\u003C\u002Fp>\u003Ch4 id=\"why-does-my-percentage-height-not-work\">Why does my percentage height not work?\u003C\u002Fh4>\u003Cp>Because the parent has no explicit height. Set a height on the parent (or all ancestors up to html), or use Flexbox or Grid instead.\u003C\u002Fp>\u003Ch3 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>px\u003C\u002Fcode> is fixed, \u003Ccode>rem\u003C\u002Fcode> follows the root, \u003Ccode>em\u003C\u002Fcode> follows the element, \u003Ccode>%\u003C\u002Fcode> follows the containing block.\u003C\u002Fli>\u003Cli>Viewport units are \u003Ccode>vw\u003C\u002Fcode>, \u003Ccode>vh\u003C\u002Fcode>, \u003Ccode>vmin\u003C\u002Fcode>, \u003Ccode>vmax\u003C\u002Fcode>. On mobile prefer \u003Ccode>svh\u003C\u002Fcode> or \u003Ccode>dvh\u003C\u002Fcode> over \u003Ccode>vh\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Avoid \u003Ccode>100vw\u003C\u002Fcode> for layout width.\u003C\u002Fli>\u003Cli>Use \u003Ccode>ch\u003C\u002Fcode> for readable line length and \u003Ccode>clamp()\u003C\u002Fcode> for fluid typography.\u003C\u002Fli>\u003Cli>Keep the root font size in relative units for accessibility.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.px  { font-size: 16px; }\n.rem { font-size: 1.5rem; }\n.em-parent { font-size: 20px; }\n.em-child { font-size: 1.5em; } \u002F* 1.5 x 20px = 30px *\u002F\n<\u002Fstyle>\n<p class='px'>16px text<\u002Fp>\n<p class='rem'>1.5rem text (24px by default)<\u002Fp>\n<div class='em-parent'>Parent 20px <span class='em-child'>child 1.5em = 30px<\u002Fspan><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.btn { font-size: 1rem; padding: 0.5em 1em; border: 0; background: #2980b9; color: #fff; border-radius: 0.3em; margin-right: 10px; }\n.btn.big { font-size: 1.6rem; }\n<\u002Fstyle>\n<button class='btn'>Small<\u002Fbutton>\n<button class='btn big'>Big (padding scales with em)<\u002Fbutton>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.list { font-size: 1rem; }\n.list ul { font-size: 0.8em; } \u002F* compounds at each nesting level *\u002F\n<\u002Fstyle>\n<ul class='list'>\n  <li>Level 1\n    <ul><li>Level 2\n      <ul><li>Level 3 is already about 0.64 of the original<\u002Fli><\u002Ful>\n    <\u002Fli><\u002Ful>\n  <\u002Fli>\n<\u002Ful>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.parent { width: 400px; padding: 10px; background: #eee; }\n.child { width: 50%; padding: 10%; background: #aed6f1; margin-bottom: 10px; }\n.nohi { height: 50%; background: #f5b7b1; }\n<\u002Fstyle>\n<div class='parent'>\n  <div class='child'>width 50% and padding 10% both use the parent width<\u002Fdiv>\n  <div class='nohi'>height: 50% is ignored because the parent has no set height<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.hero { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; background: linear-gradient(135deg, #8e44ad, #3498db); color: #fff; font-family: sans-serif; }\n.full-dynamic { height: 100dvh; }\n<\u002Fstyle>\n<section class='hero'>Full-screen hero: vh fallback, svh for small mobile viewports<\u002Fsection>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>h1 {\n  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);\n}\n.container {\n  width: min(100% - 2rem, 70rem);\n  margin-inline: auto;\n}\n.prose {\n  max-width: 65ch;\n  line-height: 1.6;\n}\n.grid {\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  gap: 1rem;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const html = document.documentElement;\nconst rootPx = parseFloat(getComputedStyle(html).fontSize);\nconsole.log('1rem in px:', rootPx);\nconsole.log('viewport width (px):', window.innerWidth);\nconsole.log('1vw in px:', window.innerWidth \u002F 100);\nconsole.log('1vh in px:', window.innerHeight \u002F 100);\nconsole.log('scrollbar width:', window.innerWidth - document.documentElement.clientWidth);\n\nfunction remToPx(rem) { return rem * rootPx; }\nfunction pxToRem(px) { return px \u002F rootPx; }\nconsole.log(remToPx(1.5), pxToRem(24));\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":487,"slug":488},{"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-units","CSS Units Explained: px, rem, em, %, vw, vh, dvh with Examples","Master CSS units: px vs rem vs em, percentages, viewport units vw\u002Fvh, dynamic dvh and svh for mobile, ch, clamp() and how to choose the right unit.",[686],{"id":687,"text":688,"level":12,"children":689},"css-units-px-rem-em-vw-vh-and-dvh-explained","CSS Units: px, rem, em, %, vw, vh and dvh Explained",[690,694,698,702,706,710,714,718,722,726,730,734,738,742,746,750],{"id":691,"text":692,"level":57,"children":693},"what-you-will-learn","What You Will Learn",[],{"id":695,"text":696,"level":57,"children":697},"absolute-units-px","Absolute Units: px",[],{"id":699,"text":700,"level":57,"children":701},"rem-relative-to-the-root-font-size","rem: Relative to the Root Font Size",[],{"id":703,"text":704,"level":57,"children":705},"em-relative-to-the-element-font-size","em: Relative to the Element Font Size",[],{"id":707,"text":708,"level":57,"children":709},"rem-vs-em-quick-guide","rem vs em Quick Guide",[],{"id":711,"text":712,"level":57,"children":713},"the-625-trick-use-with-care","The 62.5% Trick: Use with Care",[],{"id":715,"text":716,"level":57,"children":717},"percentages-relative-to-what","Percentages (%): Relative to What?",[],{"id":719,"text":720,"level":57,"children":721},"viewport-units-vw-vh-vmin-vmax","Viewport Units: vw, vh, vmin, vmax",[],{"id":723,"text":724,"level":57,"children":725},"the-mobile-problem-with-100vh","The Mobile Problem with 100vh",[],{"id":727,"text":728,"level":57,"children":729},"other-useful-units","Other Useful Units",[],{"id":731,"text":732,"level":57,"children":733},"fluid-sizing-with-clamp-min-and-max","Fluid Sizing with clamp(), min() and max()",[],{"id":735,"text":736,"level":57,"children":737},"unitless-values","Unitless Values",[],{"id":739,"text":740,"level":57,"children":741},"choosing-the-right-unit","Choosing the Right Unit",[],{"id":743,"text":744,"level":57,"children":745},"common-mistakes","Common Mistakes",[],{"id":747,"text":748,"level":57,"children":749},"frequently-asked-questions","Frequently Asked Questions",[],{"id":751,"text":752,"level":57,"children":753},"key-takeaways","Key Takeaways",[],[755,759,762,765,768,771,774],{"id":756,"language":16,"code":757,"is_editable":758},340,"\u003Cstyle>\n.px  { font-size: 16px; }\n.rem { font-size: 1.5rem; }\n.em-parent { font-size: 20px; }\n.em-child { font-size: 1.5em; } \u002F* 1.5 x 20px = 30px *\u002F\n\u003C\u002Fstyle>\n\u003Cp class='px'>16px text\u003C\u002Fp>\n\u003Cp class='rem'>1.5rem text (24px by default)\u003C\u002Fp>\n\u003Cdiv class='em-parent'>Parent 20px \u003Cspan class='em-child'>child 1.5em = 30px\u003C\u002Fspan>\u003C\u002Fdiv>",true,{"id":760,"language":16,"code":761,"is_editable":758},341,"\u003Cstyle>\n.btn { font-size: 1rem; padding: 0.5em 1em; border: 0; background: #2980b9; color: #fff; border-radius: 0.3em; margin-right: 10px; }\n.btn.big { font-size: 1.6rem; }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Small\u003C\u002Fbutton>\n\u003Cbutton class='btn big'>Big (padding scales with em)\u003C\u002Fbutton>",{"id":763,"language":16,"code":764,"is_editable":758},342,"\u003Cstyle>\n.list { font-size: 1rem; }\n.list ul { font-size: 0.8em; } \u002F* compounds at each nesting level *\u002F\n\u003C\u002Fstyle>\n\u003Cul class='list'>\n  \u003Cli>Level 1\n    \u003Cul>\u003Cli>Level 2\n      \u003Cul>\u003Cli>Level 3 is already about 0.64 of the original\u003C\u002Fli>\u003C\u002Ful>\n    \u003C\u002Fli>\u003C\u002Ful>\n  \u003C\u002Fli>\n\u003C\u002Ful>",{"id":766,"language":16,"code":767,"is_editable":758},343,"\u003Cstyle>\n.parent { width: 400px; padding: 10px; background: #eee; }\n.child { width: 50%; padding: 10%; background: #aed6f1; margin-bottom: 10px; }\n.nohi { height: 50%; background: #f5b7b1; }\n\u003C\u002Fstyle>\n\u003Cdiv class='parent'>\n  \u003Cdiv class='child'>width 50% and padding 10% both use the parent width\u003C\u002Fdiv>\n  \u003Cdiv class='nohi'>height: 50% is ignored because the parent has no set height\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":769,"language":16,"code":770,"is_editable":758},344,"\u003Cstyle>\n.hero { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; background: linear-gradient(135deg, #8e44ad, #3498db); color: #fff; font-family: sans-serif; }\n.full-dynamic { height: 100dvh; }\n\u003C\u002Fstyle>\n\u003Csection class='hero'>Full-screen hero: vh fallback, svh for small mobile viewports\u003C\u002Fsection>",{"id":772,"language":10,"code":773,"is_editable":758},345,"h1 {\n  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);\n}\n.container {\n  width: min(100% - 2rem, 70rem);\n  margin-inline: auto;\n}\n.prose {\n  max-width: 65ch;\n  line-height: 1.6;\n}\n.grid {\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  gap: 1rem;\n}",{"id":775,"language":776,"code":777,"is_editable":758},346,"javascript","const html = document.documentElement;\nconst rootPx = parseFloat(getComputedStyle(html).fontSize);\nconsole.log('1rem in px:', rootPx);\nconsole.log('viewport width (px):', window.innerWidth);\nconsole.log('1vw in px:', window.innerWidth \u002F 100);\nconsole.log('1vh in px:', window.innerHeight \u002F 100);\nconsole.log('scrollbar width:', window.innerWidth - document.documentElement.clientWidth);\n\nfunction remToPx(rem) { return rem * rootPx; }\nfunction pxToRem(px) { return px \u002F rootPx; }\nconsole.log(remToPx(1.5), pxToRem(24));",[779,785,791],{"id":603,"title":780,"slug":781,"prompt":782,"starter_code":783,"expected_output":784,"language":776,"order_index":23},"Convert Units","convert-units","Write two functions, pxToRem(px, base) and remToPx(rem, base), where base is the root font size in px (default 16). Round the rem result to 3 decimals.","function pxToRem(px, base = 16) {\n  \u002F\u002F TODO\n}\nfunction remToPx(rem, base = 16) {\n  \u002F\u002F TODO\n}\n\nconsole.log(pxToRem(24));\nconsole.log(pxToRem(10, 10));\nconsole.log(remToPx(1.5));","1.5\n1\n24",{"id":607,"title":786,"slug":787,"prompt":788,"starter_code":789,"expected_output":790,"language":16,"order_index":12},"Fluid Heading and Readable Text","fluid-heading-readable-text","Make the h1 fluid with clamp() (minimum 1.75rem, maximum 3.5rem, preferred value using rem plus vw) and limit the paragraph to a comfortable reading width of 60 characters using the ch unit. Do not use media queries.","\u003Cstyle>\nh1 { \u002F* your CSS here *\u002F }\np { \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Ch1>Responsive Heading\u003C\u002Fh1>\n\u003Cp>This paragraph should never become wider than about sixty characters, so the lines stay easy to read on large screens.\u003C\u002Fp>","The heading scales smoothly between 1.75rem and 3.5rem and the paragraph is at most 60ch wide.",{"id":615,"title":792,"slug":793,"prompt":794,"starter_code":795,"expected_output":796,"language":16,"order_index":57},"Full-Screen Section on Mobile","full-screen-section-mobile","Make the .hero at least the full visible screen height. Use the classic vh unit first as a fallback and then the small viewport unit svh, so it works on old browsers and does not hide behind mobile toolbars.","\u003Cstyle>\n.hero { display: grid; place-items: center; background: #2c3e50; color: #fff; \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Csection class='hero'>Full screen hero\u003C\u002Fsection>","The hero uses min-height: 100vh followed by min-height: 100svh.","2026-09-30T17:00:51+00:00",{"id":511,"slug":513,"title":512},{"id":523,"slug":525,"title":524}]