diff --git a/docs/css/basics/cascading-order.mdx b/docs/css/basics/cascading-order.mdx
index f488562..eb0706a 100644
--- a/docs/css/basics/cascading-order.mdx
+++ b/docs/css/basics/cascading-order.mdx
@@ -13,6 +13,9 @@ The browser doesn't guess; it uses a strict set of rules known as the **Cascade*
 2.  **Specificity:** How detailed is the selector?
 3.  **Inheritance:** Does the element automatically get its parent's style?
 
+<AdsComponent />
+<br />
+
 ## 1. The Cascade: Order and Source
 
 The **Cascade** is the primary system for layering styles. It decides the initial winner based on the origin and order of the stylesheet.
@@ -70,6 +73,9 @@ Let's compare two conflicting selectors:
 Never use Inline Styles and try to reserve **ID selectors** (`#`) for JavaScript targeting rather than styling, as their high specificity makes CSS harder to override and maintain.
 :::
 
+<AdsComponent />
+<br />
+
 ## The Power of `!important`
 
 The `!important` keyword is the nuclear option of CSS. When added to a declaration, it instantly makes that style rule **override all other rules**, regardless of specificity.
@@ -130,6 +136,9 @@ Properties related to the **Box Model** and **Layout** do **not** inherit:
 
 The browser applies the `font-family` to the `<p>` elements, but since `border` is not inherited, the `<p>` tags will not have a border unless one is specifically declared for them.
 
+<AdsComponent />
+<br />
+
 ## Interactive Cascade Order Demo
 
 This interactive example shows how **Specificity** (ID vs. Class) and **Source Order** (last rule wins) determine the final style.
diff --git a/docs/css/basics/external.mdx b/docs/css/basics/external.mdx
index b80ff36..d7ea382 100644
--- a/docs/css/basics/external.mdx
+++ b/docs/css/basics/external.mdx
@@ -9,6 +9,9 @@ You've explored **Inline** (least scalable) and **Internal** (single-page only)
 
 External stylesheets are CSS rules saved in a **separate file** (usually named `style.css` or similar) and then connected to the HTML document using the `<link>` tag.
 
+<AdsComponent />
+<br />
+
 ## How to Implement External Styles
 
 This method achieves true **separation of concerns** by keeping your presentation code entirely separate from your structural HTML code.
@@ -107,7 +110,10 @@ Now that you know the three ways to add styles, let's briefly look at the order
 
 The Cascade is more complex, involving **Specificity** (which we'll cover in a future lesson), but generally, a style defined closer to the HTML element (inline) overrides a style defined further away (external).
 
-## Summary of CSS Methods
+<AdsComponent />
+<br />
+
+:::note Summary of CSS Methods
 
 | Method | Where is the Style? | Multi-Page Reuse? | Best for? |
 | :--- | :--- | :--- | :--- |
@@ -115,6 +121,8 @@ The Cascade is more complex, involving **Specificity** (which we'll cover in a f
 | **Internal** | Inside the `<style>` tag in the `<head>`. | No (Requires Copy/Paste) | Single, standalone demos or test pages. |
 | **External** | In a separate linked `.css` file. | Yes | **All modern, multi-page websites.** |
 
+:::
+
 ### Interactive External Styles Demo
 
 Use the live editor to change the styles and watch the change below.
diff --git a/docs/css/basics/inline.mdx b/docs/css/basics/inline.mdx
index 0ca6ebe..acab762 100644
--- a/docs/css/basics/inline.mdx
+++ b/docs/css/basics/inline.mdx
@@ -9,6 +9,10 @@ You've learned that CSS is how we add style. The next question is: **where do we
 
 The easiest, fastest, and most immediate way to apply a style is by using **Inline Styles**. This method involves writing CSS rules directly inside the HTML element you want to style using the **`style` attribute**.
 
+<AdsComponent />
+<br />
+
+
 ## How to Write Inline Styles
 
 Inline styles are written directly within the starting tag of any HTML element.
@@ -74,6 +78,9 @@ Inline styles completely violate the golden rule of web development: **Separatio
 * **Performance:** The browser has to read and render the style for every single tag, which can slow down page rendering compared to using an external stylesheet.
 * **No Advanced CSS:** You cannot use powerful CSS features like **Media Queries** (for responsiveness), **Animations**, or complex selectors with inline styles.
 
+<AdsComponent />
+<br />
+
 ## When Should I Use Inline Styles?
 
 :::tip Best Practice
diff --git a/docs/css/basics/internal.mdx b/docs/css/basics/internal.mdx
index c0585ea..5cb4de1 100644
--- a/docs/css/basics/internal.mdx
+++ b/docs/css/basics/internal.mdx
@@ -9,6 +9,9 @@ In the previous lesson, we learned about **Inline Styles**, which put CSS direct
 
 The next step up is using an **Internal Stylesheet**, also known as **Embedded CSS**. This method keeps the style code in one central location within the same HTML document, offering better organization than inline styles.
 
+<AdsComponent />
+<br />
+
 ## How to Implement Internal Styles
 
 Internal Stylesheets are created by placing the CSS rules inside a special HTML element: the **`<style>` tag**.
@@ -66,9 +69,12 @@ The biggest drawback is **lack of reusability across multiple documents**. If yo
 
 :::
 
-  * **No Caching:** Because the CSS is embedded within the HTML file, the browser cannot cache the stylesheet separately. This means the styles have to be re-downloaded every time a user visits a new page.
-  * **Bloated HTML:** Adding a lot of CSS code directly into the `<head>` significantly increases the size of the HTML file, which can slightly slow down the initial load time.
-  * **Maintenance Overhead:** Updating a global style requires editing every single HTML file on your site.
+* **No Caching:** Because the CSS is embedded within the HTML file, the browser cannot cache the stylesheet separately. This means the styles have to be re-downloaded every time a user visits a new page.
+* **Bloated HTML:** Adding a lot of CSS code directly into the `<head>` significantly increases the size of the HTML file, which can slightly slow down the initial load time.
+* **Maintenance Overhead:** Updating a global style requires editing every single HTML file on your site.
+
+<AdsComponent />
+<br />
 
 ## When is Internal Styling Appropriate?
 
diff --git a/docs/css/introduction.mdx b/docs/css/introduction.mdx
index f15141b..5dd0ffa 100644
--- a/docs/css/introduction.mdx
+++ b/docs/css/introduction.mdx
@@ -10,6 +10,9 @@ import thumbnail from '/img/tutorials/css/frontend-trinity-analogy.png';
 
 CSS (**Cascading Style Sheets**) is the language that brings **style**, **color**, and **life** to web pages. If you can think of **HTML as the basic structure** (like the walls and beams of a house), then **CSS is the interior designer** it defines **how everything looks and feels**.
 
+<AdsComponent />
+<br />
+
 ## What Exactly *Is* CSS?
 
 CSS is a **stylesheet language** used to describe the **presentation** of HTML documents. It's the magic ingredient that turns a boring text document into a beautiful, engaging user interface.
@@ -77,6 +80,9 @@ This paragraph text is styled using the ruleset above!
 </div>
 </BrowserWindow>
 
+<AdsComponent />
+<br />
+
 ## What You’ll Master in this Tutorial
 
 This CodeHarborHub CSS series is designed to take you from knowing nothing about styling to building professional, responsive layouts.
diff --git a/docs/css/syntax-basics/comments.mdx b/docs/css/syntax-basics/comments.mdx
index e345ed2..bbf3bbe 100644
--- a/docs/css/syntax-basics/comments.mdx
+++ b/docs/css/syntax-basics/comments.mdx
@@ -1 +1,113 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: Comments in CSS
+description: "Learn how to use single-line and multi-line comments in CSS to annotate your code, improve readability, and temporarily disable styles."
+keywords: [CSS Comments, CSS Syntax, Code Annotation, CSS Best Practices, CodeHarborHub]
+sidebar_label: Comments
+---
+
+You've learned the structure of a CSS ruleset. Now, let's talk about the essential tool for any good developer: **comments**.
+
+Comments are lines of text that the browser completely ignores. They serve a crucial purpose: to make your code understandable to yourself (when you return to it months later) and to other developers.
+
+<AdsComponent />
+<br />
+
+## The CSS Comment Syntax
+
+Unlike HTML (which uses `<!-- ... -->`) or JavaScript (which uses `//` or `/**/`), CSS only uses one syntax for commenting.
+
+### Single Syntax: Slash-Asterisk (`/* ... */`)
+
+The syntax for comments in CSS starts with a forward slash followed by an asterisk (`/*`) and ends with an asterisk followed by a forward slash (`*/`).
+
+<Tabs>
+<TabItem value="single" label="Single Line Comment">
+
+```css
+/* This is a simple comment that explains the rule below. */
+body {
+  font-family: 'Helvetica Neue', sans-serif;
+}
+```
+
+</TabItem>
+<TabItem value="multi" label="Multi-Line Comment">
+
+```css
+/*
+  =====================================
+  This is a large, multi-line comment.
+  We use this for section headers 
+  or complex explanations.
+  =====================================
+*/
+.main-layout {
+  display: flex;
+}
+```
+
+</TabItem>
+</Tabs>
+
+### The Key Rule
+
+Regardless of whether your comment spans one line or ten, you **must** use the `/*` and `*/` delimiters. You cannot use the double-slash (`//`) syntax in standard CSS.
+
+<AdsComponent />
+<br />
+
+## Why Comments are Crucial
+
+Good comments are a sign of professional, maintainable code. They help in two primary ways: **Documentation** and **Debugging**.
+
+### 1. Code Documentation
+
+Use comments to explain the *why* behind your code, not just the *what*.
+
+| Example of Good Commenting | Purpose |
+| :--- | :--- |
+| `/* FIX: Added !important here to override third-party library 'reset.css' */` | Explains *why* you used an unconventional/dangerous feature. |
+| `/* --- 2.0 Typography Styles --- */` | Provides a clear structure and navigation guide for your large stylesheet. |
+| `/* Targets the first button in the navigation bar only */` | Clarifies the intent of a complex or specific selector. |
+
+### 2. Debugging and Temporarily Disabling Code
+
+Comments are a perfect tool for quickly testing and fixing issues. If you suspect a specific block of CSS is causing a layout error, you can instantly disable it by surrounding it with comment tags, without deleting the code.
+
+<Tabs>
+<TabItem value="broken" label="Before Commenting (Bug)">
+
+```css
+.sidebar {
+  width: 250px;
+  /* This line below is causing the layout to break! */
+  float: left;
+  background-color: lightgrey;
+}
+```
+
+</TabItem>
+<TabItem value="fixed" label="After Commenting (Testing)">
+
+```css
+.sidebar {
+  width: 250px;
+  /* float: left; <-- Disabled for testing */
+  background-color: lightgrey;
+}
+```
+
+</TabItem>
+</Tabs>
+
+<AdsComponent />
+<br />
+
+### Interactive Commenting Demo
+
+Use the live editor to comment out the `background-color` and `padding` rules. See how the browser stops applying those styles instantly!
+
+<CodePenEmbed 
+  title="Interactive Declaration Demo"
+  penId="wBGWeBb"
+/>
\ No newline at end of file
diff --git a/docs/css/syntax-basics/rules/declaration.mdx b/docs/css/syntax-basics/rules/declaration.mdx
index e345ed2..0ccdc07 100644
--- a/docs/css/syntax-basics/rules/declaration.mdx
+++ b/docs/css/syntax-basics/rules/declaration.mdx
@@ -1 +1,113 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The CSS Declaration
+description: "Learn how the CSS Declaration is formed by combining a property and a value, and how semicolons are used to separate multiple declarations within a ruleset."
+keywords: [CSS Declaration, Ruleset Structure, CSS Syntax, Semicolon in CSS, CodeHarborHub]
+sidebar_label: Declaration
+---
+
+We've covered the **Selector** (who to target) and the **Property/Value** pair (what and how to change it). Now we bring them together to form the complete instruction block: the **CSS Declaration**.
+
+A declaration is the final, complete command that tells the browser exactly one thing to do.
+
+<AdsComponent />
+<br />
+
+## Anatomy of a Declaration
+
+A single CSS declaration is a complete statement that always consists of three parts, in this exact order:
+
+1.  The **Property**
+2.  The **Colon** separator (`:`)
+3.  The **Value**
+4.  The **Semicolon** terminator (`;`)
+
+### The Syntax
+
+```css title="Declaration Syntax"
+property: value;
+```
+
+### Example
+
+In the ruleset below, everything inside the curly braces is the **Declaration Block**, and each line ending with a semicolon is a separate **Declaration**:
+
+```css title="styles.css"
+p {
+  color: midnightblue; /* <-- DECLARATION 1 */
+  font-size: 18px;     /* <-- DECLARATION 2 */
+  line-height: 1.5;    /* <-- DECLARATION 3 */
+}
+```
+
+## The Critical Role of the Semicolon (`;`)
+
+The semicolon is perhaps the most overlooked, yet most essential, part of the declaration syntax.
+
+### Semicolon as a Separator
+
+The semicolon acts as a **separator** between individual declarations within the curly braces (`{...}`). It tells the browser: "The previous instruction is finished; now look for the next instruction."
+
+### Why You Need It
+
+If you forget the semicolon, the browser treats the end of the first value and the start of the next property as a single, invalid declaration, causing all subsequent styles in that ruleset to fail.
+
+<Tabs>
+<TabItem value="broken" label="Broken Code">
+
+```css
+.card {
+  /* No semicolon after 'white'! The browser fails here. */
+  background-color: white 
+  padding: 20px; 
+  border: 1px solid gray; /* All these styles are ignored! */
+}
+```
+
+</TabItem>
+<TabItem value="correct" label="Correct Code">
+
+```css
+.card {
+  /* Semicolon separates the declaration! */
+  background-color: white; 
+  padding: 20px; 
+  border: 1px solid gray; 
+}
+```
+
+</TabItem>
+</Tabs>
+
+<AdsComponent />
+<br />
+
+### The Last Semicolon
+
+The semicolon on the **very last declaration** (the one just before the closing curly brace `}`) is technically optional. However, it is considered **best practice** to always include it.
+
+:::tip Best Practice: Always Include the Semicolon
+Always include the semicolon on the last line. This prevents syntax errors when you later add a new declaration below it, or when your code is automatically processed and minified by tools.
+:::
+
+## Review: The Complete CSS Ruleset
+
+We can now put all three components together to form the fundamental unit of CSS: the **Ruleset**.
+
+| Ruleset Component | Example | Description |
+| :--- | :--- | :--- |
+| **Selector** | `h3` | Who is being styled? |
+| **Declaration Block** | `{...}` | Contains all the styles for the selector. |
+| **Declaration** | `color: red;` | The complete instruction. |
+| **Property** | `color` | The attribute being changed. |
+| **Value** | `red` | The new setting for the attribute. |
+| **Separator** | `:` | Separates Property and Value. |
+| **Terminator** | `;` | Separates Declarations. |
+
+## Interactive Declaration Demo
+
+Use the live editor to break the syntax by removing the semicolon or the colon. See how a tiny syntax mistake causes the entire ruleset to fail!
+
+<CodePenEmbed 
+  title="Interactive Declaration Demo"
+  penId="RNaRVWV"
+/>
\ No newline at end of file
diff --git a/docs/css/syntax-basics/rules/properties-and-values.mdx b/docs/css/syntax-basics/rules/properties-and-values.mdx
index e345ed2..4dd4680 100644
--- a/docs/css/syntax-basics/rules/properties-and-values.mdx
+++ b/docs/css/syntax-basics/rules/properties-and-values.mdx
@@ -1 +1,117 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: CSS Properties and Values
+description: "Learn the relationship between CSS properties and their assigned values, forming the style declarations within a ruleset."
+keywords: [CSS Property, CSS Value, Style Declaration, CSS Syntax, CodeHarborHub]
+sidebar_label: Properties and Values
+---
+
+Once the **Selector** has chosen the target HTML element, the **CSS Declaration Block** defines *how* that element should look. This block is composed entirely of one or more **Declarations**, and every declaration is a simple pair: a **Property** and a **Value**.
+
+<AdsComponent />
+<br />
+
+## The Declaration Structure
+
+A **Declaration** is the core instruction in CSS. It always follows this format:
+
+```css title="This is a single CSS Declaration"
+property: value;
+```
+
+  * The **Property** is separated from the **Value** by a **colon (`:`)**.
+  * The declaration is always terminated by a **semicolon (`;`)**.
+
+In a full ruleset, multiple declarations are wrapped in curly braces (`{ }`):
+
+```css title="style.css"
+selector {
+  property-1: value-1; /* Declaration 1 */
+  property-2: value-2; /* Declaration 2 */
+  property-3: value-3; /* Declaration 3 - Semicolon is optional on the last one, but recommended! */
+}
+```
+
+## 1. The CSS Property
+
+The **Property** is the **what** you want to change about the selected element. It's a key name that identifies a specific styling feature.
+
+| Property Category | Examples | Purpose |
+| :--- | :--- | :--- |
+| **Color** | `color`, `background-color`, `border-color` | Changes the color of text, backgrounds, or borders. |
+| **Layout** | `display`, `position`, `width`, `height` | Controls how elements are placed on the page and their dimensions. |
+| **Typography** | `font-family`, `font-size`, `line-height` | Defines text appearance. |
+| **Box Model** | `margin`, `padding`, `border` | Controls the space around and inside an element. |
+
+:::info Naming Convention
+CSS properties are always written in **kebab-case** (lowercase words separated by hyphens), such as `background-color` and `font-size`. This is a strict convention you must follow.
+:::
+
+## 2. The CSS Value
+
+The **Value** is the **how** the property should be changed. It’s the specific setting or configuration you are assigning to the property.
+
+Values can take many forms, often requiring specific units, keywords, or functions:
+
+### Common Value Types
+
+| Value Type | Description | Example Property & Value |
+| :--- | :--- | :--- |
+| **Keyword** | A predefined English word. | `color: red;`, `display: block;`, `font-style: italic;` |
+| **Length Unit** | A number followed by a unit of measurement. | `font-size: 16px;`, `margin: 2em;`, `width: 50%;` |
+| **Color Model** | Codes for defining colors. | `background-color: #3498db;`, `color: rgb(255, 0, 0);` |
+| **Function** | A rule that calculates or generates a value. | `transform: rotate(45deg);`, `width: calc(100% - 20px);` |
+| **URL** | A path to an external resource, like an image. | `background-image: url('image.jpg');` |
+
+## Interactive Property and Value Demo
+
+In the live editor, try changing the property names or values for the selected `.example-box`.
+
+<CodePenEmbed 
+  title="Interactive Property and Value Demo"
+  penId="jEqqvgQ"
+/>
+
+**Try making these changes in the CSS panel and see the result:**
+
+  * Change `background-color` to `lightgreen`.
+  * Change `padding` to `50px`.
+  * Change `color` to `darkslategrey`.
+
+<AdsComponent />
+<br />
+
+
+## 3. Shorthand Properties
+
+Some CSS properties are actually **shorthand** for multiple, related properties. Using shorthand is efficient, reduces code, and can make your stylesheets much cleaner.
+
+For example, styling a border requires four properties: `border-width`, `border-style`, `border-color`, and `border-radius`.
+
+<Tabs>
+<TabItem value="longhand" label="Longhand (Verbose)">
+
+```css
+/* Four separate declarations needed */
+.box {
+  border-width: 2px;
+  border-style: solid;
+  border-color: black;
+  border-radius: 10px;
+}
+```
+
+</TabItem>
+<TabItem value="shorthand" label="Shorthand (Efficient)">
+
+```css
+/* One declaration handles width, style, and color */
+.box {
+  border: 2px solid black; 
+  border-radius: 10px;
+}
+```
+
+</TabItem>
+</Tabs>
+
+Other important shorthand properties include: `font`, `background`, `margin`, and `padding`. We will explore these in detail in their respective sections.
\ No newline at end of file
diff --git a/docs/css/syntax-basics/rules/selector.mdx b/docs/css/syntax-basics/rules/selector.mdx
index e345ed2..ada5840 100644
--- a/docs/css/syntax-basics/rules/selector.mdx
+++ b/docs/css/syntax-basics/rules/selector.mdx
@@ -1 +1,76 @@
-<ComingSoon />
\ No newline at end of file
+---
+title: The CSS Selector
+description: "Understand the fundamental role of the Selector in a CSS Ruleset—how it targets specific HTML elements to apply styles."
+keywords: [CSS Selector, Ruleset Structure, CSS Syntax, Targeting HTML, CodeHarborHub]
+sidebar_label: Selector
+---
+
+The CSS **selector** is the most crucial part of any CSS ruleset. Its job is simple: to identify **which specific HTML element(s)** on the page the declared styles should be applied to.
+
+Think of the selector as the **name** or **address** of the element you want to style.
+
+<AdsComponent />
+<br />
+
+## The CSS Ruleset Structure
+
+Every piece of CSS is organized into a **ruleset**. The ruleset begins with the selector, followed by a **declaration block** (the curly braces `{}`) containing the actual styles.
+
+```css title="styles.css"
+/* This is a complete CSS Ruleset */
+selector {
+  property: value; 
+}
+```
+
+In this structure:
+
+  * **Selector:** Targets the element (e.g., `h1`, `.card`, `#logo`).
+  * **Declaration Block:** Holds all the style declarations for that selector.
+  * **Declaration:** The specific style instruction (a property and a value).
+
+### Example Ruleset Breakdown
+
+In the example below, the word `h2` is the selector.
+
+```css title="styles.css"
+/* h2 is the selector */
+h2 {
+  color: midnightblue;
+  font-size: 24px;
+}
+```
+
+This ruleset tells the browser: "Find all the `<h2>` tags on the page and make their text color `midnightblue` with a `24px` font size."
+
+## Types of Selectors
+
+There are many ways to select an element, ranging from broad targeting (selecting all elements) to extremely specific targeting (selecting a unique element). In later lessons, we will dive deep into each one, but here are the foundational types:
+
+| Selector Type | Example | Targets | Specificity Impact |
+| :--- | :--- | :--- | :--- |
+| **Element** | `p`, `div`, `a` | All instances of that HTML tag. | Low (Score: 1) |
+| **Class** | `.highlight`, `.button` | All elements with the matching `class` attribute. | Medium (Score: 10) |
+| **ID** | `#header`, `#main-content` | The *one* unique element with the matching `id` attribute. | High (Score: 100) |
+| **Universal** | `*` | **Every** element on the page. | Very Low (Score: 0) |
+
+## Why the Selector is So Important
+
+The selector isn't just about applying a style; it's about control and management:
+
+1.  **Isolation:** A good selector ensures you only apply styles to the intended elements, avoiding accidental changes across your site.
+2.  **Maintainability:** Using common selectors like classes (`.class-name`) means you can change the visual style of dozens of elements by modifying a single CSS ruleset.
+3.  **Performance:** Efficient, well-written selectors (like a simple class selector) are faster for the browser to process than overly complex or deeply nested selectors.
+4.  **Specificity Control:** As you learned in the Cascade lesson, the type of selector you choose directly affects its **Specificity score**, determining whether it will override or be overridden by other styles.
+
+<AdsComponent />
+<br />
+
+## Interactive Selector Demo
+
+In the live editor, change the selector from `h2` to `p` or to the class `.info-box` and watch which elements get styled.
+
+<CodePenEmbed 
+  title="Interactive Selector Demo"
+  penId="GgZZXBm"
+/>
\ No newline at end of file
