[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:native-css-nesting":35,"course-tree":163},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},{"id":37,"title":38,"slug":39,"content":40,"course":41,"subcategory":42,"author":45,"reading_time_minutes":51,"cornerstone":52,"schema_type":53,"faq_json":5,"video_url":5,"canonical_url":54,"meta_title":55,"meta_description":56,"og_image":5,"toc_json":57,"code_examples":115,"quiz":5,"exercises":139,"published_at":5,"updated_at":154,"prev":155,"next":159},131,"Native CSS Nesting","native-css-nesting","\u003Ch2 id=\"native-css-nesting-write-cleaner-styles-without-sass\">Native CSS Nesting: Write Cleaner Styles Without Sass\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS nesting.\u003C\u002Fstrong> Native CSS nesting lets you write a rule inside another rule, so related styles stay together and selectors are not repeated. It works directly in the browser with no preprocessor. In this lesson you will learn the syntax, the nesting selector &, nested at-rules, how specificity is calculated, how it differs from Sass and the mistakes to avoid.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>native CSS nesting, CSS nesting selector, ampersand in CSS, CSS nesting vs Sass, nested media queries, nesting with container queries, CSS nesting specificity, relaxed nesting syntax, CSS nesting browser support, BEM with nesting, component CSS, nesting with @layer, nesting :is() behavior, nesting hover and focus, CSS without preprocessor, nested declarations.\u003C\u002Fp>\u003Ch2 id=\"1-the-problem-nesting-solves\">1. The Problem Nesting Solves\u003C\u002Fh2>\u003Cp>Without nesting, you repeat the parent selector again and again: \u003Ccode>.card\u003C\u002Fcode>, \u003Ccode>.card h2\u003C\u002Fcode>, \u003Ccode>.card p\u003C\u002Fcode>, \u003Ccode>.card:hover\u003C\u002Fcode>. This is long, easy to break and hard to read. Nesting groups the rules of a component in one block so the structure of the CSS looks like the structure of the HTML.\u003C\u002Fp>\u003Ch2 id=\"2-basic-syntax\">2. Basic Syntax\u003C\u002Fh2>\u003Cp>Place a child rule inside the parent rule block. The browser joins the selectors for you. \u003Ccode>.card { padding: 1rem; h2 { margin: 0; } }\u003C\u002Fcode> is the same as \u003Ccode>.card h2 { margin: 0; }\u003C\u002Fcode>. Modern browsers support the relaxed syntax, so you can nest element selectors, class selectors, attribute selectors and pseudo-classes directly. Older versions of the specification required the & symbol before an element selector, so use it when you need wide compatibility.\u003C\u002Fp>\u003Ch2 id=\"3-the-nesting-selector\">3. The Nesting Selector &\u003C\u002Fh2>\u003Cp>The \u003Ccode>&\u003C\u002Fcode> symbol stands for the parent selector. It is essential in these cases:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Pseudo-classes and pseudo-elements:\u003C\u002Fstrong> \u003Ccode>&:hover\u003C\u002Fcode>, \u003Ccode>&:focus-visible\u003C\u002Fcode>, \u003Ccode>&::before\u003C\u002Fcode>. Without &, \u003Ccode>:hover\u003C\u002Fcode> would mean a descendant in hover state.\u003C\u002Fli>\u003Cli>\u003Cstrong>Compound selectors on the same element:\u003C\u002Fstrong> \u003Ccode>&.active\u003C\u002Fcode> targets the parent when it also has the class active.\u003C\u002Fli>\u003Cli>\u003Cstrong>Parent context (reverse nesting):\u003C\u002Fstrong> \u003Ccode>.dark &\u003C\u002Fcode> means a parent with class dark that contains the current element.\u003C\u002Fli>\u003Cli>\u003Cstrong>Sibling and other combinators:\u003C\u002Fstrong> \u003Ccode>& + &\u003C\u002Fcode> targets an element next to another element with the same selector. A child rule can also begin with a combinator such as \u003Ccode>> li\u003C\u002Fcode> or \u003Ccode>+ p\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"4-what-you-cannot-do\">4. What You Cannot Do\u003C\u002Fh2>\u003Cp>Native nesting does not support Sass-style string joining. \u003Ccode>&-title\u003C\u002Fcode> or \u003Ccode>&__item\u003C\u002Fcode> does \u003Cstrong>not\u003C\u002Fstrong> create \u003Ccode>.card-title\u003C\u002Fcode> or \u003Ccode>.card__item\u003C\u002Fcode>. The ampersand is a real selector reference, not text. For BEM names, write the full class: \u003Ccode>.card { .card__title { ... } }\u003C\u002Fcode> or use attribute-friendly structures. There are also no Sass variables, mixins, functions or loops, because native CSS uses custom properties and its own functions for those jobs.\u003C\u002Fp>\u003Ch2 id=\"5-nesting-at-rules\">5. Nesting At-Rules\u003C\u002Fh2>\u003Cp>You can place \u003Ccode>@media\u003C\u002Fcode>, \u003Ccode>@supports\u003C\u002Fcode>, \u003Ccode>@container\u003C\u002Fcode> and \u003Ccode>@layer\u003C\u002Fcode> inside a rule. The declarations inside belong to the parent selector. This keeps the responsive behavior of a component next to the component itself: \u003Ccode>.card { padding: 1rem; @media (min-width: 700px) { padding: 2rem; } }\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"6-specificity-with-nesting\">6. Specificity with Nesting\u003C\u002Fh2>\u003Cp>The browser treats a nested rule as if the parent were wrapped in \u003Ccode>:is()\u003C\u002Fcode>. That has two consequences:\u003C\u002Fp>\u003Cul>\u003Cli>A nested rule has the specificity of the parent selector plus the nested selector, for example \u003Ccode>.card .title\u003C\u002Fcode> is (0,2,0).\u003C\u002Fli>\u003Cli>If the parent is a selector list, such as \u003Ccode>.card, #hero\u003C\u002Fcode>, the parent part takes the specificity of the \u003Cstrong>most specific\u003C\u002Fstrong> item in the list, which is the id (1,0,0). This can make a nested rule stronger than you expect.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Nested rules do not add a magic priority. Order in the file and specificity still decide, so avoid deep nesting and avoid mixing ids in selector lists.\u003C\u002Fp>\u003Ch2 id=\"7-order-of-declarations-and-nested-rules\">7. Order of Declarations and Nested Rules\u003C\u002Fh2>\u003Cp>Write your normal declarations first and your nested rules after them. Declarations that appear after a nested rule are supported in current browsers, but they are treated as a separate group in the cascade and older browsers handle them differently. Keeping declarations first is easier to read and safer across browsers.\u003C\u002Fp>\u003Ch2 id=\"8-nesting-vs-sass\">8. Nesting vs Sass\u003C\u002Fh2>\u003Cul>\u003Cli>Native nesting runs in the browser and works with live custom properties.\u003C\u002Fli>\u003Cli>No build step is required.\u003C\u002Fli>\u003Cli>No suffix joining with &.\u003C\u002Fli>\u003Cli>No mixins, functions or loops, so keep Sass if you need them.\u003C\u002Fli>\u003Cli>Keep nesting shallow. Two or three levels are enough. Deep nesting creates long selectors that are hard to override.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"9-browser-support-and-fallback\">9. Browser Support and Fallback\u003C\u002Fh2>\u003Cp>Native CSS nesting is supported in all current major browsers, and it became widely available in 2023. If you must support older browsers, compile the nested CSS with a tool such as PostCSS, Lightning CSS or Sass. An important detail: a browser that does not understand nesting drops the nested rules but keeps the parent declarations, so the page stays usable.\u003C\u002Fp>\u003Ch2 id=\"10-best-practices\">10. Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Nest by component, not by page. One top-level block per component.\u003C\u002Fli>\u003Cli>Stay within two or three levels.\u003C\u002Fli>\u003Cli>Use classes for nested rules, not long chains of element selectors.\u003C\u002Fli>\u003Cli>Put states and media queries inside the component they belong to.\u003C\u002Fli>\u003Cli>Combine nesting with \u003Ccode>@layer\u003C\u002Fcode> so components do not fight with utilities.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"11-common-mistakes\">11. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Writing \u003Ccode>:hover\u003C\u002Fcode> instead of \u003Ccode>&:hover\u003C\u002Fcode> and targeting a descendant by mistake.\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>&-suffix\u003C\u002Fcode> to join class names like Sass.\u003C\u002Fli>\u003Cli>Nesting five or six levels deep and creating specificity problems.\u003C\u002Fli>\u003Cli>Forgetting that a parent list with an id raises the specificity of every nested rule.\u003C\u002Fli>\u003Cli>Placing declarations after many nested rules and making the file hard to read.\u003C\u002Fli>\u003Cli>Using nesting for a page with old browsers without a compile step.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Native CSS nesting groups related rules, removes repeated selectors and works without a build tool. Use & for states, compound selectors and parent context, nest media and container queries inside the component, remember it is not string concatenation like Sass, keep the depth low and watch specificity.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .card {\n    max-width: 340px; padding: 16px; border: 1px solid #d0d7de; border-radius: 12px;\n    h2 { margin: 0 0 8px; font-size: 1.25rem; color: #264653; }\n    p { margin: 0 0 12px; color: #444; }\n    a { color: #0b5fff; }\n  }\n<\u002Fstyle>\n<div class='card'>\n  <h2>Nested card<\u002Fh2>\n  <p>The h2, p and a rules live inside the .card block.<\u002Fp>\n  <a href='#'>Read more<\u002Fa>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .btn {\n    background: #0b5fff; color: #fff; border: 0; padding: 10px 18px; border-radius: 8px; cursor: pointer;\n    transition: transform .15s, background .15s;\n    &:hover { background: #0847c4; transform: translateY(-2px); }\n    &:focus-visible { outline: 3px solid #ffb703; outline-offset: 3px; }\n    &.danger { background: #d62839; }\n    &.danger:hover { background: #a61e2c; }\n    &::after { content: ' \\2192'; }\n  }\n<\u002Fstyle>\n<button class='btn'>Primary<\u002Fbutton>\n<button class='btn danger'>Danger<\u002Fbutton>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; margin: 0; padding: 16px; background: #fff; color: #222; }\n  body.dark { background: #12141a; color: #eee; }\n  .panel {\n    padding: 16px; border-radius: 12px; background: #f1f5f9;\n    .dark & { background: #1e222b; }\n    & + & { margin-top: 12px; }\n    > p { margin: 0; }\n  }\n<\u002Fstyle>\n<button onclick=\"document.body.classList.toggle('dark')\">Toggle .dark on body<\u002Fbutton>\n<div class='panel'><p>Panel one uses .dark & for parent context.<\u002Fp><\u002Fdiv>\n<div class='panel'><p>Panel two uses & + & for spacing between siblings.<\u002Fp><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .grid {\n    display: grid; gap: 12px; grid-template-columns: 1fr;\n    @media (min-width: 500px) { grid-template-columns: repeat(2, 1fr); }\n    @media (min-width: 800px) { grid-template-columns: repeat(4, 1fr); }\n    .item {\n      background: #8ecae6; padding: 16px; border-radius: 8px;\n      @media (hover: hover) { &:hover { background: #219ebc; color: #fff; } }\n    }\n  }\n<\u002Fstyle>\n<p>Resize the preview: 1, 2 or 4 columns.<\u002Fp>\n<div class='grid'><div class='item'>1<\u002Fdiv><div class='item'>2<\u002Fdiv><div class='item'>3<\u002Fdiv><div class='item'>4<\u002Fdiv><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { margin: 0; font: 16px system-ui, sans-serif; }\n  .nav {\n    display: flex; gap: 8px; align-items: center; background: #264653; padding: 10px 16px;\n    .logo { color: #fff; font-weight: 800; margin-right: auto; }\n    a {\n      color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 8px;\n      &:hover { background: rgba(255, 255, 255, .15); }\n      &[aria-current='page'] { background: #e9c46a; color: #111; }\n    }\n    @media (max-width: 480px) { flex-wrap: wrap; .logo { width: 100%; } }\n  }\n<\u002Fstyle>\n<nav class='nav'>\n  <span class='logo'>Brand<\u002Fspan>\n  <a href='#' aria-current='page'>Home<\u002Fa><a href='#'>Courses<\u002Fa><a href='#'>Blog<\u002Fa>\n<\u002Fnav>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .card, #hero {\n    .title { color: tomato; }\n  }\n  .card .title { color: teal; }\n<\u002Fstyle>\n<div class='card' id='hero'><p class='title'>Which color do I get?<\u002Fp><\u002Fdiv>\n<p>The nested rule behaves like :is(.card, #hero) .title, so it takes the id specificity (1,1,0) and beats .card .title (0,2,0). The text is tomato.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const sassVsNative = [\n  { feature: 'Nested selectors', sass: true, native: true },\n  { feature: '& parent reference', sass: true, native: true },\n  { feature: '&-suffix string joining', sass: true, native: false },\n  { feature: 'Nested @media and @container', sass: true, native: true },\n  { feature: 'Mixins, functions, loops', sass: true, native: false },\n  { feature: 'Works with no build step', sass: false, native: true }\n];\n\nsassVsNative.forEach(function (row) {\n  console.log(row.feature + ' | Sass: ' + row.sass + ' | Native CSS: ' + row.native);\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":43,"slug":44},"The Modern CSS Toolkit","the-modern-css-toolkit",{"slug":46,"display_name":47,"job_title":5,"short_bio":5,"expertise_tags":48,"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":49,"posts":50},"badar-khalil","Badar Khalil",[],[],[],7,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fnative-css-nesting","Native CSS Nesting: The & Selector, Rules and Examples","Learn native CSS nesting without Sass: the & nesting selector, nested media queries, specificity, differences from Sass, browser support and clean component styles.",[58,67,71,75,79,83,87,91,95,99,103,107,111],{"id":59,"text":60,"level":12,"children":61},"native-css-nesting-write-cleaner-styles-without-sass","Native CSS Nesting: Write Cleaner Styles Without Sass",[62],{"id":63,"text":64,"level":65,"children":66},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",3,[],{"id":68,"text":69,"level":12,"children":70},"1-the-problem-nesting-solves","1. The Problem Nesting Solves",[],{"id":72,"text":73,"level":12,"children":74},"2-basic-syntax","2. Basic Syntax",[],{"id":76,"text":77,"level":12,"children":78},"3-the-nesting-selector","3. The Nesting Selector &",[],{"id":80,"text":81,"level":12,"children":82},"4-what-you-cannot-do","4. What You Cannot Do",[],{"id":84,"text":85,"level":12,"children":86},"5-nesting-at-rules","5. Nesting At-Rules",[],{"id":88,"text":89,"level":12,"children":90},"6-specificity-with-nesting","6. Specificity with Nesting",[],{"id":92,"text":93,"level":12,"children":94},"7-order-of-declarations-and-nested-rules","7. Order of Declarations and Nested Rules",[],{"id":96,"text":97,"level":12,"children":98},"8-nesting-vs-sass","8. Nesting vs Sass",[],{"id":100,"text":101,"level":12,"children":102},"9-browser-support-and-fallback","9. Browser Support and Fallback",[],{"id":104,"text":105,"level":12,"children":106},"10-best-practices","10. Best Practices",[],{"id":108,"text":109,"level":12,"children":110},"11-common-mistakes","11. Common Mistakes",[],{"id":112,"text":113,"level":12,"children":114},"key-takeaways","Key Takeaways",[],[116,120,123,126,129,132,135],{"id":117,"language":16,"code":118,"is_editable":119},502,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .card {\n    max-width: 340px; padding: 16px; border: 1px solid #d0d7de; border-radius: 12px;\n    h2 { margin: 0 0 8px; font-size: 1.25rem; color: #264653; }\n    p { margin: 0 0 12px; color: #444; }\n    a { color: #0b5fff; }\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\n  \u003Ch2>Nested card\u003C\u002Fh2>\n  \u003Cp>The h2, p and a rules live inside the .card block.\u003C\u002Fp>\n  \u003Ca href='#'>Read more\u003C\u002Fa>\n\u003C\u002Fdiv>",true,{"id":121,"language":16,"code":122,"is_editable":119},503,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .btn {\n    background: #0b5fff; color: #fff; border: 0; padding: 10px 18px; border-radius: 8px; cursor: pointer;\n    transition: transform .15s, background .15s;\n    &:hover { background: #0847c4; transform: translateY(-2px); }\n    &:focus-visible { outline: 3px solid #ffb703; outline-offset: 3px; }\n    &.danger { background: #d62839; }\n    &.danger:hover { background: #a61e2c; }\n    &::after { content: ' \\2192'; }\n  }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Primary\u003C\u002Fbutton>\n\u003Cbutton class='btn danger'>Danger\u003C\u002Fbutton>",{"id":124,"language":16,"code":125,"is_editable":119},504,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; margin: 0; padding: 16px; background: #fff; color: #222; }\n  body.dark { background: #12141a; color: #eee; }\n  .panel {\n    padding: 16px; border-radius: 12px; background: #f1f5f9;\n    .dark & { background: #1e222b; }\n    & + & { margin-top: 12px; }\n    > p { margin: 0; }\n  }\n\u003C\u002Fstyle>\n\u003Cbutton onclick=\"document.body.classList.toggle('dark')\">Toggle .dark on body\u003C\u002Fbutton>\n\u003Cdiv class='panel'>\u003Cp>Panel one uses .dark & for parent context.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class='panel'>\u003Cp>Panel two uses & + & for spacing between siblings.\u003C\u002Fp>\u003C\u002Fdiv>",{"id":127,"language":16,"code":128,"is_editable":119},505,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .grid {\n    display: grid; gap: 12px; grid-template-columns: 1fr;\n    @media (min-width: 500px) { grid-template-columns: repeat(2, 1fr); }\n    @media (min-width: 800px) { grid-template-columns: repeat(4, 1fr); }\n    .item {\n      background: #8ecae6; padding: 16px; border-radius: 8px;\n      @media (hover: hover) { &:hover { background: #219ebc; color: #fff; } }\n    }\n  }\n\u003C\u002Fstyle>\n\u003Cp>Resize the preview: 1, 2 or 4 columns.\u003C\u002Fp>\n\u003Cdiv class='grid'>\u003Cdiv class='item'>1\u003C\u002Fdiv>\u003Cdiv class='item'>2\u003C\u002Fdiv>\u003Cdiv class='item'>3\u003C\u002Fdiv>\u003Cdiv class='item'>4\u003C\u002Fdiv>\u003C\u002Fdiv>",{"id":130,"language":16,"code":131,"is_editable":119},506,"\u003Cstyle>\n  body { margin: 0; font: 16px system-ui, sans-serif; }\n  .nav {\n    display: flex; gap: 8px; align-items: center; background: #264653; padding: 10px 16px;\n    .logo { color: #fff; font-weight: 800; margin-right: auto; }\n    a {\n      color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 8px;\n      &:hover { background: rgba(255, 255, 255, .15); }\n      &[aria-current='page'] { background: #e9c46a; color: #111; }\n    }\n    @media (max-width: 480px) { flex-wrap: wrap; .logo { width: 100%; } }\n  }\n\u003C\u002Fstyle>\n\u003Cnav class='nav'>\n  \u003Cspan class='logo'>Brand\u003C\u002Fspan>\n  \u003Ca href='#' aria-current='page'>Home\u003C\u002Fa>\u003Ca href='#'>Courses\u003C\u002Fa>\u003Ca href='#'>Blog\u003C\u002Fa>\n\u003C\u002Fnav>",{"id":133,"language":16,"code":134,"is_editable":119},507,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .card, #hero {\n    .title { color: tomato; }\n  }\n  .card .title { color: teal; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card' id='hero'>\u003Cp class='title'>Which color do I get?\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cp>The nested rule behaves like :is(.card, #hero) .title, so it takes the id specificity (1,1,0) and beats .card .title (0,2,0). The text is tomato.\u003C\u002Fp>",{"id":136,"language":137,"code":138,"is_editable":119},508,"javascript","const sassVsNative = [\n  { feature: 'Nested selectors', sass: true, native: true },\n  { feature: '& parent reference', sass: true, native: true },\n  { feature: '&-suffix string joining', sass: true, native: false },\n  { feature: 'Nested @media and @container', sass: true, native: true },\n  { feature: 'Mixins, functions, loops', sass: true, native: false },\n  { feature: 'Works with no build step', sass: false, native: true }\n];\n\nsassVsNative.forEach(function (row) {\n  console.log(row.feature + ' | Sass: ' + row.sass + ' | Native CSS: ' + row.native);\n});",[140,147],{"id":141,"title":142,"slug":143,"prompt":144,"starter_code":145,"expected_output":146,"language":16,"order_index":23},185,"Nest a Flat Navigation Stylesheet","nest-flat-navigation-css","Rewrite the flat CSS using native nesting. Put the a, a:hover and a.active rules inside .menu, and use the ampersand where it is needed.","\u003Cstyle>\n  .menu { display: flex; gap: 8px; background: #264653; padding: 10px; }\n  .menu a { color: #fff; padding: 8px 12px; text-decoration: none; border-radius: 8px; }\n  .menu a:hover { background: rgba(255,255,255,.2); }\n  .menu a.active { background: #e9c46a; color: #111; }\n\u003C\u002Fstyle>\n\u003Cnav class='menu'>\u003Ca class='active' href='#'>Home\u003C\u002Fa>\u003Ca href='#'>About\u003C\u002Fa>\u003Ca href='#'>Contact\u003C\u002Fa>\u003C\u002Fnav>","A single .menu block with nested a, &:hover and &.active rules, and the same visual result",{"id":148,"title":149,"slug":150,"prompt":151,"starter_code":152,"expected_output":153,"language":16,"order_index":12},186,"Add a Nested Media Query to a Card Grid","nested-media-query-card-grid","Inside the .cards rule, add a nested media query that changes the grid to two columns from 600px and four columns from 1000px. Do not write a separate top-level media query.","\u003Cstyle>\n  .cards { display: grid; gap: 12px; grid-template-columns: 1fr; }\n  .card { background: #8ecae6; padding: 16px; border-radius: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='cards'>\u003Cdiv class='card'>1\u003C\u002Fdiv>\u003Cdiv class='card'>2\u003C\u002Fdiv>\u003Cdiv class='card'>3\u003C\u002Fdiv>\u003Cdiv class='card'>4\u003C\u002Fdiv>\u003C\u002Fdiv>","The .cards rule contains nested @media (min-width: 600px) and @media (min-width: 1000px) blocks that change grid-template-columns","2026-09-30T18:26:43+00:00",{"id":156,"slug":157,"title":158},130,"math-functions-calc-min-max-clamp","Math Functions (calc, min, max, clamp)",{"id":160,"slug":161,"title":162},132,"cascade-layers-at-layer","Cascade Layers (@layer)",{"data":164},[165,485],{"id":23,"name":15,"slug":166,"icon":5,"icon_url":5,"short_description":167,"meta_title":168,"meta_description":169,"og_image":170,"locale":171,"subcategories":172},"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",[173,198,233,257,333,367,381,409,433,449],{"id":23,"name":174,"slug":175,"order_index":23,"topics":176},"HTML Fundamentals & Setup","html-fundamentals-setup",[177,180,183,186,190,194],{"id":12,"title":178,"slug":179,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":23,"title":181,"slug":182,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":65,"title":184,"slug":185,"order_index":65,"cornerstone":52,"reading_time_minutes":12},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":187,"title":188,"slug":189,"order_index":187,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":191,"title":192,"slug":193,"order_index":191,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":195,"title":196,"slug":197,"order_index":195,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":199,"slug":200,"order_index":12,"topics":201},"Text & Content Basics","text-content-basics",[202,205,209,213,217,221,225,229],{"id":51,"title":203,"slug":204,"order_index":51,"cornerstone":52,"reading_time_minutes":12},"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":206,"title":207,"slug":208,"order_index":206,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":210,"title":211,"slug":212,"order_index":210,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":214,"title":215,"slug":216,"order_index":214,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":218,"title":219,"slug":220,"order_index":218,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":222,"title":223,"slug":224,"order_index":222,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":226,"title":227,"slug":228,"order_index":226,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":230,"title":231,"slug":232,"order_index":230,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":65,"name":234,"slug":235,"order_index":65,"topics":236},"Links, Media & Navigation","links-media-navigation",[237,241,245,249,253],{"id":238,"title":239,"slug":240,"order_index":238,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":242,"title":243,"slug":244,"order_index":242,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":246,"title":247,"slug":248,"order_index":246,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":250,"title":251,"slug":252,"order_index":250,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":254,"title":255,"slug":256,"order_index":254,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":187,"name":258,"slug":259,"order_index":187,"topics":260},"Structuring Content","structuring-content",[261,266,271,276,281,285,289,293,297,301,305,309,313,317,321,325,329],{"id":262,"title":263,"slug":264,"order_index":265,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":267,"title":268,"slug":269,"order_index":270,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":272,"title":273,"slug":274,"order_index":275,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":277,"title":278,"slug":279,"order_index":280,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":282,"title":283,"slug":284,"order_index":262,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":286,"title":287,"slug":288,"order_index":267,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":290,"title":291,"slug":292,"order_index":272,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":294,"title":295,"slug":296,"order_index":277,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":298,"title":299,"slug":300,"order_index":282,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":302,"title":303,"slug":304,"order_index":286,"cornerstone":52,"reading_time_minutes":65},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":306,"title":307,"slug":308,"order_index":290,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":310,"title":311,"slug":312,"order_index":294,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":314,"title":315,"slug":316,"order_index":298,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":318,"title":319,"slug":320,"order_index":318,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":322,"title":323,"slug":324,"order_index":322,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":326,"title":327,"slug":328,"order_index":326,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":330,"title":331,"slug":332,"order_index":330,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":334,"slug":335,"order_index":191,"topics":336},"Forms & User Input","forms-user-input",[337,342,347,352,357,362],{"id":338,"title":339,"slug":340,"order_index":341,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":343,"title":344,"slug":345,"order_index":346,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":348,"title":349,"slug":350,"order_index":351,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":353,"title":354,"slug":355,"order_index":356,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":358,"title":359,"slug":360,"order_index":361,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":363,"title":364,"slug":365,"order_index":366,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":206,"name":368,"slug":369,"order_index":195,"topics":370},"Graphics & Visuals","graphics-visuals",[371,376],{"id":372,"title":373,"slug":374,"order_index":375,"cornerstone":52,"reading_time_minutes":65},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":377,"title":378,"slug":379,"order_index":380,"cornerstone":52,"reading_time_minutes":65},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":210,"name":382,"slug":383,"order_index":51,"topics":384},"Multimedia","multimedia",[385,390,395,400,405],{"id":386,"title":387,"slug":388,"order_index":389,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":391,"title":392,"slug":393,"order_index":394,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":396,"title":397,"slug":398,"order_index":399,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":401,"title":402,"slug":403,"order_index":404,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":406,"title":407,"slug":408,"order_index":338,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":214,"name":410,"slug":411,"order_index":206,"topics":412},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[413,417,421,425,429],{"id":414,"title":415,"slug":416,"order_index":343,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":418,"title":419,"slug":420,"order_index":348,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":422,"title":423,"slug":424,"order_index":353,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":426,"title":427,"slug":428,"order_index":358,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":430,"title":431,"slug":432,"order_index":363,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":218,"name":434,"slug":435,"order_index":210,"topics":436},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[437,441,445],{"id":438,"title":439,"slug":440,"order_index":372,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":442,"title":443,"slug":444,"order_index":377,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":446,"title":447,"slug":448,"order_index":386,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":222,"name":450,"slug":451,"order_index":214,"topics":452},"Reference & Practice","reference-practice",[453,457,461,465,469,473,477,481],{"id":454,"title":455,"slug":456,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":458,"title":459,"slug":460,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":462,"title":463,"slug":464,"order_index":65,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":466,"title":467,"slug":468,"order_index":187,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":470,"title":471,"slug":472,"order_index":191,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":474,"title":475,"slug":476,"order_index":195,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":478,"title":479,"slug":480,"order_index":51,"cornerstone":52,"reading_time_minutes":65},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":482,"title":483,"slug":484,"order_index":206,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":486,"meta_title":487,"meta_description":488,"og_image":5,"locale":171,"subcategories":489},"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.",[490,519,543,579,611,643,675,707,724,752],{"id":280,"name":491,"slug":492,"order_index":493,"topics":494},"UI Components","ui-components",0,[495,499,503,507,511,515],{"id":496,"title":497,"slug":498,"order_index":406,"cornerstone":52,"reading_time_minutes":195},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":500,"title":501,"slug":502,"order_index":414,"cornerstone":52,"reading_time_minutes":195},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":504,"title":505,"slug":506,"order_index":418,"cornerstone":52,"reading_time_minutes":51},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":508,"title":509,"slug":510,"order_index":422,"cornerstone":52,"reading_time_minutes":195},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":512,"title":513,"slug":514,"order_index":426,"cornerstone":52,"reading_time_minutes":195},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":516,"title":517,"slug":518,"order_index":430,"cornerstone":52,"reading_time_minutes":195},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":226,"name":520,"slug":521,"order_index":493,"topics":522},"CSS Fundamentals & Setup","css-fundamentals-setup",[523,527,531,535,539],{"id":524,"title":525,"slug":526,"order_index":23,"cornerstone":52,"reading_time_minutes":187},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":528,"title":529,"slug":530,"order_index":12,"cornerstone":52,"reading_time_minutes":187},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":532,"title":533,"slug":534,"order_index":65,"cornerstone":52,"reading_time_minutes":65},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":536,"title":537,"slug":538,"order_index":187,"cornerstone":52,"reading_time_minutes":65},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":540,"title":541,"slug":542,"order_index":191,"cornerstone":52,"reading_time_minutes":191},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":230,"name":544,"slug":545,"order_index":493,"topics":546},"Selectors & the Cascade","selectors-the-cascade",[547,551,555,559,563,567,571,575],{"id":548,"title":549,"slug":550,"order_index":195,"cornerstone":52,"reading_time_minutes":187},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":552,"title":553,"slug":554,"order_index":51,"cornerstone":52,"reading_time_minutes":187},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":556,"title":557,"slug":558,"order_index":206,"cornerstone":52,"reading_time_minutes":187},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":560,"title":561,"slug":562,"order_index":210,"cornerstone":52,"reading_time_minutes":195},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":564,"title":565,"slug":566,"order_index":214,"cornerstone":52,"reading_time_minutes":191},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":568,"title":569,"slug":570,"order_index":218,"cornerstone":52,"reading_time_minutes":191},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":572,"title":573,"slug":574,"order_index":222,"cornerstone":52,"reading_time_minutes":187},93,"CSS Specificity Explained","css-specificity-explained",{"id":576,"title":577,"slug":578,"order_index":226,"cornerstone":52,"reading_time_minutes":191},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":238,"name":580,"slug":581,"order_index":493,"topics":582},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[583,587,591,595,599,603,607],{"id":584,"title":585,"slug":586,"order_index":230,"cornerstone":52,"reading_time_minutes":191},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":588,"title":589,"slug":590,"order_index":238,"cornerstone":52,"reading_time_minutes":187},96,"CSS Backgrounds","css-backgrounds",{"id":592,"title":593,"slug":594,"order_index":242,"cornerstone":52,"reading_time_minutes":191},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":596,"title":597,"slug":598,"order_index":246,"cornerstone":52,"reading_time_minutes":191},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":600,"title":601,"slug":602,"order_index":250,"cornerstone":52,"reading_time_minutes":195},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":604,"title":605,"slug":606,"order_index":254,"cornerstone":52,"reading_time_minutes":191},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":608,"title":609,"slug":610,"order_index":265,"cornerstone":52,"reading_time_minutes":195},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":242,"name":612,"slug":613,"order_index":493,"topics":614},"Box Model & Spacing","box-model-spacing",[615,619,623,627,631,635,639],{"id":616,"title":617,"slug":618,"order_index":270,"cornerstone":52,"reading_time_minutes":51},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":620,"title":621,"slug":622,"order_index":275,"cornerstone":52,"reading_time_minutes":51},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":624,"title":625,"slug":626,"order_index":280,"cornerstone":52,"reading_time_minutes":195},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":628,"title":629,"slug":630,"order_index":262,"cornerstone":52,"reading_time_minutes":210},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":632,"title":633,"slug":634,"order_index":267,"cornerstone":52,"reading_time_minutes":191},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":636,"title":637,"slug":638,"order_index":272,"cornerstone":52,"reading_time_minutes":51},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":640,"title":641,"slug":642,"order_index":277,"cornerstone":52,"reading_time_minutes":51},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":246,"name":644,"slug":645,"order_index":493,"topics":646},"Typography & Text","typography-text",[647,651,655,659,663,667,671],{"id":648,"title":649,"slug":650,"order_index":282,"cornerstone":52,"reading_time_minutes":51},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":652,"title":653,"slug":654,"order_index":286,"cornerstone":52,"reading_time_minutes":51},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":656,"title":657,"slug":658,"order_index":290,"cornerstone":52,"reading_time_minutes":51},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":660,"title":661,"slug":662,"order_index":294,"cornerstone":52,"reading_time_minutes":51},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":664,"title":665,"slug":666,"order_index":298,"cornerstone":52,"reading_time_minutes":206},113,"Styling Links","styling-links-css",{"id":668,"title":669,"slug":670,"order_index":318,"cornerstone":52,"reading_time_minutes":51},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":672,"title":673,"slug":674,"order_index":322,"cornerstone":52,"reading_time_minutes":214},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":250,"name":676,"slug":677,"order_index":493,"topics":678},"Display, Position & Layout Basics","display-position-layout-basics",[679,683,687,691,695,699,703],{"id":680,"title":681,"slug":682,"order_index":326,"cornerstone":52,"reading_time_minutes":51},116,"Display & Inline-block","display-and-inline-block",{"id":684,"title":685,"slug":686,"order_index":330,"cornerstone":52,"reading_time_minutes":195},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":688,"title":689,"slug":690,"order_index":341,"cornerstone":52,"reading_time_minutes":195},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":692,"title":693,"slug":694,"order_index":346,"cornerstone":52,"reading_time_minutes":191},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":696,"title":697,"slug":698,"order_index":351,"cornerstone":52,"reading_time_minutes":195},120,"Centering Techniques","centering-techniques",{"id":700,"title":701,"slug":702,"order_index":356,"cornerstone":52,"reading_time_minutes":51},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":704,"title":705,"slug":706,"order_index":361,"cornerstone":52,"reading_time_minutes":206},122,"Website Layout Basics","website-layout-basics",{"id":265,"name":43,"slug":44,"order_index":493,"topics":708},[709,713,714,715,716,720],{"id":710,"title":711,"slug":712,"order_index":366,"cornerstone":52,"reading_time_minutes":206},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":156,"title":158,"slug":157,"order_index":375,"cornerstone":52,"reading_time_minutes":206},{"id":37,"title":38,"slug":39,"order_index":380,"cornerstone":52,"reading_time_minutes":51},{"id":160,"title":162,"slug":161,"order_index":389,"cornerstone":52,"reading_time_minutes":51},{"id":717,"title":718,"slug":719,"order_index":394,"cornerstone":52,"reading_time_minutes":210},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":721,"title":722,"slug":723,"order_index":399,"cornerstone":52,"reading_time_minutes":206},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":270,"name":725,"slug":726,"order_index":493,"topics":727},"Responsive Design","responsive-design",[728,732,736,740,744,748],{"id":729,"title":730,"slug":731,"order_index":404,"cornerstone":52,"reading_time_minutes":210},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":733,"title":734,"slug":735,"order_index":338,"cornerstone":52,"reading_time_minutes":206},136,"Media Queries","media-queries",{"id":737,"title":738,"slug":739,"order_index":343,"cornerstone":52,"reading_time_minutes":206},137,"Responsive Images & Video","responsive-images-and-video",{"id":741,"title":742,"slug":743,"order_index":348,"cornerstone":52,"reading_time_minutes":210},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":745,"title":746,"slug":747,"order_index":353,"cornerstone":52,"reading_time_minutes":210},139,"Container Queries","container-queries",{"id":749,"title":750,"slug":751,"order_index":358,"cornerstone":52,"reading_time_minutes":222},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":275,"name":753,"slug":754,"order_index":493,"topics":755},"Transitions & Animation","transitions-animation",[756,760,764,768,772,776,780],{"id":757,"title":758,"slug":759,"order_index":363,"cornerstone":52,"reading_time_minutes":191},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":761,"title":762,"slug":763,"order_index":372,"cornerstone":52,"reading_time_minutes":187},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":765,"title":766,"slug":767,"order_index":377,"cornerstone":52,"reading_time_minutes":191},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":769,"title":770,"slug":771,"order_index":386,"cornerstone":52,"reading_time_minutes":191},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":773,"title":774,"slug":775,"order_index":391,"cornerstone":52,"reading_time_minutes":191},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":777,"title":778,"slug":779,"order_index":396,"cornerstone":52,"reading_time_minutes":191},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":781,"title":782,"slug":783,"order_index":401,"cornerstone":52,"reading_time_minutes":195},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance"]