[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":646,"topic:cascade-layers-at-layer":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":575,"title":576,"slug":577,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":51,"cornerstone":26,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":750,"quiz":5,"exercises":774,"published_at":5,"updated_at":789,"prev":790,"next":791},"\u003Ch2 id=\"css-cascade-layers-at-layer-control-specificity-wars\">CSS Cascade Layers (@layer): Control Specificity Wars\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS cascade layers.\u003C\u002Fstrong> Cascade layers let you group your styles into named layers and decide which layer wins, no matter how specific the selectors are. They end the endless battle of !important, long selectors and file order. In this lesson you will learn how the cascade works, how to declare layers, how unlayered styles behave, how !important reverses the order, how to tame third party CSS and how to structure a real project.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>CSS @layer, cascade layers tutorial, CSS specificity problems, layer order, unlayered styles, !important in layers, nested layers, revert-layer, @import layer(), CSS architecture, reset base components utilities, Tailwind layers, Bootstrap override, design system layers, CSS cascade order, DevTools layers, avoid !important, specificity wars.\u003C\u002Fp>\u003Ch2 id=\"1-a-quick-look-at-the-cascade\">1. A Quick Look at the Cascade\u003C\u002Fh2>\u003Cp>When two rules target the same property on the same element, the browser picks a winner using these steps, in order:\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>Origin and importance:\u003C\u002Fstrong> transitions, !important user agent, !important user, !important author, animations, normal author, normal user, normal user agent.\u003C\u002Fli>\u003Cli>\u003Cstrong>Context\u003C\u002Fstrong> (for example shadow DOM).\u003C\u002Fli>\u003Cli>\u003Cstrong>Element-attached styles\u003C\u002Fstrong> (inline style attribute).\u003C\u002Fli>\u003Cli>\u003Cstrong>Cascade layers\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Specificity\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Scoping proximity\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Order of appearance\u003C\u002Fstrong>.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Layers sit \u003Cem>before\u003C\u002Fem> specificity. That is the key idea: a low specificity rule in a stronger layer beats a high specificity rule in a weaker layer.\u003C\u002Fp>\u003Ch2 id=\"2-declaring-layers\">2. Declaring Layers\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Statement form:\u003C\u002Fstrong> \u003Ccode>@layer reset, base, components, utilities;\u003C\u002Fcode> declares the layers and their order. The \u003Cstrong>last layer listed wins\u003C\u002Fstrong> for normal declarations.\u003C\u002Fli>\u003Cli>\u003Cstrong>Block form:\u003C\u002Fstrong> \u003Ccode>@layer components { .btn { ... } }\u003C\u002Fcode> adds rules to a layer. You can reopen the same layer many times and the rules are appended.\u003C\u002Fli>\u003Cli>\u003Cstrong>Anonymous layer:\u003C\u002Fstrong> \u003Ccode>@layer { ... }\u003C\u002Fcode> creates a layer with no name that cannot be referenced later.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Best practice: declare the order once at the very top of your main CSS file with a statement, then fill the layers anywhere.\u003C\u002Fp>\u003Ch2 id=\"3-layer-order-beats-specificity\">3. Layer Order Beats Specificity\u003C\u002Fh2>\u003Cp>Imagine \u003Ccode>@layer base, components;\u003C\u002Fcode> with \u003Ccode>#page .btn { color: red }\u003C\u002Fcode> in base and \u003Ccode>.btn { color: blue }\u003C\u002Fcode> in components. The button is blue, because components is a later layer. The id selector does not help. The order in the file does not matter either, only the layer order.\u003C\u002Fp>\u003Ch2 id=\"4-unlayered-styles-win\">4. Unlayered Styles Win\u003C\u002Fh2>\u003Cp>Any CSS outside a layer is treated as a final, implicit layer that comes after all named layers. For normal declarations, \u003Cstrong>unlayered styles beat layered styles\u003C\u002Fstrong>, whatever the specificity. This is useful for quick overrides, but it also means that if you forget to layer some of your own CSS, it can unexpectedly beat your organized layers. Put all of your code in layers for a predictable result.\u003C\u002Fp>\u003Ch2 id=\"5-important-reverses-the-order\">5. !important Reverses the Order\u003C\u002Fh2>\u003Cp>For \u003Ccode>!important\u003C\u002Fcode> declarations the order is reversed: the \u003Cstrong>earliest layer wins\u003C\u002Fstrong>, and important unlayered styles are the weakest of all the important ones. This design lets a base layer or a reset protect critical rules. Use !important inside layers only for that purpose, not as a habit.\u003C\u002Fp>\u003Ch2 id=\"6-nested-layers\">6. Nested Layers\u003C\u002Fh2>\u003Cp>Layers can contain layers: \u003Ccode>@layer framework { @layer base, theme; }\u003C\u002Fcode>. Refer to a child with a dot: \u003Ccode>@layer framework.theme { ... }\u003C\u002Fcode>. Nested layers are ordered inside their parent. This is handy for libraries and design systems.\u003C\u002Fp>\u003Ch2 id=\"7-importing-third-party-css-into-a-layer\">7. Importing Third Party CSS into a Layer\u003C\u002Fh2>\u003Cp>Use \u003Ccode>@import url('bootstrap.css') layer(vendor);\u003C\u002Fcode> to put a whole file in a layer. Because your own layers declared later beat the vendor layer, you can override a library with simple selectors and no !important. \u003Ccode>@import\u003C\u002Fcode> rules must come before other rules, except \u003Ccode>@charset\u003C\u002Fcode> and \u003Ccode>@layer\u003C\u002Fcode> statements, so declare the order first, then import. You can also add a supports condition: \u003Ccode>@import url('x.css') layer(vendor) supports(display: grid);\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"8-revert-layer\">8. revert-layer\u003C\u002Fh2>\u003Cp>The keyword \u003Ccode>revert-layer\u003C\u002Fcode> rolls a property back to the value it would have in a previous layer. For example, \u003Ccode>.card { padding: revert-layer; }\u003C\u002Fcode> in a theme layer removes the theme change and restores the value from the layer before it. It is different from \u003Ccode>revert\u003C\u002Fcode>, which rolls back to the user agent or user origin.\u003C\u002Fp>\u003Ch2 id=\"9-a-practical-project-architecture\">9. A Practical Project Architecture\u003C\u002Fh2>\u003Col>\u003Cli>\u003Ccode>reset\u003C\u002Fcode>: modern reset, box-sizing, margin removal.\u003C\u002Fli>\u003Cli>\u003Ccode>base\u003C\u002Fcode>: typography, element defaults, variables.\u003C\u002Fli>\u003Cli>\u003Ccode>layout\u003C\u002Fcode> or \u003Ccode>objects\u003C\u002Fcode>: container, grid, stack.\u003C\u002Fli>\u003Cli>\u003Ccode>components\u003C\u002Fcode>: buttons, cards, navigation.\u003C\u002Fli>\u003Cli>\u003Ccode>utilities\u003C\u002Fcode>: helper classes such as \u003Ccode>.hidden\u003C\u002Fcode> and \u003Ccode>.text-center\u003C\u002Fcode>, which should always win over components.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>With \u003Ccode>@layer reset, base, layout, components, utilities;\u003C\u002Fcode> a utility class always beats a component without increasing specificity.\u003C\u002Fp>\u003Ch2 id=\"10-frameworks-and-tools\">10. Frameworks and Tools\u003C\u002Fh2>\u003Cp>Modern tools already use layers. Tailwind CSS version 4 builds on native cascade layers, and many design systems publish their CSS inside a layer so that consumers can override it easily. If you use a framework that is not layered, wrap it with \u003Ccode>@import ... layer(vendor)\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"11-debugging-layers\">11. Debugging Layers\u003C\u002Fh2>\u003Cul>\u003Cli>Open DevTools, select the element and check the Styles panel. Browsers show the layer name next to each rule.\u003C\u002Fli>\u003Cli>Look at the computed panel to see which declaration won and which were overridden.\u003C\u002Fli>\u003Cli>If a rule does not apply, first check whether it is in an earlier layer than a competing rule, then check if an unlayered rule overrides it.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"12-browser-support\">12. Browser Support\u003C\u002Fh2>\u003Cp>Cascade layers are supported in all current major browsers since 2022. If you must support very old browsers, rules inside an unknown @layer block are ignored completely, so use a build tool that flattens layers or keep a separate fallback stylesheet.\u003C\u002Fp>\u003Ch2 id=\"13-common-mistakes\">13. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting that unlayered CSS beats all layers.\u003C\u002Fli>\u003Cli>Listing the layers in the wrong order, for example putting utilities before components.\u003C\u002Fli>\u003Cli>Expecting file order to matter across layers.\u003C\u002Fli>\u003Cli>Using !important in a later layer and expecting it to win. Important declarations follow the reverse order.\u003C\u002Fli>\u003Cli>Placing @import after other rules so it is ignored.\u003C\u002Fli>\u003Cli>Creating too many layers. Four to six is enough for most projects.\u003C\u002Fli>\u003Cli>Expecting layers to change inline styles. Inline normal declarations still beat layers.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Cascade layers add a new step in the cascade before specificity. Declare the layer order once, put every rule in a layer, remember that the last layer wins for normal rules and the first wins for !important, keep unlayered CSS for deliberate overrides, and import third party CSS into a low priority layer to override it with simple selectors.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer base, components;\n  @layer base {\n    #page .btn { background: tomato; color: #fff; }\n  }\n  @layer components {\n    .btn { background: #0b5fff; color: #fff; }\n  }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .btn { border: 0; padding: 10px 18px; border-radius: 8px; }\n<\u002Fstyle>\n<div id='page'><button class='btn'>Blue: later layer wins over the id selector<\u002Fbutton><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer reset, base, components, utilities;\n\n  @layer reset {\n    *, *::before, *::after { box-sizing: border-box; }\n    body { margin: 0; }\n  }\n  @layer base {\n    body { font: 18px\u002F1.6 system-ui, sans-serif; padding: 16px; }\n    a { color: #0b5fff; }\n  }\n  @layer components {\n    .card { padding: 16px; border-radius: 12px; background: #f1f5f9; max-width: 340px; }\n  }\n  @layer utilities {\n    .bg-warn { background: #ffe8a3; }\n    .p-0 { padding: 0; }\n  }\n<\u002Fstyle>\n<div class='card'>Normal card<\u002Fdiv>\n<br>\n<div class='card bg-warn'>Utility beats component without !important<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer theme;\n  @layer theme { .note { background: #e9c46a; color: #111; } }\n\n  \u002F* unlayered: beats every layer, even with lower specificity *\u002F\n  .note { background: #2a9d8f; color: #fff; }\n\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .note { padding: 16px; border-radius: 12px; max-width: 360px; }\n<\u002Fstyle>\n<div class='note'>Unlayered rule wins over the layered rule.<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer first, second;\n  @layer first { .box { background: #2a9d8f !important; } }\n  @layer second { .box { background: #e76f51 !important; } }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .box { color: #fff; padding: 16px; max-width: 360px; border-radius: 12px; }\n<\u002Fstyle>\n<div class='box'>With !important the EARLIEST layer wins, so this box is green.<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer framework { @layer base, theme; }\n  @layer framework.base { .panel { padding: 12px; background: #eef2f7; border-radius: 8px; } }\n  @layer framework.theme { .panel { background: #264653; color: #fff; } }\n  @layer framework.theme { .panel.plain { background: revert-layer; color: revert-layer; } }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .panel { max-width: 340px; margin-bottom: 12px; }\n<\u002Fstyle>\n<div class='panel'>Themed panel (framework.theme)<\u002Fdiv>\n<div class='panel plain'>revert-layer goes back to framework.base<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer vendor, project;\n\n  \u002F* pretend this block is a third party library *\u002F\n  @layer vendor {\n    .lib-button.primary.large { background: purple; color: #fff; padding: 14px 28px; border: 0; border-radius: 4px; }\n  }\n\n  \u002F* your override: one class, no !important, no long selector *\u002F\n  @layer project {\n    .lib-button { background: #0b5fff; border-radius: 999px; }\n  }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n<\u002Fstyle>\n<button class='lib-button primary large'>Library button, easily overridden<\u002Fbutton>\n<p>Real usage: @import url('library.css') layer(vendor);<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const cascadeSteps = [\n  'Origin and importance',\n  'Context',\n  'Element-attached styles (inline)',\n  'Cascade layers',\n  'Specificity',\n  'Scoping proximity',\n  'Order of appearance'\n];\n\ncascadeSteps.forEach(function (step, index) {\n  console.log((index + 1) + '. ' + step);\n});\n\nconsole.log('Normal rules: last layer wins, unlayered beats layers.');\nconsole.log('!important rules: first layer wins, order is reversed.');\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":559,"slug":560},{"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\u002Fcascade-layers-at-layer","CSS Cascade Layers (@layer): Order, Specificity and Examples","Learn CSS cascade layers with @layer: layer order, unlayered styles, !important reversal, nested layers, revert-layer, @import layer() and a clean CSS architecture.",[686,694,698,702,706,710,714,718,722,726,730,734,738,742,746],{"id":687,"text":688,"level":23,"children":689},"css-cascade-layers-at-layer-control-specificity-wars","CSS Cascade Layers (@layer): Control Specificity Wars",[690],{"id":691,"text":692,"level":31,"children":693},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",[],{"id":695,"text":696,"level":23,"children":697},"1-a-quick-look-at-the-cascade","1. A Quick Look at the Cascade",[],{"id":699,"text":700,"level":23,"children":701},"2-declaring-layers","2. Declaring Layers",[],{"id":703,"text":704,"level":23,"children":705},"3-layer-order-beats-specificity","3. Layer Order Beats Specificity",[],{"id":707,"text":708,"level":23,"children":709},"4-unlayered-styles-win","4. Unlayered Styles Win",[],{"id":711,"text":712,"level":23,"children":713},"5-important-reverses-the-order","5. !important Reverses the Order",[],{"id":715,"text":716,"level":23,"children":717},"6-nested-layers","6. Nested Layers",[],{"id":719,"text":720,"level":23,"children":721},"7-importing-third-party-css-into-a-layer","7. Importing Third Party CSS into a Layer",[],{"id":723,"text":724,"level":23,"children":725},"8-revert-layer","8. revert-layer",[],{"id":727,"text":728,"level":23,"children":729},"9-a-practical-project-architecture","9. A Practical Project Architecture",[],{"id":731,"text":732,"level":23,"children":733},"10-frameworks-and-tools","10. Frameworks and Tools",[],{"id":735,"text":736,"level":23,"children":737},"11-debugging-layers","11. Debugging Layers",[],{"id":739,"text":740,"level":23,"children":741},"12-browser-support","12. Browser Support",[],{"id":743,"text":744,"level":23,"children":745},"13-common-mistakes","13. Common Mistakes",[],{"id":747,"text":748,"level":23,"children":749},"key-takeaways","Key Takeaways",[],[751,755,758,761,764,767,770],{"id":752,"language":652,"code":753,"is_editable":754},509,"\u003Cstyle>\n  @layer base, components;\n  @layer base {\n    #page .btn { background: tomato; color: #fff; }\n  }\n  @layer components {\n    .btn { background: #0b5fff; color: #fff; }\n  }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .btn { border: 0; padding: 10px 18px; border-radius: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv id='page'>\u003Cbutton class='btn'>Blue: later layer wins over the id selector\u003C\u002Fbutton>\u003C\u002Fdiv>",true,{"id":756,"language":652,"code":757,"is_editable":754},510,"\u003Cstyle>\n  @layer reset, base, components, utilities;\n\n  @layer reset {\n    *, *::before, *::after { box-sizing: border-box; }\n    body { margin: 0; }\n  }\n  @layer base {\n    body { font: 18px\u002F1.6 system-ui, sans-serif; padding: 16px; }\n    a { color: #0b5fff; }\n  }\n  @layer components {\n    .card { padding: 16px; border-radius: 12px; background: #f1f5f9; max-width: 340px; }\n  }\n  @layer utilities {\n    .bg-warn { background: #ffe8a3; }\n    .p-0 { padding: 0; }\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>Normal card\u003C\u002Fdiv>\n\u003Cbr>\n\u003Cdiv class='card bg-warn'>Utility beats component without !important\u003C\u002Fdiv>",{"id":759,"language":652,"code":760,"is_editable":754},511,"\u003Cstyle>\n  @layer theme;\n  @layer theme { .note { background: #e9c46a; color: #111; } }\n\n  \u002F* unlayered: beats every layer, even with lower specificity *\u002F\n  .note { background: #2a9d8f; color: #fff; }\n\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .note { padding: 16px; border-radius: 12px; max-width: 360px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='note'>Unlayered rule wins over the layered rule.\u003C\u002Fdiv>",{"id":762,"language":652,"code":763,"is_editable":754},512,"\u003Cstyle>\n  @layer first, second;\n  @layer first { .box { background: #2a9d8f !important; } }\n  @layer second { .box { background: #e76f51 !important; } }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .box { color: #fff; padding: 16px; max-width: 360px; border-radius: 12px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>With !important the EARLIEST layer wins, so this box is green.\u003C\u002Fdiv>",{"id":765,"language":652,"code":766,"is_editable":754},513,"\u003Cstyle>\n  @layer framework { @layer base, theme; }\n  @layer framework.base { .panel { padding: 12px; background: #eef2f7; border-radius: 8px; } }\n  @layer framework.theme { .panel { background: #264653; color: #fff; } }\n  @layer framework.theme { .panel.plain { background: revert-layer; color: revert-layer; } }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .panel { max-width: 340px; margin-bottom: 12px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='panel'>Themed panel (framework.theme)\u003C\u002Fdiv>\n\u003Cdiv class='panel plain'>revert-layer goes back to framework.base\u003C\u002Fdiv>",{"id":768,"language":652,"code":769,"is_editable":754},514,"\u003Cstyle>\n  @layer vendor, project;\n\n  \u002F* pretend this block is a third party library *\u002F\n  @layer vendor {\n    .lib-button.primary.large { background: purple; color: #fff; padding: 14px 28px; border: 0; border-radius: 4px; }\n  }\n\n  \u002F* your override: one class, no !important, no long selector *\u002F\n  @layer project {\n    .lib-button { background: #0b5fff; border-radius: 999px; }\n  }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n\u003C\u002Fstyle>\n\u003Cbutton class='lib-button primary large'>Library button, easily overridden\u003C\u002Fbutton>\n\u003Cp>Real usage: @import url('library.css') layer(vendor);\u003C\u002Fp>",{"id":771,"language":772,"code":773,"is_editable":754},515,"javascript","const cascadeSteps = [\n  'Origin and importance',\n  'Context',\n  'Element-attached styles (inline)',\n  'Cascade layers',\n  'Specificity',\n  'Scoping proximity',\n  'Order of appearance'\n];\n\ncascadeSteps.forEach(function (step, index) {\n  console.log((index + 1) + '. ' + step);\n});\n\nconsole.log('Normal rules: last layer wins, unlayered beats layers.');\nconsole.log('!important rules: first layer wins, order is reversed.');",[775,782],{"id":776,"title":777,"slug":778,"prompt":779,"starter_code":780,"expected_output":781,"language":652,"order_index":9},187,"Win the Override Without !important","win-override-without-important","The utility class .text-red never works because the component rule has a longer selector. Organize the CSS into layers (components first, utilities last) so that .text-red wins without !important and without changing the selectors.","\u003Cstyle>\n  .card .title { color: #264653; }\n  .text-red { color: crimson; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\u003Ch3 class='title text-red'>Should be red\u003C\u002Fh3>\u003C\u002Fdiv>","A layer order statement such as @layer components, utilities; with the component rule in components and .text-red in utilities, and the title becomes red",{"id":783,"title":784,"slug":785,"prompt":786,"starter_code":787,"expected_output":788,"language":652,"order_index":23},188,"Organize a Stylesheet into Layers","organize-stylesheet-into-layers","Declare the layers reset, base, components and utilities in this order. Move the reset rule, the typography rule, the .btn rule and the .hidden helper into the correct layers.","\u003Cstyle>\n  *, *::before, *::after { box-sizing: border-box; }\n  body { font: 18px\u002F1.6 system-ui, sans-serif; margin: 0; padding: 16px; }\n  .btn { background: #0b5fff; color: #fff; border: 0; padding: 10px 18px; border-radius: 8px; }\n  .hidden { display: none; }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Visible\u003C\u002Fbutton>\n\u003Cbutton class='btn hidden'>Hidden\u003C\u002Fbutton>","A statement @layer reset, base, components, utilities; and each rule placed in the matching @layer block","2026-09-30T18:26:43+00:00",{"id":571,"slug":573,"title":572},{"id":579,"slug":581,"title":580}]