[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:css-variables-custom-properties":35,"course-tree":175},{"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":127,"quiz":5,"exercises":151,"published_at":5,"updated_at":166,"prev":167,"next":171},129,"CSS Variables (Custom Properties)","css-variables-custom-properties","\u003Ch2 id=\"css-variables-custom-properties-complete-guide\">CSS Variables (Custom Properties): Complete Guide\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS variables.\u003C\u002Fstrong> CSS variables, officially called custom properties, let you store a value once and reuse it everywhere. They follow the cascade and inheritance, they can change at runtime, and they are the foundation of theming, design tokens and dark mode. In this lesson you will learn the syntax, scope, fallbacks, JavaScript access, the @property rule and the most common mistakes. Every code block is editable, so change the values and watch the preview.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>CSS custom properties, var() function, CSS variables vs Sass variables, CSS variable fallback, :root variables, design tokens, CSS theming, dark mode variables, @property rule, registered custom properties, animate CSS variables, setProperty JavaScript, getComputedStyle, CSS variables scope, component API with custom properties, invalid at computed-value time, container style queries, CSS variables in calc.\u003C\u002Fp>\u003Ch2 id=\"1-what-are-css-variables\">1. What Are CSS Variables?\u003C\u002Fh2>\u003Cp>A custom property is a property whose name you choose. The name always starts with two dashes, for example \u003Ccode>--brand-color\u003C\u002Fcode>. You read its value with the \u003Ccode>var()\u003C\u002Fcode> function. Unlike Sass or Less variables, which are replaced at build time, CSS variables live in the browser. They can be changed with media queries, classes, attributes, JavaScript and even animations.\u003C\u002Fp>\u003Cul>\u003Cli>Declare: \u003Ccode>--brand-color: #0b5fff;\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Use: \u003Ccode>color: var(--brand-color);\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Names are case sensitive: \u003Ccode>--Brand\u003C\u002Fcode> and \u003Ccode>--brand\u003C\u002Fcode> are different variables.\u003C\u002Fli>\u003Cli>Values can be colors, lengths, numbers, strings, URLs, lists or even whole chunks of CSS such as \u003Ccode>0 4px 12px rgba(0,0,0,.2)\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"2-syntax-and-the-root-selector\">2. Syntax and the :root Selector\u003C\u002Fh2>\u003Cp>Global variables are usually declared on \u003Ccode>:root\u003C\u002Fcode>, which matches the html element but has higher specificity than the \u003Ccode>html\u003C\u002Fcode> type selector. Everything in the page inherits them. Good habits: group variables by purpose (colors, spacing, typography, radius, shadow) and give them meaningful names such as \u003Ccode>--color-text\u003C\u002Fcode> instead of \u003Ccode>--dark-gray\u003C\u002Fcode>, because the meaning stays true when the value changes.\u003C\u002Fp>\u003Ch2 id=\"3-the-var-function-and-fallback-values\">3. The var() Function and Fallback Values\u003C\u002Fh2>\u003Cp>\u003Ccode>var(--name, fallback)\u003C\u002Fcode> uses the fallback when the variable is not defined. The fallback can contain commas, for example \u003Ccode>var(--font, Inter, system-ui, sans-serif)\u003C\u002Fcode>, and can be another variable: \u003Ccode>var(--accent, var(--brand, blue))\u003C\u002Fcode>. A fallback is not used when the variable exists but holds an invalid value for that property, see section 9.\u003C\u002Fp>\u003Ch2 id=\"4-scope-and-inheritance\">4. Scope and Inheritance\u003C\u002Fh2>\u003Cp>Custom properties inherit like \u003Ccode>color\u003C\u002Fcode> or \u003Ccode>font-family\u003C\u002Fcode>. A variable declared on an element is available to that element and all of its descendants. You can override a variable on any selector, and only that part of the page changes. This is what makes local theming possible: set \u003Ccode>--card-bg\u003C\u002Fcode> on a single card, a section or a component wrapper.\u003C\u002Fp>\u003Ch2 id=\"5-theming-with-variables\">5. Theming with Variables\u003C\u002Fh2>\u003Cp>Define your colors as variables and redefine them for a theme. For example, \u003Ccode>[data-theme='dark'] { --bg: #111; --text: #eee; }\u003C\u002Fcode> swaps the whole palette without touching any component rule. The same pattern works for brand themes, seasonal themes and high contrast modes. You will connect this idea with \u003Ccode>prefers-color-scheme\u003C\u002Fcode> in the dark mode lesson.\u003C\u002Fp>\u003Ch2 id=\"6-variables-and-calc\">6. Variables and calc()\u003C\u002Fh2>\u003Cp>Variables combine very well with math functions. Store a base unit and build a scale: \u003Ccode>--space: 8px; padding: calc(var(--space) * 2);\u003C\u002Fcode>. Keep numbers unitless when you want to multiply them by different units, for example \u003Ccode>--cols: 3\u003C\u002Fcode> and \u003Ccode>width: calc(100% \u002F var(--cols))\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"7-reading-and-writing-variables-with-javascript\">7. Reading and Writing Variables with JavaScript\u003C\u002Fh2>\u003Cul>\u003Cli>Set on the root: \u003Ccode>document.documentElement.style.setProperty('--hue', 200)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Set on one element: \u003Ccode>el.style.setProperty('--progress', '60%')\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Read the computed value: \u003Ccode>getComputedStyle(el).getPropertyValue('--hue')\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Remove an inline value: \u003Ccode>el.style.removeProperty('--hue')\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Changing a variable updates everything that uses it, without re-writing style rules. This is perfect for sliders, pointer-following effects, scroll progress and live theme pickers.\u003C\u002Fp>\u003Ch2 id=\"8-the-at-property-rule-registered-custom-properties\">8. The @property Rule (Registered Custom Properties)\u003C\u002Fh2>\u003Cp>By default a custom property is just text, so the browser cannot animate it. With \u003Ccode>@property\u003C\u002Fcode> you register a type: \u003Ccode>@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }\u003C\u002Fcode>. Now the browser understands the value, validates it, and can transition or animate it. This unlocks animated gradients, number counters and smooth color changes. The three descriptors are \u003Ccode>syntax\u003C\u002Fcode> (the type), \u003Ccode>inherits\u003C\u002Fcode> (true or false) and \u003Ccode>initial-value\u003C\u002Fcode> (required unless the syntax is universal). Check browser support and keep a static fallback.\u003C\u002Fp>\u003Ch2 id=\"9-invalid-at-computed-value-time\">9. Invalid at Computed-Value Time\u003C\u002Fh2>\u003Cp>A custom property accepts almost any value, so the browser cannot know if it is valid for a specific property until the page is computed. If \u003Ccode>--size: red\u003C\u002Fcode> is used in \u003Ccode>width: var(--size)\u003C\u002Fcode>, the declaration becomes invalid at computed-value time. The property then falls back to its inherited or initial value, and the fallback inside var() is not used. Debug this in DevTools by checking the computed panel.\u003C\u002Fp>\u003Ch2 id=\"10-limits-you-should-know\">10. Limits You Should Know\u003C\u002Fh2>\u003Cul>\u003Cli>Variables cannot be used inside media query conditions, for example \u003Ccode>@media (min-width: var(--bp))\u003C\u002Fcode> does not work. Use an \u003Ccode>env()\u003C\u002Fcode> or a build-time value instead.\u003C\u002Fli>\u003Cli>Variables cannot build a property name or a selector, only a value.\u003C\u002Fli>\u003Cli>A variable cannot be used to create a URL piece inside \u003Ccode>url()\u003C\u002Fcode> by concatenation. Store the whole \u003Ccode>url(...)\u003C\u002Fcode> instead.\u003C\u002Fli>\u003Cli>A variable that refers to itself or creates a loop becomes invalid.\u003C\u002Fli>\u003Cli>Container style queries, written as \u003Ccode>@container style(--theme: dark)\u003C\u002Fcode>, let a component react to a variable value. Check browser support before using them in production.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"11-design-tokens-and-component-apis\">11. Design Tokens and Component APIs\u003C\u002Fh2>\u003Cp>Design systems use two layers of variables. \u003Cstrong>Global tokens\u003C\u002Fstrong> hold raw values such as \u003Ccode>--blue-600\u003C\u002Fcode>. \u003Cstrong>Semantic tokens\u003C\u002Fstrong> give them a role such as \u003Ccode>--color-primary: var(--blue-600)\u003C\u002Fcode>. A component can also expose a small public API: a button uses \u003Ccode>background: var(--btn-bg, var(--color-primary))\u003C\u002Fcode> so the page can customize it with one line and no extra class.\u003C\u002Fp>\u003Ch2 id=\"12-performance-and-good-practice\">12. Performance and Good Practice\u003C\u002Fh2>\u003Cul>\u003Cli>Changing a variable on the root invalidates styles for the whole page. For fast effects such as pointer tracking, set the variable on the smallest element that needs it.\u003C\u002Fli>\u003Cli>Do not create hundreds of unused variables.\u003C\u002Fli>\u003Cli>Always provide fallbacks for variables that may be missing in third party components.\u003C\u002Fli>\u003Cli>Document your variable names in a single place.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"13-accessibility-notes\">13. Accessibility Notes\u003C\u002Fh2>\u003Cul>\u003Cli>Check color contrast for every theme, not only the default one.\u003C\u002Fli>\u003Cli>Keep spacing and font size variables in rem so user font settings still work.\u003C\u002Fli>\u003Cli>Do not hide important focus styles behind a variable that can be set to transparent.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"14-common-mistakes\">14. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting the two dashes in the name.\u003C\u002Fli>\u003Cli>Writing \u003Ccode>var(brand)\u003C\u002Fcode> instead of \u003Ccode>var(--brand)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Using a variable in a media query condition.\u003C\u002Fli>\u003Cli>Expecting a fallback to fix an invalid value.\u003C\u002Fli>\u003Cli>Naming variables by color value (\u003Ccode>--red\u003C\u002Fcode>) instead of role (\u003Ccode>--color-danger\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>Adding a unit twice, such as \u003Ccode>calc(var(--gap)px)\u003C\u002Fcode>. Use \u003Ccode>calc(var(--gap) * 1px)\u003C\u002Fcode> for unitless numbers.\u003C\u002Fli>\u003Cli>Declaring variables on a selector that does not contain the elements that use them.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>CSS variables are live, inherited values. Declare them on :root for global use, override them on any element for local changes, add fallbacks in var(), update them with JavaScript, register them with @property when you need animation, and name them by role to build clean themes and design tokens.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root {\n    --brand: #0b5fff;\n    --radius: 12px;\n    --space: 16px;\n    --shadow: 0 6px 18px rgba(0, 0, 0, .15);\n  }\n  body { font: 18px system-ui, sans-serif; padding: var(--space); }\n  .card { padding: var(--space); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 6px solid var(--brand); max-width: 360px; }\n  .btn { background: var(--brand); color: #fff; border: 0; padding: 10px 18px; border-radius: var(--radius); }\n<\u002Fstyle>\n<div class='card'>\n  <h3>Global variables<\u002Fh3>\n  <p>Change --brand in :root and both the border and the button update.<\u002Fp>\n  <button class='btn'>Buy now<\u002Fbutton>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { --accent: #2a9d8f; }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .tag { display: inline-block; padding: 6px 14px; margin: 4px; border-radius: 999px; color: #fff; background: var(--tag-bg, var(--accent)); }\n  .warning { --tag-bg: #e76f51; }\n  .info { --tag-bg: #264653; }\n  .missing { background: var(--not-defined, #8d99ae); }\n<\u002Fstyle>\n<span class='tag'>Default (uses --accent)<\u002Fspan>\n<span class='tag warning'>Local override<\u002Fspan>\n<span class='tag info'>Local override<\u002Fspan>\n<span class='tag missing'>Fallback value<\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root {\n    --bg: #ffffff; --text: #1b1b1f; --card: #f1f5f9; --primary: #0b5fff;\n  }\n  [data-theme='dark'] {\n    --bg: #12141a; --text: #eceff4; --card: #1e222b; --primary: #6ea8ff;\n  }\n  [data-theme='forest'] {\n    --bg: #f0f7f1; --text: #13321f; --card: #dcefe0; --primary: #1b7f4b;\n  }\n  body { margin: 0; padding: 20px; font: 18px system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }\n  .card { background: var(--card); padding: 16px; border-radius: 12px; max-width: 360px; }\n  button { background: var(--primary); color: #fff; border: 0; padding: 8px 14px; border-radius: 8px; margin-right: 6px; cursor: pointer; }\n<\u002Fstyle>\n<div class='card'><h3>Theme switcher<\u002Fh3><p>Only the variables change, no component rule is touched.<\u002Fp><\u002Fdiv>\n<p><button data-t='light'>Light<\u002Fbutton><button data-t='dark'>Dark<\u002Fbutton><button data-t='forest'>Forest<\u002Fbutton><\u002Fp>\n<script>\n  document.querySelectorAll('button').forEach(function (b) {\n    b.addEventListener('click', function () {\n      document.documentElement.setAttribute('data-theme', b.dataset.t);\n    });\n  });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { --space: 8px; --cols: 3; --gap: 12px; }\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .grid { display: flex; flex-wrap: wrap; gap: var(--gap); }\n  .item {\n    width: calc((100% - (var(--cols) - 1) * var(--gap)) \u002F var(--cols));\n    padding: calc(var(--space) * 2);\n    background: #8ecae6; box-sizing: border-box; border-radius: 8px;\n  }\n<\u002Fstyle>\n<p>Change --cols to 2 or 4 and the layout recalculates.<\u002Fp>\n<div class='grid'>\n  <div class='item'>1<\u002Fdiv><div class='item'>2<\u002Fdiv><div class='item'>3<\u002Fdiv>\n  <div class='item'>4<\u002Fdiv><div class='item'>5<\u002Fdiv><div class='item'>6<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { --hue: 210; --progress: 40%; }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .swatch { height: 80px; border-radius: 12px; background: hsl(var(--hue) 80% 55%); margin-bottom: 12px; }\n  .bar { height: 14px; background: #ddd; border-radius: 999px; overflow: hidden; }\n  .bar::after { content: ''; display: block; height: 100%; width: var(--progress); background: hsl(var(--hue) 80% 45%); }\n  label { display: block; margin: 12px 0 4px; }\n<\u002Fstyle>\n<div class='swatch'><\u002Fdiv>\n<div class='bar'><\u002Fdiv>\n<label>Hue <input id='hue' type='range' min='0' max='360' value='210'><\u002Flabel>\n<label>Progress <input id='prog' type='range' min='0' max='100' value='40'><\u002Flabel>\n<p id='out'><\u002Fp>\n<script>\n  var root = document.documentElement;\n  var out = document.getElementById('out');\n  function show() { out.textContent = 'hue = ' + getComputedStyle(root).getPropertyValue('--hue') + ', progress = ' + getComputedStyle(root).getPropertyValue('--progress'); }\n  document.getElementById('hue').addEventListener('input', function (e) { root.style.setProperty('--hue', e.target.value); show(); });\n  document.getElementById('prog').addEventListener('input', function (e) { root.style.setProperty('--progress', e.target.value + '%'); show(); });\n  show();\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .ring {\n    width: 200px; height: 200px; border-radius: 50%;\n    background: conic-gradient(from var(--angle), #e76f51, #e9c46a, #2a9d8f, #264653, #e76f51);\n    animation: spin 4s linear infinite;\n  }\n  @keyframes spin { to { --angle: 360deg; } }\n  @media (prefers-reduced-motion: reduce) { .ring { animation: none; } }\n<\u002Fstyle>\n<p>The registered --angle variable can be animated smoothly.<\u002Fp>\n<div class='ring'><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const tokens = {\n  '--blue-600': '#0b5fff',\n  '--color-primary': 'var(--blue-600)',\n  '--space-3': '1rem',\n  '--radius': '12px'\n};\n\nObject.keys(tokens).forEach(function (name) {\n  console.log(name + ': ' + tokens[name] + ';');\n});\n\nconsole.log('Use it with: color: var(--color-primary, #0b5fff);');\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",[],[],[],8,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-variables-custom-properties","CSS Variables (Custom Properties): var(), Scope, @property","Learn CSS variables and custom properties: --name syntax, var() fallbacks, scope and inheritance, theming, JavaScript access, @property and design tokens with live examples.",[58,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123],{"id":59,"text":60,"level":12,"children":61},"css-variables-custom-properties-complete-guide","CSS Variables (Custom Properties): Complete Guide",[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-what-are-css-variables","1. What Are CSS Variables?",[],{"id":72,"text":73,"level":12,"children":74},"2-syntax-and-the-root-selector","2. Syntax and the :root Selector",[],{"id":76,"text":77,"level":12,"children":78},"3-the-var-function-and-fallback-values","3. The var() Function and Fallback Values",[],{"id":80,"text":81,"level":12,"children":82},"4-scope-and-inheritance","4. Scope and Inheritance",[],{"id":84,"text":85,"level":12,"children":86},"5-theming-with-variables","5. Theming with Variables",[],{"id":88,"text":89,"level":12,"children":90},"6-variables-and-calc","6. Variables and calc()",[],{"id":92,"text":93,"level":12,"children":94},"7-reading-and-writing-variables-with-javascript","7. Reading and Writing Variables with JavaScript",[],{"id":96,"text":97,"level":12,"children":98},"8-the-at-property-rule-registered-custom-properties","8. The @property Rule (Registered Custom Properties)",[],{"id":100,"text":101,"level":12,"children":102},"9-invalid-at-computed-value-time","9. Invalid at Computed-Value Time",[],{"id":104,"text":105,"level":12,"children":106},"10-limits-you-should-know","10. Limits You Should Know",[],{"id":108,"text":109,"level":12,"children":110},"11-design-tokens-and-component-apis","11. Design Tokens and Component APIs",[],{"id":112,"text":113,"level":12,"children":114},"12-performance-and-good-practice","12. Performance and Good Practice",[],{"id":116,"text":117,"level":12,"children":118},"13-accessibility-notes","13. Accessibility Notes",[],{"id":120,"text":121,"level":12,"children":122},"14-common-mistakes","14. Common Mistakes",[],{"id":124,"text":125,"level":12,"children":126},"key-takeaways","Key Takeaways",[],[128,132,135,138,141,144,147],{"id":129,"language":16,"code":130,"is_editable":131},488,"\u003Cstyle>\n  :root {\n    --brand: #0b5fff;\n    --radius: 12px;\n    --space: 16px;\n    --shadow: 0 6px 18px rgba(0, 0, 0, .15);\n  }\n  body { font: 18px system-ui, sans-serif; padding: var(--space); }\n  .card { padding: var(--space); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 6px solid var(--brand); max-width: 360px; }\n  .btn { background: var(--brand); color: #fff; border: 0; padding: 10px 18px; border-radius: var(--radius); }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\n  \u003Ch3>Global variables\u003C\u002Fh3>\n  \u003Cp>Change --brand in :root and both the border and the button update.\u003C\u002Fp>\n  \u003Cbutton class='btn'>Buy now\u003C\u002Fbutton>\n\u003C\u002Fdiv>",true,{"id":133,"language":16,"code":134,"is_editable":131},489,"\u003Cstyle>\n  :root { --accent: #2a9d8f; }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .tag { display: inline-block; padding: 6px 14px; margin: 4px; border-radius: 999px; color: #fff; background: var(--tag-bg, var(--accent)); }\n  .warning { --tag-bg: #e76f51; }\n  .info { --tag-bg: #264653; }\n  .missing { background: var(--not-defined, #8d99ae); }\n\u003C\u002Fstyle>\n\u003Cspan class='tag'>Default (uses --accent)\u003C\u002Fspan>\n\u003Cspan class='tag warning'>Local override\u003C\u002Fspan>\n\u003Cspan class='tag info'>Local override\u003C\u002Fspan>\n\u003Cspan class='tag missing'>Fallback value\u003C\u002Fspan>",{"id":136,"language":16,"code":137,"is_editable":131},490,"\u003Cstyle>\n  :root {\n    --bg: #ffffff; --text: #1b1b1f; --card: #f1f5f9; --primary: #0b5fff;\n  }\n  [data-theme='dark'] {\n    --bg: #12141a; --text: #eceff4; --card: #1e222b; --primary: #6ea8ff;\n  }\n  [data-theme='forest'] {\n    --bg: #f0f7f1; --text: #13321f; --card: #dcefe0; --primary: #1b7f4b;\n  }\n  body { margin: 0; padding: 20px; font: 18px system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }\n  .card { background: var(--card); padding: 16px; border-radius: 12px; max-width: 360px; }\n  button { background: var(--primary); color: #fff; border: 0; padding: 8px 14px; border-radius: 8px; margin-right: 6px; cursor: pointer; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\u003Ch3>Theme switcher\u003C\u002Fh3>\u003Cp>Only the variables change, no component rule is touched.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cp>\u003Cbutton data-t='light'>Light\u003C\u002Fbutton>\u003Cbutton data-t='dark'>Dark\u003C\u002Fbutton>\u003Cbutton data-t='forest'>Forest\u003C\u002Fbutton>\u003C\u002Fp>\n\u003Cscript>\n  document.querySelectorAll('button').forEach(function (b) {\n    b.addEventListener('click', function () {\n      document.documentElement.setAttribute('data-theme', b.dataset.t);\n    });\n  });\n\u003C\u002Fscript>",{"id":139,"language":16,"code":140,"is_editable":131},491,"\u003Cstyle>\n  :root { --space: 8px; --cols: 3; --gap: 12px; }\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .grid { display: flex; flex-wrap: wrap; gap: var(--gap); }\n  .item {\n    width: calc((100% - (var(--cols) - 1) * var(--gap)) \u002F var(--cols));\n    padding: calc(var(--space) * 2);\n    background: #8ecae6; box-sizing: border-box; border-radius: 8px;\n  }\n\u003C\u002Fstyle>\n\u003Cp>Change --cols to 2 or 4 and the layout recalculates.\u003C\u002Fp>\n\u003Cdiv class='grid'>\n  \u003Cdiv class='item'>1\u003C\u002Fdiv>\u003Cdiv class='item'>2\u003C\u002Fdiv>\u003Cdiv class='item'>3\u003C\u002Fdiv>\n  \u003Cdiv class='item'>4\u003C\u002Fdiv>\u003Cdiv class='item'>5\u003C\u002Fdiv>\u003Cdiv class='item'>6\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":142,"language":16,"code":143,"is_editable":131},492,"\u003Cstyle>\n  :root { --hue: 210; --progress: 40%; }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .swatch { height: 80px; border-radius: 12px; background: hsl(var(--hue) 80% 55%); margin-bottom: 12px; }\n  .bar { height: 14px; background: #ddd; border-radius: 999px; overflow: hidden; }\n  .bar::after { content: ''; display: block; height: 100%; width: var(--progress); background: hsl(var(--hue) 80% 45%); }\n  label { display: block; margin: 12px 0 4px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='swatch'>\u003C\u002Fdiv>\n\u003Cdiv class='bar'>\u003C\u002Fdiv>\n\u003Clabel>Hue \u003Cinput id='hue' type='range' min='0' max='360' value='210'>\u003C\u002Flabel>\n\u003Clabel>Progress \u003Cinput id='prog' type='range' min='0' max='100' value='40'>\u003C\u002Flabel>\n\u003Cp id='out'>\u003C\u002Fp>\n\u003Cscript>\n  var root = document.documentElement;\n  var out = document.getElementById('out');\n  function show() { out.textContent = 'hue = ' + getComputedStyle(root).getPropertyValue('--hue') + ', progress = ' + getComputedStyle(root).getPropertyValue('--progress'); }\n  document.getElementById('hue').addEventListener('input', function (e) { root.style.setProperty('--hue', e.target.value); show(); });\n  document.getElementById('prog').addEventListener('input', function (e) { root.style.setProperty('--progress', e.target.value + '%'); show(); });\n  show();\n\u003C\u002Fscript>",{"id":145,"language":16,"code":146,"is_editable":131},493,"\u003Cstyle>\n  @property --angle { syntax: '\u003Cangle>'; inherits: false; initial-value: 0deg; }\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .ring {\n    width: 200px; height: 200px; border-radius: 50%;\n    background: conic-gradient(from var(--angle), #e76f51, #e9c46a, #2a9d8f, #264653, #e76f51);\n    animation: spin 4s linear infinite;\n  }\n  @keyframes spin { to { --angle: 360deg; } }\n  @media (prefers-reduced-motion: reduce) { .ring { animation: none; } }\n\u003C\u002Fstyle>\n\u003Cp>The registered --angle variable can be animated smoothly.\u003C\u002Fp>\n\u003Cdiv class='ring'>\u003C\u002Fdiv>",{"id":148,"language":149,"code":150,"is_editable":131},494,"javascript","const tokens = {\n  '--blue-600': '#0b5fff',\n  '--color-primary': 'var(--blue-600)',\n  '--space-3': '1rem',\n  '--radius': '12px'\n};\n\nObject.keys(tokens).forEach(function (name) {\n  console.log(name + ': ' + tokens[name] + ';');\n});\n\nconsole.log('Use it with: color: var(--color-primary, #0b5fff);');",[152,159],{"id":153,"title":154,"slug":155,"prompt":156,"starter_code":157,"expected_output":158,"language":16,"order_index":23},181,"Build a Theme with Variables","build-theme-with-variables","Move every repeated color, radius and spacing value into CSS variables on :root. Then create a .dark class that redefines only the variables and makes the card dark.","\u003Cstyle>\n  .card { background: #ffffff; color: #1b1b1f; padding: 16px; border-radius: 12px; border: 1px solid #d0d7de; }\n  .card button { background: #0b5fff; color: #fff; border: 0; padding: 8px 14px; border-radius: 12px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\u003Ch3>Card\u003C\u002Fh3>\u003Cp>Theme me.\u003C\u002Fp>\u003Cbutton>Action\u003C\u002Fbutton>\u003C\u002Fdiv>","Colors, radius and spacing come from var(), the :root block holds the default values and .dark overrides only the variables",{"id":160,"title":161,"slug":162,"prompt":163,"starter_code":164,"expected_output":165,"language":16,"order_index":12},182,"Create a Button with a Variable API","button-with-variable-api","Create a .btn that reads --btn-bg, --btn-color and --btn-radius with fallback values. Then make a second button that only sets --btn-bg and --btn-radius inline or in a modifier class to look different.","\u003Cstyle>\n  .btn { border: 0; padding: 10px 18px; }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Default\u003C\u002Fbutton>\n\u003Cbutton class='btn'>Custom\u003C\u002Fbutton>","The .btn uses var(--btn-bg, fallback), var(--btn-color, fallback) and var(--btn-radius, fallback), and the second button only overrides the variables","2026-09-30T18:26:43+00:00",{"id":168,"slug":169,"title":170},122,"website-layout-basics","Website Layout Basics",{"id":172,"slug":173,"title":174},130,"math-functions-calc-min-max-clamp","Math Functions (calc, min, max, clamp)",{"data":176},[177,497],{"id":23,"name":15,"slug":178,"icon":5,"icon_url":5,"short_description":179,"meta_title":180,"meta_description":181,"og_image":182,"locale":183,"subcategories":184},"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",[185,210,245,269,345,379,393,421,445,461],{"id":23,"name":186,"slug":187,"order_index":23,"topics":188},"HTML Fundamentals & Setup","html-fundamentals-setup",[189,192,195,198,202,206],{"id":12,"title":190,"slug":191,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":23,"title":193,"slug":194,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":65,"title":196,"slug":197,"order_index":65,"cornerstone":52,"reading_time_minutes":12},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":199,"title":200,"slug":201,"order_index":199,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":203,"title":204,"slug":205,"order_index":203,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":207,"title":208,"slug":209,"order_index":207,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":211,"slug":212,"order_index":12,"topics":213},"Text & Content Basics","text-content-basics",[214,218,221,225,229,233,237,241],{"id":215,"title":216,"slug":217,"order_index":215,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":51,"title":219,"slug":220,"order_index":51,"cornerstone":52,"reading_time_minutes":12},"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":222,"title":223,"slug":224,"order_index":222,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":226,"title":227,"slug":228,"order_index":226,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":230,"title":231,"slug":232,"order_index":230,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":234,"title":235,"slug":236,"order_index":234,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":238,"title":239,"slug":240,"order_index":238,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":242,"title":243,"slug":244,"order_index":242,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":65,"name":246,"slug":247,"order_index":65,"topics":248},"Links, Media & Navigation","links-media-navigation",[249,253,257,261,265],{"id":250,"title":251,"slug":252,"order_index":250,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":254,"title":255,"slug":256,"order_index":254,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":258,"title":259,"slug":260,"order_index":258,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":262,"title":263,"slug":264,"order_index":262,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":266,"title":267,"slug":268,"order_index":266,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":199,"name":270,"slug":271,"order_index":199,"topics":272},"Structuring Content","structuring-content",[273,278,283,288,293,297,301,305,309,313,317,321,325,329,333,337,341],{"id":274,"title":275,"slug":276,"order_index":277,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":279,"title":280,"slug":281,"order_index":282,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":284,"title":285,"slug":286,"order_index":287,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":289,"title":290,"slug":291,"order_index":292,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":294,"title":295,"slug":296,"order_index":274,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":298,"title":299,"slug":300,"order_index":279,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":302,"title":303,"slug":304,"order_index":284,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":306,"title":307,"slug":308,"order_index":289,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":310,"title":311,"slug":312,"order_index":294,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":314,"title":315,"slug":316,"order_index":298,"cornerstone":52,"reading_time_minutes":65},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":318,"title":319,"slug":320,"order_index":302,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":322,"title":323,"slug":324,"order_index":306,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":326,"title":327,"slug":328,"order_index":310,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":330,"title":331,"slug":332,"order_index":330,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":334,"title":335,"slug":336,"order_index":334,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":338,"title":339,"slug":340,"order_index":338,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":342,"title":343,"slug":344,"order_index":342,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":215,"name":346,"slug":347,"order_index":203,"topics":348},"Forms & User Input","forms-user-input",[349,354,359,364,369,374],{"id":350,"title":351,"slug":352,"order_index":353,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":355,"title":356,"slug":357,"order_index":358,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":360,"title":361,"slug":362,"order_index":363,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":365,"title":366,"slug":367,"order_index":368,"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":370,"title":371,"slug":372,"order_index":373,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":375,"title":376,"slug":377,"order_index":378,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":51,"name":380,"slug":381,"order_index":207,"topics":382},"Graphics & Visuals","graphics-visuals",[383,388],{"id":384,"title":385,"slug":386,"order_index":387,"cornerstone":52,"reading_time_minutes":65},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":389,"title":390,"slug":391,"order_index":392,"cornerstone":52,"reading_time_minutes":65},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":222,"name":394,"slug":395,"order_index":215,"topics":396},"Multimedia","multimedia",[397,402,407,412,417],{"id":398,"title":399,"slug":400,"order_index":401,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":403,"title":404,"slug":405,"order_index":406,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":408,"title":409,"slug":410,"order_index":411,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":413,"title":414,"slug":415,"order_index":416,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":418,"title":419,"slug":420,"order_index":350,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":226,"name":422,"slug":423,"order_index":51,"topics":424},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[425,429,433,437,441],{"id":426,"title":427,"slug":428,"order_index":355,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":430,"title":431,"slug":432,"order_index":360,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":434,"title":435,"slug":436,"order_index":365,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":438,"title":439,"slug":440,"order_index":370,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":442,"title":443,"slug":444,"order_index":375,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":230,"name":446,"slug":447,"order_index":222,"topics":448},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[449,453,457],{"id":450,"title":451,"slug":452,"order_index":384,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":454,"title":455,"slug":456,"order_index":389,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":458,"title":459,"slug":460,"order_index":398,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":234,"name":462,"slug":463,"order_index":226,"topics":464},"Reference & Practice","reference-practice",[465,469,473,477,481,485,489,493],{"id":466,"title":467,"slug":468,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":470,"title":471,"slug":472,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":474,"title":475,"slug":476,"order_index":65,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":478,"title":479,"slug":480,"order_index":199,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":482,"title":483,"slug":484,"order_index":203,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":486,"title":487,"slug":488,"order_index":207,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":490,"title":491,"slug":492,"order_index":215,"cornerstone":52,"reading_time_minutes":65},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":494,"title":495,"slug":496,"order_index":51,"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":498,"meta_title":499,"meta_description":500,"og_image":5,"locale":183,"subcategories":501},"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.",[502,531,555,591,623,655,687,716,736,764],{"id":292,"name":503,"slug":504,"order_index":505,"topics":506},"UI Components","ui-components",0,[507,511,515,519,523,527],{"id":508,"title":509,"slug":510,"order_index":418,"cornerstone":52,"reading_time_minutes":207},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":512,"title":513,"slug":514,"order_index":426,"cornerstone":52,"reading_time_minutes":207},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":516,"title":517,"slug":518,"order_index":430,"cornerstone":52,"reading_time_minutes":215},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":520,"title":521,"slug":522,"order_index":434,"cornerstone":52,"reading_time_minutes":207},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":524,"title":525,"slug":526,"order_index":438,"cornerstone":52,"reading_time_minutes":207},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":528,"title":529,"slug":530,"order_index":442,"cornerstone":52,"reading_time_minutes":207},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":238,"name":532,"slug":533,"order_index":505,"topics":534},"CSS Fundamentals & Setup","css-fundamentals-setup",[535,539,543,547,551],{"id":536,"title":537,"slug":538,"order_index":23,"cornerstone":52,"reading_time_minutes":199},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":540,"title":541,"slug":542,"order_index":12,"cornerstone":52,"reading_time_minutes":199},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":544,"title":545,"slug":546,"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":548,"title":549,"slug":550,"order_index":199,"cornerstone":52,"reading_time_minutes":65},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":552,"title":553,"slug":554,"order_index":203,"cornerstone":52,"reading_time_minutes":203},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":242,"name":556,"slug":557,"order_index":505,"topics":558},"Selectors & the Cascade","selectors-the-cascade",[559,563,567,571,575,579,583,587],{"id":560,"title":561,"slug":562,"order_index":207,"cornerstone":52,"reading_time_minutes":199},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":564,"title":565,"slug":566,"order_index":215,"cornerstone":52,"reading_time_minutes":199},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":568,"title":569,"slug":570,"order_index":51,"cornerstone":52,"reading_time_minutes":199},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":572,"title":573,"slug":574,"order_index":222,"cornerstone":52,"reading_time_minutes":207},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":576,"title":577,"slug":578,"order_index":226,"cornerstone":52,"reading_time_minutes":203},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":580,"title":581,"slug":582,"order_index":230,"cornerstone":52,"reading_time_minutes":203},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":584,"title":585,"slug":586,"order_index":234,"cornerstone":52,"reading_time_minutes":199},93,"CSS Specificity Explained","css-specificity-explained",{"id":588,"title":589,"slug":590,"order_index":238,"cornerstone":52,"reading_time_minutes":203},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":250,"name":592,"slug":593,"order_index":505,"topics":594},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[595,599,603,607,611,615,619],{"id":596,"title":597,"slug":598,"order_index":242,"cornerstone":52,"reading_time_minutes":203},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":600,"title":601,"slug":602,"order_index":250,"cornerstone":52,"reading_time_minutes":199},96,"CSS Backgrounds","css-backgrounds",{"id":604,"title":605,"slug":606,"order_index":254,"cornerstone":52,"reading_time_minutes":203},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":608,"title":609,"slug":610,"order_index":258,"cornerstone":52,"reading_time_minutes":203},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":612,"title":613,"slug":614,"order_index":262,"cornerstone":52,"reading_time_minutes":207},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":616,"title":617,"slug":618,"order_index":266,"cornerstone":52,"reading_time_minutes":203},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":620,"title":621,"slug":622,"order_index":277,"cornerstone":52,"reading_time_minutes":207},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":254,"name":624,"slug":625,"order_index":505,"topics":626},"Box Model & Spacing","box-model-spacing",[627,631,635,639,643,647,651],{"id":628,"title":629,"slug":630,"order_index":282,"cornerstone":52,"reading_time_minutes":215},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":632,"title":633,"slug":634,"order_index":287,"cornerstone":52,"reading_time_minutes":215},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":636,"title":637,"slug":638,"order_index":292,"cornerstone":52,"reading_time_minutes":207},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":640,"title":641,"slug":642,"order_index":274,"cornerstone":52,"reading_time_minutes":222},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":644,"title":645,"slug":646,"order_index":279,"cornerstone":52,"reading_time_minutes":203},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":648,"title":649,"slug":650,"order_index":284,"cornerstone":52,"reading_time_minutes":215},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":652,"title":653,"slug":654,"order_index":289,"cornerstone":52,"reading_time_minutes":215},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":258,"name":656,"slug":657,"order_index":505,"topics":658},"Typography & Text","typography-text",[659,663,667,671,675,679,683],{"id":660,"title":661,"slug":662,"order_index":294,"cornerstone":52,"reading_time_minutes":215},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":664,"title":665,"slug":666,"order_index":298,"cornerstone":52,"reading_time_minutes":215},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":668,"title":669,"slug":670,"order_index":302,"cornerstone":52,"reading_time_minutes":215},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":672,"title":673,"slug":674,"order_index":306,"cornerstone":52,"reading_time_minutes":215},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":676,"title":677,"slug":678,"order_index":310,"cornerstone":52,"reading_time_minutes":51},113,"Styling Links","styling-links-css",{"id":680,"title":681,"slug":682,"order_index":330,"cornerstone":52,"reading_time_minutes":215},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":684,"title":685,"slug":686,"order_index":334,"cornerstone":52,"reading_time_minutes":226},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":262,"name":688,"slug":689,"order_index":505,"topics":690},"Display, Position & Layout Basics","display-position-layout-basics",[691,695,699,703,707,711,715],{"id":692,"title":693,"slug":694,"order_index":338,"cornerstone":52,"reading_time_minutes":215},116,"Display & Inline-block","display-and-inline-block",{"id":696,"title":697,"slug":698,"order_index":342,"cornerstone":52,"reading_time_minutes":207},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":700,"title":701,"slug":702,"order_index":353,"cornerstone":52,"reading_time_minutes":207},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":704,"title":705,"slug":706,"order_index":358,"cornerstone":52,"reading_time_minutes":203},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":708,"title":709,"slug":710,"order_index":363,"cornerstone":52,"reading_time_minutes":207},120,"Centering Techniques","centering-techniques",{"id":712,"title":713,"slug":714,"order_index":368,"cornerstone":52,"reading_time_minutes":215},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":168,"title":170,"slug":169,"order_index":373,"cornerstone":52,"reading_time_minutes":51},{"id":277,"name":43,"slug":44,"order_index":505,"topics":717},[718,719,720,724,728,732],{"id":37,"title":38,"slug":39,"order_index":378,"cornerstone":52,"reading_time_minutes":51},{"id":172,"title":174,"slug":173,"order_index":387,"cornerstone":52,"reading_time_minutes":51},{"id":721,"title":722,"slug":723,"order_index":392,"cornerstone":52,"reading_time_minutes":215},131,"Native CSS Nesting","native-css-nesting",{"id":725,"title":726,"slug":727,"order_index":401,"cornerstone":52,"reading_time_minutes":215},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":729,"title":730,"slug":731,"order_index":406,"cornerstone":52,"reading_time_minutes":222},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":733,"title":734,"slug":735,"order_index":411,"cornerstone":52,"reading_time_minutes":51},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":282,"name":737,"slug":738,"order_index":505,"topics":739},"Responsive Design","responsive-design",[740,744,748,752,756,760],{"id":741,"title":742,"slug":743,"order_index":416,"cornerstone":52,"reading_time_minutes":222},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":745,"title":746,"slug":747,"order_index":350,"cornerstone":52,"reading_time_minutes":51},136,"Media Queries","media-queries",{"id":749,"title":750,"slug":751,"order_index":355,"cornerstone":52,"reading_time_minutes":51},137,"Responsive Images & Video","responsive-images-and-video",{"id":753,"title":754,"slug":755,"order_index":360,"cornerstone":52,"reading_time_minutes":222},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":757,"title":758,"slug":759,"order_index":365,"cornerstone":52,"reading_time_minutes":222},139,"Container Queries","container-queries",{"id":761,"title":762,"slug":763,"order_index":370,"cornerstone":52,"reading_time_minutes":234},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":287,"name":765,"slug":766,"order_index":505,"topics":767},"Transitions & Animation","transitions-animation",[768,772,776,780,784,788,792],{"id":769,"title":770,"slug":771,"order_index":375,"cornerstone":52,"reading_time_minutes":203},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":773,"title":774,"slug":775,"order_index":384,"cornerstone":52,"reading_time_minutes":199},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":777,"title":778,"slug":779,"order_index":389,"cornerstone":52,"reading_time_minutes":203},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":781,"title":782,"slug":783,"order_index":398,"cornerstone":52,"reading_time_minutes":203},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":785,"title":786,"slug":787,"order_index":403,"cornerstone":52,"reading_time_minutes":203},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":789,"title":790,"slug":791,"order_index":408,"cornerstone":52,"reading_time_minutes":203},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":793,"title":794,"slug":795,"order_index":413,"cornerstone":52,"reading_time_minutes":207},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance"]