Merge pull request #105 from codeharborhub/dev-1

added docs for fonts

Author: ajay-dhangar

docs/css/typography/fonts/font-family.mdx

@@ -1 +1,84 @@
-<ComingSoon />
+---
+title: "The font-family Property"
+description: "Learn how to use the CSS font-family property to select fonts for text, create reliable font stacks, and understand the role of generic font families."
+keywords: [CSS font-family, font stack, generic font family, typography, web safe fonts, CodeHarborHub]
+tags: [CSS font-family, font stack, generic font family, typography, web safe fonts, CodeHarborHub]
+sidebar_label: "font-family"
+---
+
+The CSS **`font-family`** property is the most essential tool for controlling the typeface of your text. It specifies a **priority list** of font names for the browser to use when rendering text on your webpage.
+
+<AdsComponent />
+<br />
+
+## Defining a Font Stack
+
+The browser can only display a font if it is installed on the user's computer or if you provide it (we'll cover that in a later lesson). Because you can't guarantee a user has a specific font, you must define a **font stack**.
+
+A **font stack** is an ordered list of font families separated by commas. The browser checks the list from left to right, using the **first font it finds** on the user's system.
+
+### The Syntax
+
+```css title="styles.css"
+selector {
+  font-family: "Font Name 1", "Font Name 2", generic-family;
+}
+```
+
+  * **`"Font Name 1"`:** The primary, desired font (e.g., `"Helvetica Neue"`).
+  * **`"Font Name 2"`:** The fallback font (e.g., `"Arial"`).
+  * **`generic-family`:** The required final fallback (e.g., `sans-serif`).
+
+### Quotation Marks
+
+  * Use quotation marks (`""` or `''`) around font names that contain **spaces** (e.g., `"Times New Roman"`).
+  * Font names that are single words (e.g., `Arial`, `Verdana`) do not strictly need quotes, but using them is harmless.
+
+## Understanding Generic Font Families
+
+The **generic font family** is the last and most critical part of your font stack. It's a required safety net that tells the browser what *kind* of font to pick if none of the specific named fonts are found.
+
+There are five basic generic families:
+
+| Generic Family | Description | Characteristics | Common Examples |
+| :--- | :--- | :--- | :--- |
+| **`serif`** | Fonts with small decorative strokes (serifs) at the end of letter stems. | Formal, traditional, high readability for long text. | Times New Roman, Georgia |
+| **`sans-serif`** | Fonts *without* serifs (clean lines). | Modern, clean, highly readable on screens. | Arial, Verdana, Helvetica |
+| **`monospace`** | All characters have the same width. | Technical, used for code blocks and data tables. | Courier New, Consolas |
+| **`cursive`** | Fonts that mimic handwriting or script. | Informal, decorative, low readability. | Comic Sans MS, Brush Script MT |
+| **`fantasy`** | Highly decorative or stylized fonts. | Novelty display only, not for body text. | Impact, Papyrus |
+
+:::tip Always Use a Generic Fallback\!
+Your font stack **must** end with a generic font family. This ensures that the user's text will always display using a legible default font, preventing a visual disaster if all your custom fonts fail.
+:::
+
+<AdsComponent />
+<br />
+
+### Example Font Stacks
+
+```css title="styles.css"
+/* Ideal for body text (clean and modern) */
+body {
+  font-family: "Helvetica Neue", Arial, sans-serif; 
+}
+
+/* Ideal for headings (strong and decorative) */
+h1 {
+  font-family: "Georgia", "Times New Roman", serif;
+}
+
+/* Ideal for code blocks and data displays */
+code {
+  font-family: "Consolas", "Courier New", monospace;
+}
+```
+
+## Interactive `font-family` Demo
+
+Use the live editor to test different font stacks. See how the browser applies the first font from the list that is available on your computer, falling back to `sans-serif` if the others are missing.
+
+<CodePenEmbed 
+  title="Interactive font-family Demo"
+  penId="bNpWxBQ"
+/>

docs/css/typography/fonts/font-shorthand.mdx

@@ -1 +1,99 @@
-<ComingSoon />
+---
+title: The font Shorthand Property
+description: Learn how to use the font shorthand property to set multiple typography properties (style, weight, size, height, and family) in a single, concise CSS declaration.
+keywords: [CSS font shorthand, typography shorthand, concise CSS, font property order, font-weight, font-size, line-height, CodeHarborHub]
+tags: [CSS font shorthand, typography shorthand, concise CSS, font property order, font-weight, font-size, line-height, CodeHarborHub]
+sidebar_label: font Shorthand
+---
+
+The **`font`** property is the ultimate shorthand for typography. It allows you to set up to six related font properties in a single, efficient CSS declaration. Using the shorthand dramatically reduces the length of your stylesheet and improves readability.
+
+<AdsComponent />
+<br />
+
+## The Full `font` Syntax
+
+When using the `font` shorthand, you must follow a very strict order for the values, and some properties are optional while others are **required**.
+
+### Required and Optional Order
+
+The simplified, most common syntax looks like this:
+
+```css title="font Shorthand Syntax"
+font: <font-style> <font-weight> <font-size> / <line-height> <font-family>;
+```
+
+| Property | Required / Optional | Notes |
+| :--- | :--- | :--- |
+| **`font-style`** | Optional | E.g., `italic`, `normal`. Must come before `font-weight`. |
+| **`font-weight`** | Optional | E.g., `bold`, `400`. Must come before `font-size`. |
+| **`font-size`** | **Required** | Must be the third value, followed immediately by the line height. |
+| **`/ line-height`** | Optional | The `/` is required if you include `line-height`. |
+| **`font-family`** | **Required** | Must be the final value. |
+
+### The Critical Requirement
+
+The two **required** values, **`font-size`** and **`font-family`**, must always be the last two items in the list (with `font-family` being the absolute last).
+
+## Practical Examples
+
+### 1. Simple Body Text
+
+This example sets the size and the font stack. All other properties default to `normal`.
+
+```css title="styles.css"
+/* Sets size to 1rem and uses the sans-serif font stack */
+body {
+  font: 1rem sans-serif; 
+}
+```
+
+**This is shorthand for:**
+`font-size: 1rem;`
+`font-family: sans-serif;`
+`font-style: normal;`
+`font-weight: normal;`
+
+### 2. Heading with Style and Weight
+
+This example includes `font-weight` and `font-style` before the required properties.
+
+```css title="style.css"
+/* Italic, Bold, 2.5rem size, using a serif font */
+h1 {
+  font: italic bold 2.5rem serif;
+}
+```
+
+### 3. Including `line-height`
+
+To specify `line-height`, you must insert a **forward slash (`/`)** immediately after the `font-size` value.
+
+```css title="styles.css"
+/* Bold, 18px size, line height of 1.6, using a sans-serif stack */
+.article-text {
+  font: bold 18px / 1.6 "Roboto", Arial, sans-serif; 
+}
+```
+
+<AdsComponent />
+<br />
+
+## A Note on Unspecified Values
+
+When you use the `font` shorthand, any omitted optional properties (like `font-style` or `font-weight`) are **reset to their initial default values** (`normal` or `400`).
+
+This is important because if you had set a custom `font-weight: 700;` earlier in your stylesheet, and then later used `font: 1rem sans-serif;` (omitting `bold`), the weight would be **reset to `normal` (400)**.
+
+This is a key difference between shorthand and individual properties.
+
+## Interactive `font` Shorthand Demo
+
+Use the live editor to test different combinations. See how omitting `line-height` or `font-style` affects the text, and observe the strict order requirement.
+
+<CodePenEmbed 
+  title="Interactive font Shorthand Demo"
+  penId="YPqQZde"
+/>
+
+**Challenge:** Remove the `/ 1.8` from the CSS line. The line spacing will instantly snap back to the browser's default, demonstrating that the `line-height` property was successfully reset.

docs/css/typography/fonts/font-size.mdx

@@ -1 +1,67 @@
-<ComingSoon />
+---
+title: "The font-size Property"
+description: "Learn how to use the CSS font-size property to control the size of text and understand the critical difference between absolute (px) and relative (em, rem, %) units for creating accessible and responsive layouts."
+keywords: [CSS font-size, font units, px vs em vs rem, responsive typography, web accessibility, CodeHarborHub]
+tags: [CSS font-size, font units, px vs em vs rem, responsive typography, web accessibility, CodeHarborHub]
+sidebar_label: "font-size"
+---
+
+The CSS **`font-size`** property is used to specify the height of the characters in a font. Choosing the right font size and unit is one of the most critical decisions in web design, directly impacting **readability** and **accessibility**.
+
+<AdsComponent />
+<br />
+
+## Units for `font-size`
+
+Font sizes can be set using several different types of units, which fall into two main categories: **absolute** and **relative**.
+
+### 1. Absolute Units (Fixed)
+
+Absolute units are fixed measurements that do not change based on any other element or user setting.
+
+| Unit | Description | Best Use Case |
+| :--- | :--- | :--- |
+| **`px`** (Pixels) | A fixed number of dots (pixels) on the screen. | Small elements that must be pixel-perfect, such as thin borders or box shadows. **Avoid for font size.** |
+
+:::danger Accessibility Warning
+Avoid using `px` for font sizes on body text. If a user tries to zoom their browser text using system settings, `px`-based fonts will often fail to resize, creating an accessibility barrier.
+:::
+
+### 2. Relative Units (Scalable)
+
+Relative units are the **best practice** for typography because they allow the text to scale up or down relative to another size, respecting user settings and promoting responsiveness.
+
+| Unit | Description | Calculation | Best Use Case |
+| :--- | :--- | :--- | :--- |
+| **`em`** | Relative to the **font size of the parent element**. | $1\text{em} = 1 \times (\text{Parent's Font Size})$ | Component-level scaling (e.g., a button inside a card). |
+| **`rem`** | Relative to the **font size of the root element** (`<html>`). | $1\text{rem} = 1 \times (\text{Browser's Default Font Size})$ | Global sizing consistency, main typography. **The recommended unit.** |
+| **`%`** (Percent) | Relative to the **font size of the parent element**. | $100\% = \text{Parent's Font Size}$ | Similar to `em`, but `%` is often used for explicit scaling. |
+
+<AdsComponent />
+<br />
+
+## Why `rem` is Recommended
+
+Using `rem` (Root EM) is the modern standard because it prevents sizing issues caused by complex nesting.
+
+1.  **Browser Control:** By default, $16\text{px}$ is the browser's root font size (i.e., $1\text{rem} = 16\text{px}$). If a user changes their browser's default font size to $20\text{px}$, then $1\text{rem}$ automatically becomes $20\text{px}$ across your entire site.
+2.  **Predictability:** Unlike `em`, where the size multiplies on every nested parent (the "compounding problem"), `rem` always refers back to the single `<html>` root size, making calculations simple and predictable.
+
+### Example Scaling with `rem`
+
+If your site's root size is set to the default $16\text{px}$:
+
+| Desired Size | `rem` Value | Calculation |
+| :--- | :--- | :--- |
+| Standard Body Text | `1rem` | $1 \times 16\text{px} = 16\text{px}$ |
+| Large Heading | `2.5rem` | $2.5 \times 16\text{px} = 40\text{px}$ |
+| Small Caption | `0.875rem` | $0.875 \times 16\text{px} = 14\text{px}$ |
+
+### Interactive `font-size` Demo
+
+Use the live editor to change the `font-size` values for both the parent (`.parent-box`) and the child (`.child-text`). Observe how the `em` value scales relative to its parent, while the `rem` value remains constant relative to the root ($16\text{px}$).
+
+<CodePenEmbed 
+  title="Interactive font-size Demo"
+  penId="xbVrqag"
+/>

docs/css/typography/fonts/font-style.mdx

@@ -1 +1,85 @@
-<ComingSoon />
+---
+title: "The font-style Property"
+description: "Learn how to use the CSS font-style property to control the slant and style of text, primarily setting it to normal, italic, or oblique."
+keywords: [CSS font-style, italic text, oblique font, typography, font styling, CodeHarborHub]
+tags: [CSS font-style, italic text, oblique font, typography, font styling, CodeHarborHub]
+sidebar_label: "font-style"
+---
+
+The CSS **`font-style`** property is used to control the visual slant of the text. It determines whether the text is displayed in a **normal** (upright) style, or in an **italic** or **oblique** style.
+
+<AdsComponent />
+<br />
+
+## `font-style` Values
+
+The property accepts three main keywords, which cover virtually all use cases.
+
+### 1. `normal`
+
+This is the **default value** for almost all HTML elements. It displays the font face upright, without any slant.
+
+```css
+p {
+  font-style: normal; /* Ensures paragraphs are not italic, overriding any inherited style. */
+}
+```
+
+### 2. `italic`
+
+The `italic` value is used to select the font's true **italic typeface**.
+
+  * True italic fonts are designed specifically with different letter shapes (e.g., the lowercase 'a' often changes to a single-story form).
+  * If the font family you chose does **not** have an actual italic typeface file available, the browser will often synthesize it by slanting the normal face, but this is less visually appealing than the true italic version.
+
+```css title="styles.css"
+/* Makes text inside elements with the class 'emphasis' use the italic font face */
+.emphasis {
+  font-style: italic;
+}
+```
+
+:::info HTML Default
+Note that the HTML tags `<em>` (emphasis) and `<i>` (idiomatic text) automatically have the browser's default style of `font-style: italic;`.
+:::
+
+### 3. `oblique`
+
+The `oblique` value is primarily used to tell the browser to simply **slant the normal font face** programmatically.
+
+  * `oblique` does not look for a separate, designed italic typeface; it just artificially skews the upright letters.
+  * In most modern browsers, if the font family has a true italic face, the browser will often use it even if you specify `oblique`. If no italic face is available, `oblique` is the best instruction for a synthesized slant.
+
+
+```css title="styles.css"
+.note {
+  font-style: oblique; /* Applies a programmatic slant */
+}
+```
+
+<AdsComponent />
+<br />
+
+## Italic vs. Oblique (The Design Difference)
+
+While the visual difference can be subtle, the distinction is based on design intent:
+
+| Style | Design Intent | Implementation | Result |
+| :--- | :--- | :--- | :--- |
+| **`italic`** | A **separate typeface** created by the font designer. | The browser looks for a font file named something like `MyFont-Italic.woff`. | Superior, authentic typography. |
+| **`oblique`** | The **same upright typeface** is digitally skewed by the browser. | The browser calculates a slant (e.g., 10-14 degrees) and applies it to the `MyFont-Regular.woff` file. | Functional, but often less polished. |
+
+**Best Practice:** Always use **`italic`** unless you specifically know your desired font does not offer a true italic face, or if you need to specify an angle (e.g., `oblique 14deg;` is supported by some browsers).
+
+:::tip Browser Behavior
+In most cases, if you specify `italic` and the font doesn't have a true italic file, the browser will automatically substitute it with the **oblique** version (a simple slant). For practical web design, specifying `italic` is generally the best choice, as it defaults to the best available slanted version.
+:::
+
+### Interactive `font-style` Demo
+
+In the live editor, try setting the `font-style` property to `normal`, `italic`, and `oblique` for the `.text-box` element to observe the slight variations.
+
+<CodePenEmbed 
+  title="Interactive font-style Demo"
+  penId="VYaWpXM"
+/>