Chapter 2: CSS Fundamentals

Learn to style your web pages — colors, fonts, spacing, and visual effects that bring HTML to life.

Selectors

Box Model

Colors & Fonts

Backgrounds

Pseudo-classes

Quiz

CSS Selectors

CSS is like a paint and decoration crew for your HTML house. The HTML builds the walls, rooms, and doors — CSS decides the wall color, font style, spacing, and where the furniture goes. Selectors are how you point at which room to decorate.

CSS has three main ways to select elements:

Element selector — selects ALL elements of that type: p { }
Class selector — selects elements with a specific class: .highlight { }
ID selector — selects ONE unique element: #main-title { }

HTML — CSS Selectors

<style>
    /* ELEMENT selector — targets ALL p tags */
    p {
        font-family: Arial, sans-serif;
        line-height: 1.6;
    }

    /* CLASS selector — targets elements with class="highlight" */
    .highlight {
        background: #fdcb6e;
        padding: 4px 8px;
        border-radius: 4px;
        color: #2d3436;
    }

    /* ID selector — targets the ONE element with id="main-title" */
    #main-title {
        color: #6c5ce7;
        border-bottom: 3px solid #6c5ce7;
        padding-bottom: 8px;
    }

    /* You can combine selectors too! */
    p.intro {
        font-size: 18px;
        color: #0984e3;
        font-weight: bold;
    }
</style>

<h1 id="main-title">Welcome to CSS!</h1>

<p class="intro">This paragraph has both "p" styling AND the "intro" class.</p>

<p>This is a regular paragraph. Only the element selector applies.</p>

<p>CSS is <span class="highlight">really powerful</span> and <span class="highlight">fun to learn</span>!</p>

<!-- TRY: Add a new class called .big-text with font-size: 24px and apply it! -->

Specificity rule: ID selectors (#) are stronger than class selectors (.), which are stronger than element selectors. If two rules conflict, the more specific one wins!

Selector	Symbol	Example	Specificity
Element	(none)	`p { }`	Low
Class	`.`	`.highlight { }`	Medium
ID	`#`	`#main-title { }`	High
Inline style	`style=""`	`style="color:red"`	Highest

The Box Model

Every HTML element is like a package being shipped. The content is the item inside, padding is the bubble wrap around it, border is the box itself, and margin is the space between this box and other boxes on the shelf.

HTML — The Box Model

<style>
    body { font-family: Arial, sans-serif; padding: 20px; }

    .box {
        /* CONTENT: the text inside */
        width: 250px;

        /* PADDING: space INSIDE the border (bubble wrap) */
        padding: 20px;

        /* BORDER: the visible edge of the box */
        border: 4px solid #6c5ce7;

        /* MARGIN: space OUTSIDE the border (between boxes) */
        margin: 20px;

        background: #dfe6e9;
        color: #2d3436;
    }

    .box-small {
        width: 200px;
        padding: 10px;
        border: 2px dashed #e74c3c;
        margin: 20px;
        background: #ffeaa7;
        color: #2d3436;
    }

    /* box-sizing: border-box makes width INCLUDE padding and border */
    .box-better {
        width: 250px;
        padding: 20px;
        border: 4px solid #00b894;
        margin: 20px;
        background: #55efc4;
        color: #2d3436;
        box-sizing: border-box; /* Total width stays 250px! */
    }
</style>

<div class="box">
    <strong>Box 1:</strong> I have 20px padding, 4px border, 20px margin.
    My total width = 250 + 40 + 8 = 298px!
</div>

<div class="box-small">
    <strong>Box 2:</strong> I have a dashed red border and less padding.
</div>

<div class="box-better">
    <strong>Box 3:</strong> I use box-sizing: border-box, so my total width stays exactly 250px!
</div>

<!-- TRY: Change the padding and margin values to see the difference! -->

Without box-sizing: border-box, padding and border are added ON TOP of the width. So a width: 200px box with padding: 20px is actually 240px wide! Most developers add * { box-sizing: border-box; } at the top of every stylesheet to avoid this trap.

Colors & Fonts

CSS gives you many ways to set colors and control how text looks. Let's explore them all:

HTML — Colors & Typography

<style>
    body { font-family: 'Segoe UI', Arial, sans-serif; padding: 20px; }

    /* COLOR FORMATS */
    .color-name    { color: tomato; }            /* Named color */
    .color-hex     { color: #6c5ce7; }           /* Hex (most common) */
    .color-rgb     { color: rgb(9, 132, 227); }  /* RGB values */
    .color-rgba    { color: rgba(0, 0, 0, 0.5); }/* RGBA with transparency */

    /* FONT PROPERTIES */
    .font-demo {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 20px;
        font-weight: bold;      /* normal, bold, 100-900 */
        font-style: italic;
        letter-spacing: 2px;    /* space between letters */
        line-height: 1.8;       /* space between lines */
    }

    /* TEXT PROPERTIES */
    .text-center  { text-align: center; }
    .text-upper   { text-transform: uppercase; }
    .text-shadow  { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
    .text-deco    { text-decoration: underline wavy #e74c3c; }

    /* BACKGROUND COLOR */
    .bg-demo {
        background-color: #fdcb6e;
        color: #2d3436;
        padding: 12px;
        border-radius: 8px;
        margin: 8px 0;
    }
</style>

<h2>Color Formats</h2>
<p class="color-name">I use a named color: tomato</p>
<p class="color-hex">I use hex: #6c5ce7</p>
<p class="color-rgb">I use rgb(9, 132, 227)</p>
<p class="color-rgba">I use rgba with 50% transparency</p>

<h2>Font & Text Styling</h2>
<p class="font-demo">Custom font family, size, weight, and style.</p>
<p class="text-center">This text is centered.</p>
<p class="text-upper">this text becomes uppercase</p>
<p class="text-shadow" style="font-size:24px;">I have a text shadow!</p>
<p class="text-deco">I have a wavy red underline.</p>
<div class="bg-demo">I have a yellow background color.</div>

<!-- TRY: Change colors, try different font families! -->

Backgrounds

CSS backgrounds go far beyond just colors. You can use images, gradients, and even layer them together.

HTML — Backgrounds & Gradients

<style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .card {
        padding: 30px;
        margin: 15px 0;
        border-radius: 12px;
        color: white;
        font-weight: bold;
        font-size: 16px;
    }

    /* LINEAR GRADIENT: goes in one direction */
    .gradient-linear {
        background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    }

    /* RADIAL GRADIENT: goes outward from center */
    .gradient-radial {
        background: radial-gradient(circle, #fd79a8, #e84393);
    }

    /* MULTIPLE BACKGROUNDS layered */
    .gradient-multi {
        background: linear-gradient(to right, #00b894, #00cec9, #0984e3);
    }

    /* BACKGROUND IMAGE */
    .bg-image {
        background-image: url('https://via.placeholder.com/800x200/2d3436/ffffff?text=Background+Image');
        background-size: cover;
        background-position: center;
        min-height: 80px;
    }
</style>

<div class="card gradient-linear">Linear Gradient (135deg, purple to light purple)</div>

<div class="card gradient-radial">Radial Gradient (circle, pink outward)</div>

<div class="card gradient-multi">Multi-stop Gradient (green to cyan to blue)</div>

<div class="card bg-image">Background Image (cover, centered)</div>

<!-- TRY: Change the gradient colors or angle! -->

Pseudo-classes & Transitions

Pseudo-classes are like special states an element can be in. Think of a light switch: it can be "off" (default) or "on" (hovered/pressed). Pseudo-classes let you style each state differently.

HTML — Hover Effects & Transitions

<style>
    body { font-family: Arial, sans-serif; padding: 20px; }

    /* HOVER: changes when mouse is over the element */
    .hover-btn {
        padding: 12px 32px;
        font-size: 16px;
        border: 2px solid #6c5ce7;
        background: white;
        color: #6c5ce7;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;  /* Smooth animation! */
    }
    .hover-btn:hover {
        background: #6c5ce7;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
    }

    /* Card with hover effect */
    .hover-card {
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 12px;
        margin: 15px 0;
        transition: all 0.3s ease;
    }
    .hover-card:hover {
        border-color: #6c5ce7;
        transform: scale(1.02);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }

    /* Link states */
    a.fancy {
        color: #0984e3;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: border-color 0.3s;
    }
    a.fancy:hover  { border-bottom-color: #0984e3; }
    a.fancy:active { color: #e74c3c; }  /* When clicked */

    /* nth-child: style specific children */
    .striped-list li:nth-child(odd) { background: #f0f0f0; }
    .striped-list li:nth-child(even) { background: #dfe6e9; }
    .striped-list li { padding: 8px 16px; list-style: none; }
</style>

<button class="hover-btn">Hover over me!</button>
<br><br>

<div class="hover-card">
    <h3>Hover Card</h3>
    <p>Move your mouse over this card to see it grow and get a shadow.</p>
</div>

<p><a href="#" class="fancy">Hover me for underline effect</a></p>

<h3>Striped List (nth-child)</h3>
<ul class="striped-list">
    <li>Item 1 (odd — light)</li>
    <li>Item 2 (even — darker)</li>
    <li>Item 3 (odd)</li>
    <li>Item 4 (even)</li>
    <li>Item 5 (odd)</li>
</ul>

<!-- TRY: Change the hover colors or transition speed! -->

🎯 Challenge!

Change the button hover color to green (#00b894)
Make the card rotate slightly on hover using transform: rotate(1deg)
Add a :focus state to the button with a different border color

📝 Chapter 2 Quiz

1. How do you select an element with class "highlight" in CSS?

#highlight { }

.highlight { }

highlight { }

*highlight { }

2. In the CSS box model, what is "padding"?

Space outside the border

The visible edge of the element

Space between content and border

The content itself

3. Which of these is a valid hex color?

#6c5ce7

6c5ce7

&6c5ce7

hex(6c5ce7)

4. Which pseudo-class applies styles when the mouse is over an element?

:active

:focus

:visited

:hover

5. What does box-sizing: border-box do?

Removes all borders

Makes width include padding and border

Adds a box shadow

Centers the element on the page

← Chapter 1: HTML Chapter 3: Flexbox & Grid →