Day 2: Painting the Web

Visual design starts with color. CSS gives you many ways to define it.

Color Models

1. Hex Codes (#RRGGBB)

The most common format.

• #000000 (Black)
• #FFFFFF (White)
• #FF0000 (Red)

2. RGB / RGBA

Red, Green, Blue (0-255). The A is Alpha (Opacity, 0-1).

div {
    color: rgb(255, 0, 0); /* Red */
    background: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

3. HSL / HSLA (The Designer’s Choice)

Hue (0-360), Saturation (%), Lightness (%). It’s easier to guess colors mentally with HSL.

button {
    /* 200 is Blueish. 100% Saturation. 50% Lightness. */
    background: hsl(200, 100%, 50%);
}

Backgrounds

You can do more than just solid colors.

.banner {
    background-image: url('hero.jpg');
    background-size: cover; /* Fit to screen */
    background-position: center;
    background-repeat: no-repeat;
}

Gradients

Modern CSS allows smooth transitions between colors without images.

.gradient-box {
    /* Linear Gradient: Direction, Color 1, Color 2 */
    background: linear-gradient(45deg, #ff00cc, #333399);
}

Homework for Day 2:

1. Create a <div> and make it a square (height/width 200px).
2. Give it a Linear Gradient background.
3. Create a text headline with a customized HSL color.
4. Experiment with rgba for a see-through glass effect.

Day 3: The most misunderstood concept… The Box Model!