`). | Set the initial color of links. |
+| `:checked` | A radio button or checkbox is selected. | Style a checkbox label when the box is checked. |
+
+### Example: Styling a Button State
+
+```css title="styles.css"
+/* Base style for the button */
+.my-button {
+ background-color: #3498db;
+ color: white;
+ padding: 10px 20px;
+ transition: background-color 0.3s; /* Smooth visual change */
+}
+
+/* Style when the user hovers over the button */
+.my-button:hover {
+ background-color: #2980b9; /* Slightly darker */
+}
+
+/* Style when the user is actively clicking the button */
+.my-button:active {
+ background-color: #e74c3c; /* Red color flash */
+}
+```
+
+Error: Check your input fields.
+Attention required.
+Close Warning
+````
+
+### 2. Select the Class in CSS
+
+In your stylesheet, you target that class name by prefixing it with a **dot (`.`)**.
+
+```css title="styles.css"
+/* The dot (.) tells the browser: "Find the element with this class name." */
+.warning {
+ border: 2px solid #ff9800; /* Amber border */
+ background-color: #fff3e0; /* Light orange background */
+ padding: 10px;
+ color: #e65100; /* Darker orange text */
+}
+```
+
+Every element assigned the class `warning` will instantly inherit these styles.
+
+### Multiple Classes
+
+An HTML element can have **multiple classes** assigned to it, separated by spaces. This is incredibly powerful for mixing and matching styles.
+
+```html
+Save Data
+```
+
+In your CSS, you would define these as separate, reusable rules:
+
+```css
+/* Base button style */
+.btn {
+ cursor: pointer;
+ border-radius: 4px;
+}
+
+/* Color/variant style */
+.btn-primary {
+ background-color: blue;
+ color: white;
+}
+
+/* Size style */
+.btn-large {
+ padding: 15px 30px;
+}
+```
+
+## Specificity Score
+
+The Class Selector has a **medium Specificity score**. It is much more specific than an Element selector, but less specific than an ID selector.
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **Class** | **(0, 0, 1, 0)** |
+
+This score of `10` makes it the ideal selector for component styling because it's specific enough to override default element styles but low enough that you can easily override it with utility classes or more advanced selectors if needed.
+
+` elements. |
+| `p` | All ` ` (paragraph) elements. |
+| `a` | All `` (anchor/link) elements. |
+| `li` | All `` (list item) elements. |
+
+### Example Ruleset
+
+This ruleset applies a base font size and margin to every paragraph on the page:
+
+```css
+p {
+ font-size: 16px;
+ line-height: 1.5;
+ margin-bottom: 1em;
+}
+
+h2 {
+ color: #007bff;
+ border-bottom: 2px solid #007bff;
+ padding-bottom: 5px;
+}
+```
+
+
+## Specificity Score
+
+The Element Selector has the **lowest possible Specificity score** (excluding the Universal Selector).
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **Element/Type** | **(0, 0, 0, 1)** |
+
+This low score means it is easily **overridden** by any other selector, such as a Class (score 10) or an ID (score 100). This is a desired trait, as element selectors are meant to provide the **default base styles**.
+
+:::tip Base Styling
+Always use the Element Selector for **base styles** or **reset styles**. For instance, setting a default `font-family` on the `body` tag, or setting `margin: 0;` on all `p` tags. This establishes a clean foundation that more specific rules can easily customize.
+:::
+
+
+
+
+```css
+h1 {
+ font-family: 'Poppins', sans-serif;
+ color: #333;
+}
+h2 {
+ font-family: 'Poppins', sans-serif;
+ color: #333;
+}
+.sidebar-title {
+ font-family: 'Poppins', sans-serif;
+ color: #333;
+}
+```
+
+
+
+
+```css
+/* Grouping all three selectors together */
+h1, h2, .sidebar-title {
+ font-family: 'Poppins', sans-serif;
+ color: #333;
+}
+```
+
+
+
+
+The grouped code achieves the exact same result using just one ruleset\!
+
+This is standard content.
+```
+
+### 2. Select the ID in CSS
+
+In your stylesheet, you target that unique ID name by prefixing it with a **hash symbol (`#`)** (also known as a pound sign).
+
+```css title="styles.css"
+/* The hash (#) tells the browser: "Find the single element with this ID." */
+#main-header {
+ background-color: #3f51b5; /* Deep Indigo */
+ color: white;
+ padding: 20px 0;
+ text-align: center;
+}
+```
+
+## Specificity Score: The Atomic Bomb of CSS
+
+The ID Selector has an extremely high Specificity score, which is why it should be used sparingly for styling.
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **ID** | **(0, 1, 0, 0)** |
+
+A score of **100** means an ID selector will override *ten* class selectors or *one hundred* element selectors trying to style the same property\!
+
+:::danger Use IDs with Caution
+Because the ID selector is so specific, using it for general styling can make your CSS fragile and difficult to maintain. It makes it very hard to override that style later without resorting to the forbidden power of `!important`.
+
+**General Rule:** Use **Classes** for styling and **IDs** primarily for structural landmarks or targets for **JavaScript functions** (e.g., scrolling to `#contact-form`).
+:::
+
+`, `p`, `img`, and even hidden elements like `` content.
+
+
+
+
+## How to Use the Universal Selector
+
+The syntax is just the asterisk, followed by the declaration block.
+
+### The Syntax
+
+```css title="Universal Selector Syntax"
+* {
+ /* declarations go here */
+}
+```
+
+### Example: The CSS Reset
+
+The Universal Selector is most commonly used to perform a **CSS Reset**. This involves clearing default browser styles (like margins and padding) that can cause inconsistencies between different web browsers.
+
+```css title="styles.css"
+/* This essential rule removes default padding and margin from every element */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box; /* Crucial for box model consistency! */
+}
+```
+
+## Specificity Score and Performance
+
+The Universal Selector has the lowest specificity score of all selectors.
+
+| Selector Type | Specificity Score |
+| :--- | :--- |
+| **Universal** | **(0, 0, 0, 0)** |
+
+### Performance and Caution
+
+:::danger Use Sparingly!
+Due to the way browsers calculate styles, using the Universal Selector (`*`) for general styling (like setting a background color) is generally discouraged for large sites.
+
+While modern browsers are fast, applying complex styles to *every single element* (including tags you didn't even know existed) can be slightly inefficient. **Only use it for global resets.**
+:::
+
+
+
+
+## Best Use Case: The `box-sizing` Rule
+
+The most famous and beneficial use of the Universal Selector is to enforce consistent box model behavior across your entire site.
+
+In standard CSS, when you set an element's `width`, padding and border are *added* to that width, often resulting in unexpected layouts. By setting `box-sizing: border-box;`, the padding and border are instead *included* within the defined width.
+
+This single ruleset is often included at the very top of professional stylesheets:
+
+```css title="styles.css"
+/* 1. Target EVERYTHING */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* 2. Target pseudo-elements, which often need the same reset */
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+```
+
+## Interactive Universal Selector Demo
+
+In this demo, the universal selector (`*`) styles every element you see, while a slightly more specific Element Selector (`p`) overrides only the paragraph text color.
+
+
\ No newline at end of file