Add Content for advanced-features Section

[ajay-dhangar]

This task involves writing the full educational content for the entire Advanced Features section of the CSS Tutorial.
The goal is to create clear, modern, and beginner-friendly MDX lessons with explanations, examples, visuals, and demo code.

---

📁 Files to Complete

css/advanced-features/
│── css-variables.mdx
│── css-functions.mdx
│── css-layers.mdx
│── cascade-layers.mdx
│── specificity.mdx
│── inheritance.mdx
└── shadow-dom.mdx

---

📘 What This Module Should Cover

---

1️⃣ css-variables.mdx (CSS Custom Properties)

Topics to include:

• What CSS variables are and why they matter
• Syntax: --variable-name and var()
• Local vs global variables
• Using variables for themes (dark/light mode)
• Variables with fallback values
• Variables inside media queries and components
• Real-world examples and best practices
• Demo HTML+CSS files

---

2️⃣ css-functions.mdx (Built-in CSS Functions)

Topics to include:

• Overview of built-in CSS functions
• Color functions: rgb(), hsl(), color-mix()
• Math functions: calc(), min(), max(), clamp()
• Transform-related functions
• When and why to use functions
• Practical examples (responsive typography, layouts, spacing)
• Demo code with explanations

---

3️⃣ css-layers.mdx (CSS Layers)**

Topics to include:

• What CSS layers are
• How layering organizes the cascade
• Creating layers: @layer
• Layer ordering: @layer base, components, utilities;
• How frameworks like Tailwind use layers
• Avoiding specificity wars using layers
• Visual explanation of layer precedence
• Example project structure with layers

---

4️⃣ cascade-layers.mdx (Cascade & Layer Priority)

Topics to include:

• Relationship between cascade, layers, and specificity
• How layers override each other
• Using @layer to control conflicts
• Real UI examples (buttons, components)
• Explanation diagrams for cascade flow
• Best practices for scalable styling

---

5️⃣ specificity.mdx (CSS Specificity)

Topics to include:

• What specificity is and why it matters
• Specificity rules: inline, ID, class, element
• Specificity values
• How to calculate specificity
• Common pitfalls & how to avoid them
• Specificity debugging techniques
• Examples showing specificity conflicts
• Visual charts / diagrams

---

6️⃣ inheritance.mdx (CSS Inheritance)

Topics to include:

• What CSS inheritance is
• Properties that inherit by default
• How inherit, initial, unset, revert work
• Practical use cases
• Common mistakes
• UI examples showing inherited vs non-inherited properties

---

7️⃣ shadow-dom.mdx (Shadow DOM & Scoped CSS)

Topics to include:

• What the Shadow DOM is
• Why it exists (encapsulation)
• Shadow root styles
• :host, :host-context, ::slotted selectors
• Limitations of styling inside shadow trees
• Real examples: Web Components
• Best practices for encapsulated styling
• A simple custom element demo

---

📌 Requirements (Same as Main Issue #78)

1. Write clear and beginner-friendly explanations.
2. Include practical and working code snippets.
3. Provide optional demo HTML/CSS files under a code folder.
4. Add diagrams or visual suggestions where helpful.
5. Ensure progressive flow from basic → advanced.
6. Emphasize modern CSS techniques.

---

📦 Deliverables

• Fully written MDX files for all seven advanced topics.
• Demo files in this structure: (Example MDX Frontmatter Template (Copy for Each File))

---
title: "CSS Variables"
description: "Learn how to use CSS Custom Properties to create dynamic, reusable, and scalable styling across your projects."
keywords: [CSS variables, custom properties, var(), theme, reusable CSS]
tags: [CSS, advanced features, variables, custom properties]
sidebar_label: CSS Variables
---

<!-- Content goes here -->

[github-actions]

Hi @ajay-dhangar! Thanks for opening this issue. We appreciate your contribution to this open-source project. Your input is valuable and we aim to respond or assign your issue as soon as possible. Thanks again!