# 🌈 **CSS (Cascading Style Sheets)**

CSS is used to style and format the layout of web pages. It defines how HTML elements should appear — colors, fonts, spacing, positioning, and much more.

***

## 🎯 **Types of CSS Styling**

### 1️⃣ **Inline Styling**

* Defined **directly within an HTML element** using the `style` attribute.
* Affects **only that specific element**.
* Has the **highest priority** among all styling methods.

#### 💡 Example:

```html
<p style="color:orange; background-color:black;">
  This is a paragraph with inline styling.
</p>
```

✅ **Advantages:**

* Quick for testing or one-time use.

❌ **Disadvantages:**

* Not reusable.
* Clutters HTML code.
* Hard to maintain in large projects.

***

### 2️⃣ **Internal Styling**

* Defined within a `<style>` tag inside the `<head>` section of the HTML.
* Styles are applied to the **entire page** but only within that file.

#### 💡 Example:

```html
<head>
  <style>
    p {
      color: orange;
      background-color: black;
      font-size: 18px;
    }
  </style>
</head>
```

#### **Selectors Used in Internal Styling:**

1. **Tag Selector**
   Targets all elements of a specific tag.
   ```css
   p {
     color: orange;
     font-size: 18px;
   }
   ```
2. **ID Selector (`#`)**
   Targets an element with a specific `id` attribute.
   ```css
   #heading {
     color: violet;
   }
   #para1, #para2 {
     background-color: black;
     font-size: 20px;
   }
   ```
   🧠 **Note:**
   * Each `id` must be **unique** per page.
   * IDs have **high specificity**.
3. **Class Selector (`.`)**
   Targets one or more elements with the same class name.
   ```css
   .course {
     color: blue;
   }
   .hero {
     color: green;
   }
   ```
   ✅ Can be reused across multiple elements.
   ```html
   <li class="hero">Batman</li>
   <li class="hero">Superman</li>
   ```

***

### 3️⃣ **External Styling**

* Written in a separate `.css` file and linked using the `<link>` tag inside `<head>`.

#### 💡 Example:

```html
<link rel="stylesheet" href="styles.css">
```

**styles.css**

```css
p {
  color: orange;
  font-size: 16px;
}
```

✅ **Advantages:**

* Reusable across multiple pages.
* Cleaner, more maintainable code.
* Easier to manage large websites.

***

## ⚖️ **Specificity / Preference of Rules**

**CSS Specificity** determines which style rule takes precedence when multiple rules apply to the same element.

It follows a **hierarchy (priority order)** based on **selectors used** and **where the rule is written**.

***

### 🔢 **Specificity Calculation Order**

| Selector Type                     | Weight                    | Example                            |
| --------------------------------- | ------------------------- | ---------------------------------- |
| Inline Styles                     | **Highest (1000 points)** | `<p style="color:red;">`           |
| ID Selector                       | **High (100 points)**     | `#title { color: blue; }`          |
| Class, Attribute, or Pseudo-Class | **Medium (10 points)**    | `.hero`, `[type="text"]`, `:hover` |
| Tag Selector                      | **Low (1 point)**         | `p`, `h1`, `div`                   |
| Universal Selector                | **Lowest (0)**            | `* { color: black; }`              |

***

### 🧮 **Example: Specificity in Action**

```html
<ul id="herolist" class="heros">
  <li>Hulk</li>
  <li>Batman</li>
  <li>Superman</li>
  <li>Thor</li>
</ul>
```

**CSS Rules:**

```css
ul {
  color: pink;         /* Tag selector → 1 point */
}

.heros {
  color: maroon;       /* Class selector → 10 points */
}

#herolist {
  color: blueviolet;   /* ID selector → 100 points */
}
```

✅ **Final Applied Color:** `blueviolet`
Because **ID selectors** override **class** and **tag selectors**.

***

### 🧩 **Combined Selectors**

When selectors are combined, their **specificity values add up.**

Example:

```css
div.hero p {
  color: red;
}
```

* `div` → 1
* `.hero` → 10
* `p` → 1
  ➡️ **Total = 12**

***

### ⚡ **Precedence by Style Location**

When multiple sources define styles for the same element, the priority is as follows:

| Priority | Type of Style    | Example                               |
| -------- | ---------------- | ------------------------------------- |
| 1️⃣      | **Inline Style** | `<p style="color:red;">`              |
| 2️⃣      | **Internal CSS** | `<style> p { color: blue; } </style>` |
| 3️⃣      | **External CSS** | Linked CSS file                       |

💡 **However**, if the external stylesheet is linked **after** the internal style block, then **external styles can override internal** ones due to the **cascade order**.

***

### 🧠 **Cascade Rule (The “C” in CSS)**

If specificity is equal, the **last declared rule** (lowest in the file) wins.

Example:

```css
p {
  color: red;
}
p {
  color: blue;
}
```

✅ The paragraph will appear **blue**, as the second rule overrides the first.

***

## ✨ **Typography in CSS**

Typography controls the appearance of text.
Here are the common properties with your examples:

```css
#heading {
  color: green;
}

.para {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center;
  text-decoration: underline;
}

.longpara {
  line-height: 2;
  word-spacing: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.aaloo {
  color: blue;
  text-decoration: underline;
  font-weight: bold;
}

.baloo {
  color: red;
  font-style: italic;
}
```

| Property          | Description                          | Example                  |
| ----------------- | ------------------------------------ | ------------------------ |
| `font-family`     | Defines the typeface                 | `'Segoe UI', sans-serif` |
| `font-size`       | Sets text size                       | `20px`                   |
| `font-weight`     | Defines thickness                    | `bold`                   |
| `font-style`      | Defines style                        | `italic`                 |
| `text-decoration` | Adds underline/overline/line-through | `underline`              |
| `text-transform`  | Uppercase/lowercase/capitalize       | `uppercase`              |
| `letter-spacing`  | Space between letters                | `2px`                    |
| `word-spacing`    | Space between words                  | `10px`                   |
| `line-height`     | Vertical spacing between lines       | `2`                      |
| `text-align`      | Text alignment                       | `center`                 |

***

## 🧭 **Summary Table: CSS Priority Order**

| Level | Type                             | Example              | Priority   |
| ----- | -------------------------------- | -------------------- | ---------- |
| 1     | Inline                           | `style="color:red;"` | 🔺 Highest |
| 2     | ID                               | `#heading {}`        | 🔸 High    |
| 3     | Class / Attribute / Pseudo-class | `.hero {}`           | 🔹 Medium  |
| 4     | Tag                              | `p {}`               | ⚪ Low      |
| 5     | Universal                        | `* {}`               | ⚫ Lowest   |

CSS is used to style and format the layout of web pages. It defines how HTML elements should appear — colors, fonts, spacing, positioning, and much more.

<p style="color:orange; background-color:black;">
  This is a paragraph with inline styling.
</p>

<head>
  <style>
    p {
      color: orange;
      background-color: black;
      font-size: 18px;
    }
  </style>
</head>

p {
  color: orange;
  font-size: 16px;
}

 determines which style rule takes precedence when multiple rules apply to the same element.

<ul id="herolist" class="heros">
  <li>Hulk</li>
  <li>Batman</li>
  <li>Superman</li>
  <li>Thor</li>
</ul>

ul {
  color: pink;         /* Tag selector → 1 point */
}

.heros {
  color: maroon;       /* Class selector → 10 points */
}

#herolist {
  color: blueviolet;   /* ID selector → 100 points */
}

When multiple sources define styles for the same element, the priority is as follows:

, as the second rule overrides the first.

Typography controls the appearance of text.

Here are the common properties with your examples:

#heading {
  color: green;
}

.para {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center;
  text-decoration: underline;
}

.longpara {
  line-height: 2;
  word-spacing: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.aaloo {
  color: blue;
  text-decoration: underline;
  font-weight: bold;
}

.baloo {
  color: red;
  font-style: italic;
}