`, `p`, or `h1`).
+
+This property controls where the content sits horizontally within the box: left, right, center, or justified.
+
+
+
+
+## Syntax and Values
+
+The `text-align` property accepts several keyword values. You apply the property to the **parent container**, and it affects the inline content inside it.
+
+| Value | Description | Typical Use Case |
+| :--- | :--- | :--- |
+| **`left`** | Aligns text to the **left** edge of the container. This is the default setting for Left-to-Right (LTR) languages. | Standard body text. |
+| **`right`** | Aligns text to the **right** edge of the container. | Prices, dates, or right-to-left (RTL) languages. |
+| **`center`** | Centers the text line by line within the container. | Headings, titles, and captions. |
+| **`justify`** | Stretches the lines of text so that both the left and right edges are flush with the container. | Magazine or newspaper columns. |
+
+### Example
+
+To center a heading, you apply `text-align: center;` to the heading itself:
+
+```css title="styles.css"
+/* Centers the text inside the h1 container */
+h1 {
+ text-align: center;
+}
+
+/* Justifies the body content for a more formal look */
+.article-body {
+ text-align: justify;
+}
+```
+
+## Important Distinctions
+
+### 1. Affects Inline Content Only
+
+`text-align` only affects **inline** content. It will **not** move a block-level element itself (like an entire `
`).
+
+ * **To move a block-level element horizontally:** Use `margin: 0 auto;` (for centering) or layout properties like `float` or Flexbox.
+
+### 2. The `justify` Caveat
+
+When using `text-align: justify;`, the browser adds space between words to make lines flush. This is generally great for large blocks of text, but if the last line of a paragraph is very short, it can be stretched awkwardly across the entire width.
+
+### 3. Start vs. End (Internationalization)
+
+In modern CSS, `start` and `end` are often preferred over `left` and `right` for better support of different writing systems:
+
+ * **`text-align: start;`**: Aligns content to the reading side (left for English, right for Arabic).
+ * **`text-align: end;`**: Aligns content to the non-reading side (right for English, left for Arabic).
+
+Unless you are explicitly building an RTL layout, using `left`, `right`, and `center` is sufficient.
+
+
+
+
+### Interactive `text-align` Demo
+
+Use the live editor to change the `text-align` value in the CSS and see how the horizontal position of the text changes instantly.
+
+
\ No newline at end of file
diff --git a/docs/css/typography/text-style/text-decoration.mdx b/docs/css/typography/text-style/text-decoration.mdx
index e345ed2..1da0c74 100644
--- a/docs/css/typography/text-style/text-decoration.mdx
+++ b/docs/css/typography/text-style/text-decoration.mdx
@@ -1 +1,101 @@
-
\ No newline at end of file
+---
+title: "The text-decoration Property"
+description: "Learn how to use the CSS text-decoration property to add or remove visual lines on text, controlling their style, color, and thickness, especially for links."
+keywords: [CSS text-decoration, underline, overline, line-through, text-decoration shorthand, link styling, CodeHarborHub]
+tags: [CSS text-decoration, underline, overline, line-through, text-decoration shorthand, link styling]
+sidebar_label: "text-decoration"
+---
+
+The CSS **`text-decoration`** property is a powerful shorthand that allows you to add or remove various visual lines on text, such as underlines, overlines, and strikethroughs.
+
+Its most common use is to **remove the default underline** from anchor tags (`
`) and links.
+
+
+
+
+## The `text-decoration` Shorthand
+
+The `text-decoration` property can be used as a shorthand to define three aspects of the line: **line type**, **color**, and **style/thickness**.
+
+### The Syntax
+
+```css title="styles.css"
+/* Shorthand Order: [line] [color] [style] [thickness] */
+selector {
+ text-decoration: underline red wavy 2px;
+}
+```
+
+### 1. `text-decoration-line` (The Type)
+
+This is the most essential value and is often used alone.
+
+| Value | Description |
+| :--- | :--- |
+| **`none`** | **Removes all decoration.** Crucial for styling links (`a { text-decoration: none; }`). |
+| **`underline`** | Draws a line **under** the text. |
+| **`overline`** | Draws a line **over** the text. |
+| **`line-through`** | Draws a line **through** the text (strikethrough). |
+
+### 2. `text-decoration-color`
+
+Sets the color of the decoration line. By default, it inherits the text color set by the `color` property.
+
+```css title="styles.css"
+.danger-link {
+ color: red; /* Text color */
+ /* Line color is set explicitly to black, distinct from the red text */
+ text-decoration-color: black;
+}
+```
+
+### 3. `text-decoration-style`
+
+Sets the pattern of the line.
+
+| Value | Description |
+| :--- | :--- |
+| **`solid`** | A straight, unbroken line (the default). |
+| **`double`** | Two parallel lines. |
+| **`dotted`** | A series of dots. |
+| **`dashed`** | A series of short dashes. |
+| **`wavy`** | A wavy or squiggly line. |
+
+### 4. `text-decoration-thickness`
+
+Sets the width (thickness) of the line, using any valid length unit (e.g., `px`, `em`, `rem`).
+
+
+
+
+## Best Practice: Styling Links
+
+The default browser behavior is to render all anchor tags (``) with an underline. This is a long-standing web convention that tells users an element is clickable.
+
+A common design pattern is to **remove the default underline** and then add a subtle effect on hover.
+
+```css title="styles.css"
+/* 1. Remove the default underline */
+a {
+ text-decoration: none;
+ color: #007bff; /* Set the text color */
+}
+
+/* 2. Add a visual cue on hover */
+a:hover {
+ /* Use the shorthand to add a subtle, colored line only on hover */
+ text-decoration: underline 2px solid #007bff;
+ cursor: pointer;
+}
+```
+
+### Interactive `text-decoration` Demo
+
+Use the live editor to test different line types and styles using the shorthand property.
+
+
+
+**Challenge:** In the CSS, change the decoration to `underline #1e90ff wavy 3px` and hover over the text to see the different style and thickness.
\ No newline at end of file
diff --git a/docs/css/typography/text-style/text-shadow.mdx b/docs/css/typography/text-style/text-shadow.mdx
index e345ed2..9d6a85d 100644
--- a/docs/css/typography/text-style/text-shadow.mdx
+++ b/docs/css/typography/text-style/text-shadow.mdx
@@ -1 +1,105 @@
-
\ No newline at end of file
+---
+title: "The text-shadow Property"
+description: "Learn how to use the CSS text-shadow property to apply a subtle or dramatic shadow effect to text, controlling its offset, blur radius, and color."
+keywords: [CSS text-shadow, text effects, drop shadow, text blur, typography, visual depth, CodeHarborHub]
+tags: [CSS text-shadow, text effects, drop shadow, text blur, typography, visual depth]
+sidebar_label: "text-shadow"
+---
+
+The CSS **`text-shadow`** property allows you to add a shadow effect behind text. This is used to increase readability against complex backgrounds, add visual depth, or create unique decorative effects.
+
+The property is highly versatile, accepting multiple shadow definitions separated by commas.
+
+
+
+
+## The `text-shadow` Syntax
+
+A single shadow definition requires at least **three values**: the horizontal offset, the vertical offset, and the shadow color. A fourth, optional value defines the blur radius.
+
+### The Order of Values
+
+```css title="styles.css"
+/* text-shadow: [horizontal-offset] [vertical-offset] [blur-radius (optional)] [color]; */
+
+selector {
+ text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}
+```
+
+| Value | Required / Optional | Description |
+| :--- | :--- | :--- |
+| **Horizontal Offset** | Required | Positive value moves the shadow right. Negative moves it left. |
+| **Vertical Offset** | Required | Positive value moves the shadow down. Negative moves it up. |
+| **Blur Radius** | Optional | The size of the blur. A value of `0` means a sharp, solid shadow. Larger values mean a softer, more diffused shadow. |
+| **Color** | Required | The color of the shadow (can use HEX, RGB, or any color format). |
+
+### Example
+
+```css title="styles.css"
+h1 {
+ color: white; /* Text color */
+ /* Shadow: 3px right, 3px down, 2px blur, black */
+ text-shadow: 3px 3px 2px black;
+}
+```
+
+
+
+
+## Practical Applications
+
+### 1. Readability Enhancement (Subtle Shadow)
+
+A tiny, subtle shadow can greatly improve text readability, especially over images or busy patterns. Notice the low offset and high blur.
+
+```css title="styles.css"
+/* Soft, diffused shadow for contrast over images */
+.banner-text {
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
+}
+```
+
+### 2. Creating an Outline Effect (Sharp Shadow)
+
+By setting the blur radius to `0` and using offsets around the text, you can simulate an outline (though the standard `text-stroke` or `text-decoration` may be better for true outlines).
+
+```css title="styles.css"
+/* Text outline effect (no blur) */
+.outlined-text {
+ color: white;
+ text-shadow:
+ -1px -1px 0 #333, /* Top-Left */
+ 1px -1px 0 #333, /* Top-Right */
+ -1px 1px 0 #333, /* Bottom-Left */
+ 1px 1px 0 #333; /* Bottom-Right */
+}
+```
+
+### 3. Multiple Shadows (3D/Layered Effect)
+
+You can define multiple shadows by separating each set of values with a comma. The shadows are layered from front to back, meaning the first shadow listed is the one closest to the text.
+
+```css title="styles.css"
+/* Creates a layered, vintage 3D look */
+.retro-text {
+ text-shadow:
+ 2px 2px 0px #ff00ff, /* Front shadow (Magenta) */
+ 4px 4px 0px #00ffff, /* Middle shadow (Cyan) */
+ 6px 6px 0px #0000ff; /* Back shadow (Blue) */
+}
+```
+
+
+
+
+## Interactive `text-shadow` Demo
+
+Use the live editor to adjust the offset and blur values. Try adding a second or third shadow separated by commas to create a layered look.
+
+
+
+**Challenge:** Add a second shadow to the existing rule: `text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), 8px 8px 1px darkred;`. Notice how the dark red shadow appears farther back.
\ No newline at end of file
diff --git a/docs/css/typography/text-style/text-spacing.mdx b/docs/css/typography/text-style/text-spacing.mdx
index e345ed2..1e173a1 100644
--- a/docs/css/typography/text-style/text-spacing.mdx
+++ b/docs/css/typography/text-style/text-spacing.mdx
@@ -1 +1,96 @@
-
\ No newline at end of file
+---
+title: "Text Spacing Properties"
+description: "Learn how to use CSS properties like line-height, letter-spacing, and word-spacing to control the vertical and horizontal density of text for improved readability."
+keywords: [CSS line-height, letter-spacing, word-spacing, typography, leading, kerning, readability, CodeHarborHub]
+tags: [CSS line-height, letter-spacing, word-spacing, typography, leading, kerning, readability]
+sidebar_label: Text Spacing
+---
+
+Controlling the horizontal and vertical spacing of text is crucial for creating readable, aesthetically pleasing layouts. CSS provides three primary properties to manage this density: **`line-height`**, **`letter-spacing`**, and **`word-spacing`**.
+
+
+
+
+## 1. `line-height`: Vertical Spacing (Leading)
+
+The `line-height` property sets the vertical distance between the baselines of successive lines of text. In typography, this is often referred to as **leading**. Proper line height is essential for long-form readability.
+
+### Values and Best Practice
+
+| Value | Description | Best Practice |
+| :--- | :--- | :--- |
+| **`number` (Recommended)** | A unitless number (e.g., `1.5`). The final line height is the font size multiplied by this number. | **Use unitless values.** This value scales proportionally to the font size of the element, ensuring good accessibility. |
+| **`length`** | A fixed value (e.g., `24px`). | **Avoid.** Does not scale well if the font size changes. |
+| **`%`** | A percentage of the current font size (e.g., `150%`). | Acceptable, but less clear than a unitless number. |
+
+### Example
+
+A ratio of **1.4 to 1.6** is generally considered optimal for body text readability.
+
+```css title="styles.css"
+/* If font-size is 16px, the line-height will be 16px * 1.5 = 24px */
+body {
+ font-size: 16px;
+ line-height: 1.5;
+}
+```
+
+## 2. `letter-spacing`: Spacing Between Characters (Kerning)
+
+The `letter-spacing` property controls the horizontal space between individual characters (or glyphs). This is sometimes referred to as **tracking** or **kerning** (though kerning is technically more specific to individual letter pairs).
+
+### Use Cases
+
+ * **Aesthetics:** Used to open up space on uppercase headings.
+ * **Accessibility:** Can be used to slightly increase space for users with reading disabilities.
+ * **Negative Spacing:** Can be used to tighten very large text, though caution is required.
+
+### Example
+
+```css title="styles.css"
+/* Adds 2 pixels of extra space between every character in the heading */
+h1 {
+ letter-spacing: 2px;
+ text-transform: uppercase;
+}
+
+/* Reduces spacing on small-caps text */
+.caption {
+ letter-spacing: -0.5px;
+}
+```
+
+
+
+
+## 3. `word-spacing`: Spacing Between Words
+
+The `word-spacing` property controls the horizontal space between words. It is applied in addition to the default word space defined by the font.
+
+### Use Cases
+
+ * **Adjustment:** Can be used to slightly adjust word spacing in justified text to improve visual flow.
+ * **Clarity:** Rarely used for drastic changes, as large modifications can severely impact readability.
+
+### Example
+
+```css title="styles.css"
+/* Adds 5 pixels of extra space between every word */
+.intro {
+ word-spacing: 5px;
+}
+
+/* Decreases space slightly (can be useful for justified blocks) */
+.article-body {
+ word-spacing: -1px;
+}
+```
+
+## Interactive Spacing Demo
+
+Use the live editor to adjust the three spacing properties and see how they instantly affect the visual density of the text.
+
+
\ No newline at end of file
diff --git a/docs/css/typography/text-style/text-transform.mdx b/docs/css/typography/text-style/text-transform.mdx
index e345ed2..aff3982 100644
--- a/docs/css/typography/text-style/text-transform.mdx
+++ b/docs/css/typography/text-style/text-transform.mdx
@@ -1 +1,72 @@
-
\ No newline at end of file
+---
+title: "The text-transform Property"
+description: "Learn how to use the CSS text-transform property to visually change the capitalization of text (uppercase, lowercase, capitalize) without altering the original HTML content."
+keywords: [CSS text-transform, uppercase, lowercase, capitalize, text case, typography, CodeHarborHub]
+tags: [CSS text-transform, uppercase, lowercase, capitalize, text case, typography]
+sidebar_label: "text-transform"
+---
+
+The CSS **`text-transform`** property allows you to visually change the capitalization of text, overriding how it was originally typed in the HTML. This is a very useful tool for styling headings, captions, and links, ensuring consistency across your design without requiring content editors to manually change the case.
+
+
+
+
+## Syntax and Values
+
+The `text-transform` property accepts several straightforward keyword values.
+
+| Value | Description | Example Output |
+| :--- | :--- | :--- |
+| **`none`** | Displays the text exactly as it was written in the HTML (the default). | `This Is Normal Text` |
+| **`uppercase`** | Converts all letters to capital letters. | `THIS IS UPPERCASE TEXT` |
+| **`lowercase`** | Converts all letters to small letters. | `this is lowercase text` |
+| **`capitalize`** | Converts the first letter of every word to a capital letter. | `This Is Capitalized Text` |
+| **`full-width`** | Converts all characters (primarily for Asian languages) into full-width characters. | `Ｔｈｉｓ ｉｓ ｆｕｌｌ－ｗｉｄｔｈ` |
+
+### Example
+
+To force all navigation links to be uppercase, regardless of how they are typed in the CMS:
+
+```css title="styles.css"
+/* All link text will be displayed in capital letters */
+.main-nav a {
+ text-transform: uppercase;
+ letter-spacing: 1px; /* Uppercase often needs extra spacing */
+}
+
+/* Titles are stylized with initial capitalization */
+h2 {
+ text-transform: capitalize;
+}
+```
+
+
+
+
+## Best Practices and Considerations
+
+### Content vs. Presentation
+
+One of the great advantages of `text-transform` is that it maintains the **original case** in the HTML.
+
+ * **HTML (Content):** If the text is all lowercase, screen readers and search engines read it as lowercase.
+ * **CSS (Presentation):** The user **sees** it as uppercase.
+
+This separation is crucial: if a user copies and pastes text that is styled with `text-transform: uppercase;`, the text they paste will usually be the original, lowercase text from the HTML, which is often a better user experience.
+
+### Accessibility (Screen Readers)
+
+While `text-transform` visually changes the text, it generally does not interfere with how screen readers interpret the content, especially for `uppercase` and `lowercase`.
+
+### The `capitalize` Caveat
+
+The `capitalize` value only targets characters immediately following a non-letter character (like a space or hyphen). It does not automatically handle articles or prepositions (like "a," "the," "of") as a title case style might.
+
+### Interactive `text-transform` Demo
+
+Use the live editor to cycle through the main values: `none`, `uppercase`, `lowercase`, and `capitalize`. Observe how the appearance changes instantly.
+
+
\ No newline at end of file
diff --git a/docs/css/typography/text-style/word-wrap.mdx b/docs/css/typography/text-style/word-wrap.mdx
index e345ed2..3731da7 100644
--- a/docs/css/typography/text-style/word-wrap.mdx
+++ b/docs/css/typography/text-style/word-wrap.mdx
@@ -1 +1,67 @@
-
\ No newline at end of file
+---
+title: "The overflow-wrap Property"
+description: "Learn how to use the CSS overflow-wrap property to control whether the browser can break words to prevent content from overflowing its container."
+keywords: [CSS overflow-wrap, word-wrap, line breaking, overflow, wrapping long words, text style, CodeHarborHub]
+tags: [CSS overflow-wrap, word-wrap, line breaking, overflow, wrapping long words, text style]
+sidebar_label: "overflow-wrap"
+---
+
+The CSS **`overflow-wrap`** property controls how the browser handles a word that is too long to fit on a single line within its container. By default, the browser tries to keep a whole word on one line, which can sometimes cause the word to extend, or **overflow**, the container boundaries.
+
+This property tells the browser when it is acceptable to break a long, unbroken string of characters (like a long URL or a technical hash) to maintain the layout.
+
+
+
+
+## Syntax and Values
+
+The `overflow-wrap` property accepts two main keyword values:
+
+| Value | Description | Behavior |
+| :--- | :--- | :--- |
+| **`normal`** | This is the default. Words will only break at normal breaking points (like spaces or hyphens). If a single word is too long, it will **overflow** the container. | **Overflows** |
+| **`break-word`** | If an unbroken word is too long to fit on its current line, the browser will force a line break, causing the word itself to **split** at an arbitrary point to fit within the container. | **Breaks to Fit** |
+
+### Example
+
+Let's assume a container is $100\text{px}$ wide, and a word is $150\text{px}$ long.
+
+```css title="styles.css
+/* Container CSS */
+.log-box {
+ width: 100px;
+ border: 1px solid red;
+}
+
+/* 1. Default behavior (overflows) */
+.log-box-1 {
+ overflow-wrap: normal;
+}
+
+/* 2. Forces a break (stays within bounds) */
+.log-box-2 {
+ overflow-wrap: break-word;
+}
+```
+
+## Historical Note: `word-wrap`
+
+The property was originally introduced in CSS with the name **`word-wrap`**. It was later standardized in CSS3 and renamed to **`overflow-wrap`** to better reflect its function (managing overflow).
+
+:::info Use the Standard Name
+While all modern browsers support the `word-wrap` property as a legacy alias, it is considered best practice to use the standardized name: **`overflow-wrap`**.
+:::
+
+
+
+
+### Interactive `overflow-wrap` Demo
+
+Use the live editor to change the value of `overflow-wrap` in the CSS. Observe how the long, unbroken URL reacts when it can't fit in the narrow container.
+
+
+
+**Challenge:** Set `overflow-wrap: normal;` and notice the horizontal scrollbar appear or the text push outside the container. Then, change it to `break-word;` and see the text snap inside the container boundaries.
\ No newline at end of file
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 4143431..0c3db4f 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -346,13 +346,13 @@ const config = {
themes: ["@docusaurus/theme-mermaid", "@docusaurus/theme-live-codeblock"],
plugins: [
- [
- "vercel-analytics",
- {
- debug: true,
- mode: "auto",
- },
- ],
+ // [
+ // "vercel-analytics",
+ // {
+ // debug: true,
+ // mode: "auto",
+ // },
+ // ],
[
"@docusaurus/plugin-google-tag-manager",
{