Merge pull request #84 from codeharborhub/dev-1

ajay-dhangar · web-flow · commit b7545e26d39c · 2025-11-15T09:29:26.000+05:30
Done Syntax Basics
diff --git 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
@@ -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,14 +110,19 @@ 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? |
 | :--- | :--- | :--- | :--- |
 | **Inline** | Inside the element's `style` attribute. | No | Single element, quick debugs, HTML emails. |
 | **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
@@ -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
@@ -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
@@ -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
@@ -1 +1,113 @@
-<ComingSoon />
+---
+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"
+/>
diff --git a/docs/css/syntax-basics/rules/declaration.mdx b/docs/css/syntax-basics/rules/declaration.mdx
@@ -1 +1,113 @@
-<ComingSoon />
+---
+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"
+/>
diff --git a/docs/css/syntax-basics/rules/properties-and-values.mdx b/docs/css/syntax-basics/rules/properties-and-values.mdx
diff --git a/docs/css/syntax-basics/rules/selector.mdx b/docs/css/syntax-basics/rules/selector.mdx
