[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":434,"topic:css-syntax-how-browsers-apply-styles":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":351,"title":352,"slug":353,"content":460,"course":461,"subcategory":462,"author":463,"reading_time_minutes":35,"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":518,"quiz":5,"exercises":535,"published_at":5,"updated_at":548,"prev":549,"next":550},"\u003Ch2 id=\"css-syntax-the-anatomy-of-a-css-rule\">CSS Syntax: The Anatomy of a CSS Rule\u003C\u002Fh2>\u003Cp>Every stylesheet is a list of \u003Cstrong>rules\u003C\u002Fstrong>. Understanding \u003Cstrong>CSS syntax\u003C\u002Fstrong> is the single most important step in learning CSS, because every property, selector and feature builds on it.\u003C\u002Fp>\u003Cp>A CSS rule has two parts: a \u003Cstrong>selector\u003C\u002Fstrong> and a \u003Cstrong>declaration block\u003C\u002Fstrong>.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Selector\u003C\u002Fstrong> - chooses which HTML elements to style (for example h1, .card, #header).\u003C\u002Fli>\u003Cli>\u003Cstrong>Declaration block\u003C\u002Fstrong> - curly braces containing one or more declarations.\u003C\u002Fli>\u003Cli>\u003Cstrong>Declaration\u003C\u002Fstrong> - a property and value pair ending with a semicolon.\u003C\u002Fli>\u003Cli>\u003Cstrong>Property\u003C\u002Fstrong> - the aspect you want to change (color, margin, font-size).\u003C\u002Fli>\u003Cli>\u003Cstrong>Value\u003C\u002Fstrong> - the setting you want (red, 20px, bold).\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"syntax-rules-to-remember\">Syntax Rules to Remember\u003C\u002Fh2>\u003Cul>\u003Cli>Property and value are separated by a colon.\u003C\u002Fli>\u003Cli>Each declaration ends with a semicolon. The last one is optional, but always add it.\u003C\u002Fli>\u003Cli>Whitespace and line breaks are ignored, so you can format freely.\u003C\u002Fli>\u003Cli>Property names are case-insensitive, but the convention is lowercase kebab-case (background-color).\u003C\u002Fli>\u003Cli>An invalid declaration is ignored by the browser and does not break the rest of the file.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"types-of-basic-selectors\">Types of Basic Selectors\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Selector\u003C\u002Fth>\u003Cth>Example\u003C\u002Fth>\u003Cth>Targets\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Type (element)\u003C\u002Ftd>\u003Ctd>p\u003C\u002Ftd>\u003Ctd>All p elements\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Class\u003C\u002Ftd>\u003Ctd>.card\u003C\u002Ftd>\u003Ctd>Elements with class card\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>ID\u003C\u002Ftd>\u003Ctd>#header\u003C\u002Ftd>\u003Ctd>The element with id header\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Universal\u003C\u002Ftd>\u003Ctd>*\u003C\u002Ftd>\u003Ctd>Every element\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Group\u003C\u002Ftd>\u003Ctd>h1, h2, h3\u003C\u002Ftd>\u003Ctd>Several selectors sharing one rule\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Descendant\u003C\u002Ftd>\u003Ctd>nav a\u003C\u002Ftd>\u003Ctd>Links inside nav\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Attribute\u003C\u002Ftd>\u003Ctd>input[type='email']\u003C\u002Ftd>\u003Ctd>Elements with a matching attribute\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Pseudo-class\u003C\u002Ftd>\u003Ctd>a:hover\u003C\u002Ftd>\u003Ctd>An element in a state\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"at-rules\">At-Rules\u003C\u002Fh2>\u003Cp>Rules that begin with @ give the browser special instructions, for example @media (responsive design), @import, @font-face, @keyframes (animations), @layer (cascade layers) and @container (container queries).\u003C\u002Fp>\u003Ch2 id=\"how-browsers-apply-styles-the-rendering-pipeline\">How Browsers Apply Styles: The Rendering Pipeline\u003C\u002Fh2>\u003Col>\u003Cli>\u003Cstrong>Parse HTML\u003C\u002Fstrong> - the browser reads your HTML and builds the \u003Cstrong>DOM\u003C\u002Fstrong> (Document Object Model).\u003C\u002Fli>\u003Cli>\u003Cstrong>Parse CSS\u003C\u002Fstrong> - it reads all stylesheets and builds the \u003Cstrong>CSSOM\u003C\u002Fstrong> (CSS Object Model).\u003C\u002Fli>\u003Cli>\u003Cstrong>Style calculation\u003C\u002Fstrong> - it matches selectors to DOM nodes and computes the final value for every property (the render tree).\u003C\u002Fli>\u003Cli>\u003Cstrong>Layout\u003C\u002Fstrong> - it calculates size and position of every box.\u003C\u002Fli>\u003Cli>\u003Cstrong>Paint\u003C\u002Fstrong> - it draws pixels: colors, text, borders, shadows.\u003C\u002Fli>\u003Cli>\u003Cstrong>Composite\u003C\u002Fstrong> - layers are combined on the GPU and displayed.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Because CSS blocks rendering (the browser will not paint until it has the CSS), keep stylesheets small and load them in the head.\u003C\u002Fp>\u003Ch2 id=\"the-cascade-who-wins-when-rules-conflict\">The Cascade: Who Wins When Rules Conflict?\u003C\u002Fh2>\u003Cp>When more than one rule targets the same property of the same element, the browser resolves the conflict in this order:\u003C\u002Fp>\u003Col>\u003Cli>\u003Cstrong>Importance and origin\u003C\u002Fstrong> - !important declarations and user\u002Fbrowser\u002Fauthor style origins.\u003C\u002Fli>\u003Cli>\u003Cstrong>Cascade layers\u003C\u002Fstrong> - rules in later declared layers win over earlier ones (for normal declarations).\u003C\u002Fli>\u003Cli>\u003Cstrong>Specificity\u003C\u002Fstrong> - the more specific selector wins.\u003C\u002Fli>\u003Cli>\u003Cstrong>Source order\u003C\u002Fstrong> - if everything is equal, the last rule wins.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"specificity-explained\">Specificity Explained\u003C\u002Fh2>\u003Cp>Specificity is a score made of three columns (ID, Class, Element), compared left to right.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Selector\u003C\u002Fth>\u003Cth>Score (ID, Class, Element)\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>p\u003C\u002Ftd>\u003Ctd>0,0,1\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>.note\u003C\u002Ftd>\u003Ctd>0,1,0\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>p.note\u003C\u002Ftd>\u003Ctd>0,1,1\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>#intro\u003C\u002Ftd>\u003Ctd>1,0,0\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>#intro p.note\u003C\u002Ftd>\u003Ctd>1,1,1\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>Inline styles beat all normal selectors, and !important beats inline styles, so avoid !important except in rare, deliberate cases. The :where() pseudo-class has zero specificity and is a modern tool for writing easy-to-override defaults.\u003C\u002Fp>\u003Ch2 id=\"inheritance\">Inheritance\u003C\u002Fh2>\u003Cp>Some properties, mostly text-related ones such as color, font-family, font-size and line-height, are passed from parent to child automatically. Others, such as margin, border and padding, are not inherited. You can control this with the keywords \u003Ccode>inherit\u003C\u002Fcode>, \u003Ccode>initial\u003C\u002Fcode>, \u003Ccode>unset\u003C\u002Fcode> and \u003Ccode>revert\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"default-browser-styles-user-agent-stylesheet\">Default Browser Styles (User Agent Stylesheet)\u003C\u002Fh2>\u003Cp>Every browser ships with a built-in stylesheet, which is why an unstyled h1 is big and bold and links are blue and underlined. Your CSS overrides it. Many developers use a small CSS reset (for example box-sizing: border-box) to start from a consistent base.\u003C\u002Fp>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting a semicolon, which breaks the next declaration.\u003C\u002Fli>\u003Cli>Missing closing braces, which can cause the following rule to be ignored.\u003C\u002Fli>\u003Cli>Using a dot or hash incorrectly (.class vs #id).\u003C\u002Fli>\u003Cli>Fighting specificity with !important instead of fixing selector structure.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>A rule = selector + declaration block of property: value pairs.\u003C\u002Fli>\u003Cli>Browsers build the DOM and CSSOM, then layout, paint and composite.\u003C\u002Fli>\u003Cli>The cascade uses importance, layers, specificity and source order.\u003C\u002Fli>\u003Cli>Inheritance passes some properties from parent to child.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* selector { property: value; } *\u002F\nh1 {\n  color: #e74c3c;\n  font-size: 36px;\n  text-align: center;\n}\n\n\u002F* Group selector *\u002F\nh2, h3 {\n  font-family: Georgia, serif;\n}\n\n\u002F* Class and ID selectors *\u002F\n.highlight { background: yellow; }\n#main-title { letter-spacing: 2px; }\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  p { color: gray; }              \u002F* 0,0,1 *\u002F\n  .note { color: blue; }          \u002F* 0,1,0 *\u002F\n  p.note { color: green; }        \u002F* 0,1,1 *\u002F\n  #special { color: crimson; }    \u002F* 1,0,0 *\u002F\n<\u002Fstyle>\n<p>Plain paragraph (gray)<\u002Fp>\n<p class='note'>Class paragraph (green)<\u002Fp>\n<p class='note' id='special'>ID wins (crimson)<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .box { color: white; background: #34495e; padding: 20px; font-family: Verdana, sans-serif; }\n  .box p { border: 2px dashed orange; margin: 10px 0; }\n<\u002Fstyle>\n<div class='box'>\n  <p>Color and font-family are inherited from .box, but the dashed border is not.<\u002Fp>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  p { color: red; }\n  p { color: blue; }   \u002F* same specificity: the last rule wins *\u002F\n<\u002Fstyle>\n<p>Am I red or blue? Source order decides.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @media (max-width: 600px) {\n    body { background: lightyellow; }\n  }\n  @media (prefers-color-scheme: dark) {\n    body { background: #111; color: #eee; }\n  }\n<\u002Fstyle>\n<h2>At-rules in action<\u002Fh2>\n<p>Resize the window or switch your system to dark mode to see the media queries apply.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":342,"slug":343},{"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-syntax-how-browsers-apply-styles","CSS Syntax Explained: Selectors, Properties & the Cascade","Understand CSS syntax: selectors, declarations, properties, values, the cascade, specificity, inheritance and how browsers render styles.",[474,478,482,486,490,494,498,502,506,510,514],{"id":475,"text":476,"level":23,"children":477},"css-syntax-the-anatomy-of-a-css-rule","CSS Syntax: The Anatomy of a CSS Rule",[],{"id":479,"text":480,"level":23,"children":481},"syntax-rules-to-remember","Syntax Rules to Remember",[],{"id":483,"text":484,"level":23,"children":485},"types-of-basic-selectors","Types of Basic Selectors",[],{"id":487,"text":488,"level":23,"children":489},"at-rules","At-Rules",[],{"id":491,"text":492,"level":23,"children":493},"how-browsers-apply-styles-the-rendering-pipeline","How Browsers Apply Styles: The Rendering Pipeline",[],{"id":495,"text":496,"level":23,"children":497},"the-cascade-who-wins-when-rules-conflict","The Cascade: Who Wins When Rules Conflict?",[],{"id":499,"text":500,"level":23,"children":501},"specificity-explained","Specificity Explained",[],{"id":503,"text":504,"level":23,"children":505},"inheritance","Inheritance",[],{"id":507,"text":508,"level":23,"children":509},"default-browser-styles-user-agent-stylesheet","Default Browser Styles (User Agent Stylesheet)",[],{"id":511,"text":512,"level":23,"children":513},"common-mistakes","Common Mistakes",[],{"id":515,"text":516,"level":23,"children":517},"key-takeaways","Key Takeaways",[],[519,523,526,529,532],{"id":520,"language":336,"code":521,"is_editable":522},190,"\u002F* selector { property: value; } *\u002F\nh1 {\n  color: #e74c3c;\n  font-size: 36px;\n  text-align: center;\n}\n\n\u002F* Group selector *\u002F\nh2, h3 {\n  font-family: Georgia, serif;\n}\n\n\u002F* Class and ID selectors *\u002F\n.highlight { background: yellow; }\n#main-title { letter-spacing: 2px; }",true,{"id":524,"language":440,"code":525,"is_editable":522},191,"\u003Cstyle>\n  p { color: gray; }              \u002F* 0,0,1 *\u002F\n  .note { color: blue; }          \u002F* 0,1,0 *\u002F\n  p.note { color: green; }        \u002F* 0,1,1 *\u002F\n  #special { color: crimson; }    \u002F* 1,0,0 *\u002F\n\u003C\u002Fstyle>\n\u003Cp>Plain paragraph (gray)\u003C\u002Fp>\n\u003Cp class='note'>Class paragraph (green)\u003C\u002Fp>\n\u003Cp class='note' id='special'>ID wins (crimson)\u003C\u002Fp>",{"id":527,"language":440,"code":528,"is_editable":522},192,"\u003Cstyle>\n  .box { color: white; background: #34495e; padding: 20px; font-family: Verdana, sans-serif; }\n  .box p { border: 2px dashed orange; margin: 10px 0; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>\n  \u003Cp>Color and font-family are inherited from .box, but the dashed border is not.\u003C\u002Fp>\n\u003C\u002Fdiv>",{"id":530,"language":440,"code":531,"is_editable":522},193,"\u003Cstyle>\n  p { color: red; }\n  p { color: blue; }   \u002F* same specificity: the last rule wins *\u002F\n\u003C\u002Fstyle>\n\u003Cp>Am I red or blue? Source order decides.\u003C\u002Fp>",{"id":533,"language":440,"code":534,"is_editable":522},194,"\u003Cstyle>\n  @media (max-width: 600px) {\n    body { background: lightyellow; }\n  }\n  @media (prefers-color-scheme: dark) {\n    body { background: #111; color: #eee; }\n  }\n\u003C\u002Fstyle>\n\u003Ch2>At-rules in action\u003C\u002Fh2>\n\u003Cp>Resize the window or switch your system to dark mode to see the media queries apply.\u003C\u002Fp>",[536,542],{"id":347,"title":537,"slug":538,"prompt":539,"starter_code":540,"expected_output":541,"language":440,"order_index":9},"Beat the Specificity","beat-the-specificity","The paragraph should be purple, but a higher-specificity rule makes it orange. Without using !important, change or add a selector so that the paragraph text becomes purple.","\u003Cstyle>\n  #box p { color: orange; }\n  p { color: purple; }\n\u003C\u002Fstyle>\n\u003Cdiv id='box'>\n  \u003Cp>Make me purple\u003C\u002Fp>\n\u003C\u002Fdiv>","The paragraph text is purple.",{"id":351,"title":543,"slug":544,"prompt":545,"starter_code":546,"expected_output":547,"language":336,"order_index":23},"Identify the Rule Parts","identify-the-rule-parts","Write a CSS rule that targets all elements with the class 'alert', sets the background-color to #ffe0e0, the color to #b00020 and adds 12px padding.","\u002F* Write your rule below *\u002F\n",".alert { background-color: #ffe0e0; color: #b00020; padding: 12px; }","2026-09-29T18:29:10+00:00",{"id":347,"slug":349,"title":348},{"id":355,"slug":357,"title":356}]