Day 1: The Art of Selection

CSS (Cascading Style Sheets) is how we make HTML look good. The core concept of CSS is: Select something, then style it.

1. Basic Selectors

Element Selector

Targets all tags of a specific type.

p {
    color: red; /* All paragraphs will be red */
}

Class Selector (.)

Targets elements with a specific class attribute. This is your workhorse.

<button class="btn-primary">Click Me</button>

.btn-primary {
    background-color: blue;
    color: white;
}

ID Selector (#)

Targets a unique element.

<div id="header-logo"></div>

#header-logo {
    width: 200px;
}

2. The “Cascade” & Specificity

What happens if two rules conflict?

p { color: red; }
.text-blue { color: blue; }

If a paragraph has <p class="text-blue">, it will be BLUE. Why? Because a Class is more specific than a Tag.

Hierarchy of Power:

1. !important (Avoid using this!)
2. Inline Styles (style="...")
3. IDs (#id)
4. Classes (.class)
5. Elements (div, p)

3. Combinators

Targeting elements based on relationships.

• Descendant (Space): .card p (Any p inside .card)
• Child (>): .card > p (Direct child only)
• Sibling (+): h1 + p (The p immediately after h1)

---

Homework for Day 1:

1. Create an HTML file with 3 paragraphs.
2. Give different classes to them (.text-red, .text-bold, etc.).
3. Write CSS to style them selectively.
4. Try to “break” specificy: Make a rule that overrides another.

Day 2: We paint with Colors & Gradients!