[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":434,"topic:css-cascade-inheritance-important":458},{"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,366,398],{"id":75,"name":342,"slug":343,"order_index":344,"topics":345},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[346,350,354,358,362],{"id":347,"title":348,"slug":349,"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":351,"title":352,"slug":353,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":355,"title":356,"slug":357,"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":359,"title":360,"slug":361,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":363,"title":364,"slug":365,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":87,"name":367,"slug":368,"order_index":344,"topics":369},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[370,374,378,382,386,390,394],{"id":371,"title":372,"slug":373,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":375,"title":376,"slug":377,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":379,"title":380,"slug":381,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":383,"title":384,"slug":385,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":387,"title":388,"slug":389,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":391,"title":392,"slug":393,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":395,"title":396,"slug":397,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":79,"name":399,"slug":400,"order_index":344,"topics":401},"Selectors & the Cascade","selectors-the-cascade",[402,406,410,414,418,422,426,430],{"id":403,"title":404,"slug":405,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":407,"title":408,"slug":409,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":411,"title":412,"slug":413,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":415,"title":416,"slug":417,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":419,"title":420,"slug":421,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":423,"title":424,"slug":425,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":427,"title":428,"slug":429,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":431,"title":432,"slug":433,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":435},[436,439,443,448,453],{"name":335,"slug":336,"description":437,"post_count":23,"subcategories":438},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":440,"description":441,"post_count":23,"subcategories":442},"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":444,"slug":445,"description":446,"post_count":9,"subcategories":447},"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":449,"slug":450,"description":451,"post_count":9,"subcategories":452},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":454,"slug":455,"description":456,"post_count":9,"subcategories":457},"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":459},{"id":431,"title":432,"slug":433,"content":460,"course":461,"subcategory":462,"author":463,"reading_time_minutes":39,"cornerstone":26,"schema_type":469,"faq_json":5,"video_url":5,"canonical_url":470,"meta_title":471,"meta_description":472,"og_image":5,"toc_json":473,"code_examples":534,"quiz":551,"exercises":554,"published_at":5,"updated_at":569,"prev":570,"next":571},"\u003Ch2 id=\"understanding-the-css-cascade\">Understanding the CSS Cascade\u003C\u002Fh2>\u003Cp>The \u003Cstrong>CSS cascade\u003C\u002Fstrong> is the algorithm that resolves conflicts when many declarations apply to the same property on the same element. The \u003Cem>C\u003C\u002Fem> in CSS stands for Cascading, and it is the most important concept to master. Our focus keyword is \u003Cstrong>CSS cascade\u003C\u002Fstrong>, and this lesson also covers highly searched topics: CSS inheritance, CSS !important explained, cascade layers (@layer), inherit vs initial vs unset vs revert, why is my CSS not applying, and CSS @scope proximity.\u003C\u002Fp>\u003Ch2 id=\"the-cascade-order-who-wins\">The Cascade Order: Who Wins?\u003C\u002Fh2>\u003Cp>When two declarations conflict, the browser walks through these criteria in order and stops at the first that produces a winner:\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>Relevance:\u003C\u002Fstrong> only declarations that match the element and are valid are considered.\u003C\u002Fli>\u003Cli>\u003Cstrong>Origin and importance:\u003C\u002Fstrong> transition declarations, then \u003Ccode>!important\u003C\u002Fcode> user-agent, user, author declarations (in reverse order), then normal author, user and user-agent declarations, then animation declarations.\u003C\u002Fli>\u003Cli>\u003Cstrong>Context:\u003C\u002Fstrong> Shadow DOM scoping rules (outer context wins for normal declarations, inner wins for important).\u003C\u002Fli>\u003Cli>\u003Cstrong>Element-attached styles:\u003C\u002Fstrong> inline \u003Ccode>style\u003C\u002Fcode> attributes beat selector rules of the same level.\u003C\u002Fli>\u003Cli>\u003Cstrong>Layers:\u003C\u002Fstrong> the order of \u003Ccode>@layer\u003C\u002Fcode> blocks decides. For normal rules, later layers win and unlayered styles beat all layers. For \u003Ccode>!important\u003C\u002Fcode> the order reverses.\u003C\u002Fli>\u003Cli>\u003Cstrong>Specificity:\u003C\u002Fstrong> the (ID, class, element) score you learned in the previous lesson.\u003C\u002Fli>\u003Cli>\u003Cstrong>Scoping proximity:\u003C\u002Fstrong> with \u003Ccode>@scope\u003C\u002Fcode>, the declaration whose scope root is closest wins.\u003C\u002Fli>\u003Cli>\u003Cstrong>Order of appearance:\u003C\u002Fstrong> the last declaration in source order wins.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"the-three-origins\">The Three Origins\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>User-agent styles:\u003C\u002Fstrong> the browser default stylesheet (blue links, bold headings, margins on \u003Ccode>body\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>\u003Cstrong>User styles:\u003C\u002Fstrong> preferences set by the visitor, such as forced font size or high-contrast themes.\u003C\u002Fli>\u003Cli>\u003Cstrong>Author styles:\u003C\u002Fstrong> your CSS. This is what you write.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Normal declarations: author beats user beats user-agent. For \u003Ccode>!important\u003C\u002Fcode> the order flips, so a user-agent important rule beats an author important rule. This protects accessibility settings.\u003C\u002Fp>\u003Ch2 id=\"cascade-layers-with-at-layer\">Cascade Layers with @layer\u003C\u002Fh2>\u003Cp>\u003Cstrong>Cascade layers\u003C\u002Fstrong> are one of the biggest modern CSS additions. They let you define explicit priority groups so that specificity from a low layer can never beat a rule from a higher layer.\u003C\u002Fp>\u003Cpre>\u003Ccode>@layer reset, base, components, utilities;\n\n@layer reset { * { margin: 0; box-sizing: border-box; } }\n@layer components { .btn { background: royalblue; } }\n@layer utilities { .bg-red { background: crimson; } }\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Layers declared later win. Unlayered CSS beats all layered CSS for normal declarations. Layers are the recommended way to tame third-party CSS such as frameworks: import them into a low layer and keep your own styles above.\u003C\u002Fp>\u003Ch2 id=\"inheritance\">Inheritance\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS inheritance\u003C\u002Fstrong> means some properties pass their computed value from parent to child automatically when no cascade value is applied to the child.\u003C\u002Fp>\u003Ch3 id=\"inherited-by-default\">Inherited by default\u003C\u002Fh3>\u003Cul>\u003Cli>Text related: \u003Ccode>color\u003C\u002Fcode>, \u003Ccode>font-family\u003C\u002Fcode>, \u003Ccode>font-size\u003C\u002Fcode>, \u003Ccode>font-weight\u003C\u002Fcode>, \u003Ccode>line-height\u003C\u002Fcode>, \u003Ccode>text-align\u003C\u002Fcode>, \u003Ccode>letter-spacing\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>visibility\u003C\u002Fcode>, \u003Ccode>cursor\u003C\u002Fcode>, \u003Ccode>list-style\u003C\u002Fcode>, \u003Ccode>direction\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>CSS custom properties (variables), which inherit by default\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"not-inherited-by-default\">Not inherited by default\u003C\u002Fh3>\u003Cul>\u003Cli>Box model: \u003Ccode>margin\u003C\u002Fcode>, \u003Ccode>padding\u003C\u002Fcode>, \u003Ccode>border\u003C\u002Fcode>, \u003Ccode>width\u003C\u002Fcode>, \u003Ccode>height\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>background\u003C\u002Fcode>, \u003Ccode>display\u003C\u002Fcode>, \u003Ccode>position\u003C\u002Fcode>, \u003Ccode>overflow\u003C\u002Fcode>, \u003Ccode>opacity\u003C\u002Fcode>, \u003Ccode>transform\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>This is sensible: if borders inherited, every nested element would get its own border.\u003C\u002Fp>\u003Ch2 id=\"control-keywords-inherit-initial-unset-revert-revert-layer\">Control Keywords: inherit, initial, unset, revert, revert-layer\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Keyword\u003C\u002Fth>\u003Cth>Behavior\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>inherit\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Take the parent's computed value, even for non-inherited properties\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>initial\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Use the property's spec-defined initial value\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>unset\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Acts as \u003Ccode>inherit\u003C\u002Fcode> for inherited properties, otherwise \u003Ccode>initial\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>revert\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Roll back to the previous origin, usually the browser default\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>revert-layer\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Roll back to the previous cascade layer\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>The shorthand \u003Ccode>all: unset\u003C\u002Fcode> or \u003Ccode>all: revert\u003C\u002Fcode> resets every property of an element. It is handy for isolated components.\u003C\u002Fp>\u003Ch2 id=\"the-important-declaration\">The !important Declaration\u003C\u002Fh2>\u003Cp>Adding \u003Ccode>!important\u003C\u002Fcode> to a declaration moves it to a higher-priority tier of the cascade. It even beats inline styles (unless the inline style is also important).\u003C\u002Fp>\u003Cpre>\u003Ccode>.alert { color: red !important; }\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"why-important-is-dangerous\">Why !important is dangerous\u003C\u002Fh3>\u003Cul>\u003Cli>It breaks the natural cascade and makes overrides difficult.\u003C\u002Fli>\u003Cli>It leads to \u003Cstrong>important wars\u003C\u002Fstrong>, where each fix needs another \u003Ccode>!important\u003C\u002Fcode> and higher specificity.\u003C\u002Fli>\u003Cli>It makes CSS hard to maintain and debug.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"legitimate-uses\">Legitimate uses\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Utility classes\u003C\u002Fstrong> such as \u003Ccode>.hidden { display: none !important; }\u003C\u002Fcode> that must always win.\u003C\u002Fli>\u003Cli>Overriding \u003Cstrong>inline styles\u003C\u002Fstrong> injected by third-party scripts you cannot change.\u003C\u002Fli>\u003Cli>\u003Cstrong>Accessibility and user preference\u003C\u002Fstrong> rules, for example forcing minimal motion inside \u003Ccode>@media (prefers-reduced-motion: reduce)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Print stylesheets in specific cases.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"better-alternatives\">Better alternatives\u003C\u002Fh3>\u003Cul>\u003Cli>Reorder rules or reduce specificity of the competing rule.\u003C\u002Fli>\u003Cli>Use \u003Ccode>@layer\u003C\u002Fcode> to give your styles higher priority.\u003C\u002Fli>\u003Cli>Use a slightly more specific selector, or \u003Ccode>:where()\u003C\u002Fcode> on the losing side.\u003C\u002Fli>\u003Cli>Use CSS custom properties to change values rather than fighting selectors.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"debugging-the-cascade\">Debugging the Cascade\u003C\u002Fh2>\u003Col>\u003Cli>Open DevTools and select the element.\u003C\u002Fli>\u003Cli>Look for struck-through declarations in the Styles panel.\u003C\u002Fli>\u003Cli>Check the Computed tab and expand a property to see the winning rule.\u003C\u002Fli>\u003Cli>Check if a layer, media query or inline style is involved.\u003C\u002Fli>\u003Cli>Check for typos or invalid values, since invalid declarations are ignored and the cascade falls back to the previous rule.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Structure CSS with layers: reset, base, layout, components, utilities.\u003C\u002Fli>\u003Cli>Rely on inheritance for typography: set \u003Ccode>font-family\u003C\u002Fcode> and \u003Ccode>color\u003C\u002Fcode> on \u003Ccode>body\u003C\u002Fcode> and let everything inherit.\u003C\u002Fli>\u003Cli>Use custom properties for theming because they inherit naturally.\u003C\u002Fli>\u003Cli>Reserve \u003Ccode>!important\u003C\u002Fcode> for utilities and accessibility.\u003C\u002Fli>\u003Cli>Keep selectors flat and predictable, so the cascade stays easy to reason about.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>The cascade sorts declarations by origin, importance, layers, specificity and order. Inheritance passes some values down the tree, and keywords like \u003Ccode>inherit\u003C\u002Fcode>, \u003Ccode>unset\u003C\u002Fcode> and \u003Ccode>revert\u003C\u002Fcode> give you precise control. Use \u003Ccode>!important\u003C\u002Fcode> sparingly and prefer layers. Explore the live examples below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: Georgia, serif; color: #1e293b; line-height: 1.6; }\n  .parent { border: 2px solid #64748b; padding: 12px; color: purple; }\n  .child { padding: 8px; }\n<\u002Fstyle>\n<div class='parent'>Parent text is purple.\n  <div class='child'>Child inherits color, font and line-height, but not the border.<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .parent { border: 3px dashed tomato; color: teal; padding: 10px; }\n  .child-inherit { border: inherit; }\n  .child-initial { color: initial; }\n  .child-unset { color: unset; border: unset; }\n  .box { margin: 8px 0; padding: 6px; }\n<\u002Fstyle>\n<div class='parent'>Parent\n  <div class='box child-inherit'>border: inherit copies the parent's border<\u002Fdiv>\n  <div class='box child-initial'>color: initial resets to the default (black)<\u002Fdiv>\n  <div class='box child-unset'>unset: color inherits (teal), border resets (none)<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer framework, mine;\n  @layer framework { .btn { background: gray; color: white; padding: 10px 18px; } #app .btn { background: black; } }\n  @layer mine { .btn { background: seagreen; } }\n<\u002Fstyle>\n<div id='app'><button class='btn'>Layer 'mine' wins over the framework ID rule<\u002Fbutton><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  p { color: blue; }\n  .warn { color: orange; }\n  .danger { color: red !important; }\n  #text { color: green; }\n<\u002Fstyle>\n<p id='text' class='warn danger'>Red wins: !important beats the ID selector.<\u002Fp>\n<p id='text' class='warn'>Green: the ID wins over the class.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { --brand: #2563eb; --radius: 8px; }\n  .theme-alt { --brand: #db2777; }\n  .btn { background: var(--brand); color: #fff; padding: 10px 18px; border: 0; border-radius: var(--radius); margin: 6px; }\n  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }\n<\u002Fstyle>\n<div><button class='btn'>Default brand<\u002Fbutton><\u002Fdiv>\n<div class='theme-alt'><button class='btn'>Alt brand (inherited variable)<\u002Fbutton><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":399,"slug":400},{"slug":464,"display_name":465,"job_title":5,"short_bio":5,"expertise_tags":466,"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":467,"posts":468},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-cascade-inheritance-important","CSS Cascade, Inheritance & !important Explained","Learn how the CSS cascade decides winners: origins, layers, specificity, order, inheritance, inherit\u002Finitial\u002Funset and !important.",[474,478,482,486,490,502,506,522,526,530],{"id":475,"text":476,"level":23,"children":477},"understanding-the-css-cascade","Understanding the CSS Cascade",[],{"id":479,"text":480,"level":23,"children":481},"the-cascade-order-who-wins","The Cascade Order: Who Wins?",[],{"id":483,"text":484,"level":23,"children":485},"the-three-origins","The Three Origins",[],{"id":487,"text":488,"level":23,"children":489},"cascade-layers-with-at-layer","Cascade Layers with @layer",[],{"id":491,"text":492,"level":23,"children":493},"inheritance","Inheritance",[494,498],{"id":495,"text":496,"level":31,"children":497},"inherited-by-default","Inherited by default",[],{"id":499,"text":500,"level":31,"children":501},"not-inherited-by-default","Not inherited by default",[],{"id":503,"text":504,"level":23,"children":505},"control-keywords-inherit-initial-unset-revert-revert-layer","Control Keywords: inherit, initial, unset, revert, revert-layer",[],{"id":507,"text":508,"level":23,"children":509},"the-important-declaration","The !important Declaration",[510,514,518],{"id":511,"text":512,"level":31,"children":513},"why-important-is-dangerous","Why !important is dangerous",[],{"id":515,"text":516,"level":31,"children":517},"legitimate-uses","Legitimate uses",[],{"id":519,"text":520,"level":31,"children":521},"better-alternatives","Better alternatives",[],{"id":523,"text":524,"level":23,"children":525},"debugging-the-cascade","Debugging the Cascade",[],{"id":527,"text":528,"level":23,"children":529},"best-practices","Best Practices",[],{"id":531,"text":532,"level":23,"children":533},"summary","Summary",[],[535,539,542,545,548],{"id":536,"language":440,"code":537,"is_editable":538},249,"\u003Cstyle>\n  body { font-family: Georgia, serif; color: #1e293b; line-height: 1.6; }\n  .parent { border: 2px solid #64748b; padding: 12px; color: purple; }\n  .child { padding: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='parent'>Parent text is purple.\n  \u003Cdiv class='child'>Child inherits color, font and line-height, but not the border.\u003C\u002Fdiv>\n\u003C\u002Fdiv>",true,{"id":540,"language":440,"code":541,"is_editable":538},250,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .parent { border: 3px dashed tomato; color: teal; padding: 10px; }\n  .child-inherit { border: inherit; }\n  .child-initial { color: initial; }\n  .child-unset { color: unset; border: unset; }\n  .box { margin: 8px 0; padding: 6px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='parent'>Parent\n  \u003Cdiv class='box child-inherit'>border: inherit copies the parent's border\u003C\u002Fdiv>\n  \u003Cdiv class='box child-initial'>color: initial resets to the default (black)\u003C\u002Fdiv>\n  \u003Cdiv class='box child-unset'>unset: color inherits (teal), border resets (none)\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":543,"language":440,"code":544,"is_editable":538},251,"\u003Cstyle>\n  @layer framework, mine;\n  @layer framework { .btn { background: gray; color: white; padding: 10px 18px; } #app .btn { background: black; } }\n  @layer mine { .btn { background: seagreen; } }\n\u003C\u002Fstyle>\n\u003Cdiv id='app'>\u003Cbutton class='btn'>Layer 'mine' wins over the framework ID rule\u003C\u002Fbutton>\u003C\u002Fdiv>",{"id":546,"language":440,"code":547,"is_editable":538},252,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  p { color: blue; }\n  .warn { color: orange; }\n  .danger { color: red !important; }\n  #text { color: green; }\n\u003C\u002Fstyle>\n\u003Cp id='text' class='warn danger'>Red wins: !important beats the ID selector.\u003C\u002Fp>\n\u003Cp id='text' class='warn'>Green: the ID wins over the class.\u003C\u002Fp>",{"id":549,"language":440,"code":550,"is_editable":538},253,"\u003Cstyle>\n  :root { --brand: #2563eb; --radius: 8px; }\n  .theme-alt { --brand: #db2777; }\n  .btn { background: var(--brand); color: #fff; padding: 10px 18px; border: 0; border-radius: var(--radius); margin: 6px; }\n  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }\n\u003C\u002Fstyle>\n\u003Cdiv>\u003Cbutton class='btn'>Default brand\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class='theme-alt'>\u003Cbutton class='btn'>Alt brand (inherited variable)\u003C\u002Fbutton>\u003C\u002Fdiv>",{"id":171,"slug":552,"title":553,"time_limit_seconds":5,"pass_percentage":303,"question_count":39},"cascade-inheritance-important-quiz","Cascade, Inheritance and !important Quiz",[555,562],{"id":556,"title":557,"slug":558,"prompt":559,"starter_code":560,"expected_output":561,"language":440,"order_index":9},103,"Use Inheritance for Typography","typography-via-inheritance","Without adding rules to individual paragraphs or headings, make all text inside .article use the font Georgia and the color #334155 by setting properties on a single element. Then make the \u003Ch2> ignore the inherited color by using a cascade keyword so it returns to the browser default.","\u003Cstyle>\n  \u002F* Write your CSS here *\u002F\n\u003C\u002Fstyle>\n\u003Cdiv class='article'>\n  \u003Ch2>Heading\u003C\u002Fh2>\n  \u003Cp>First paragraph.\u003C\u002Fp>\n  \u003Cp>Second paragraph.\u003C\u002Fp>\n\u003C\u002Fdiv>","Paragraphs are Georgia and slate-colored. The heading uses the default black color.",{"id":563,"title":564,"slug":565,"prompt":566,"starter_code":567,"expected_output":568,"language":440,"order_index":23},104,"Replace !important with @layer","replace-important-with-layer","The rule for .card-title uses !important to beat a framework rule. Remove !important and use @layer so that your rule still wins and the title is crimson.","\u003Cstyle>\n  #page .card-title { color: navy; }\n  .card-title { color: crimson !important; }\n\u003C\u002Fstyle>\n\u003Cdiv id='page'>\u003Ch3 class='card-title'>Card Title\u003C\u002Fh3>\u003C\u002Fdiv>","The card title is crimson without using !important.","2026-09-29T18:45:14+00:00",{"id":427,"slug":429,"title":428},{"id":371,"slug":373,"title":372}]