Day 2 — CSS: Color, Type & the Box Model

Selectors · Classes & ids · Colors · Fonts · Box model · Hover, gradients & more

Schedule

Time	Activity
0:00 – 0:45	Lecture: separating content from style, selectors
0:45 – 1:30	Project: style yesterday's page
1:30 – 1:40	Break
1:40 – 3:00	Project: make it yours — colors, fonts, spacing

What CSS Is

HTML is your content. CSS is how it looks — colors, fonts, spacing, layout. Keeping them separate means you can restyle a whole page without touching the content.

You write CSS as a list of rules. Each rule picks an element (the selector) and sets some properties:

selector {
  property: value;
  property: value;
}

Yesterday you used a <style> block inside the page. Today, move your styles into their own file — cleaner, and one stylesheet can style every page. Connect it by adding this line inside the <head>:

<link rel="stylesheet" href="style.css">

Then make a file called style.css next to your HTML. Everything below goes in there.

Quick Reference

Selectors — Choosing What to Style

h1 { }              /* every <h1> tag */
p  { }              /* every paragraph */

.card { }           /* every element with class="card"  (dot = class) */
#header { }         /* the one element with id="header"  (# = id) */

nav a { }           /* every <a> inside a <nav> */

Add a class to any HTML element so you can target it:

<p class="intro">Style me differently.</p>

Colors and Text

body {
  color: #222;                 /* text color */
  background: #f4f4f8;          /* background color */
  font-family: system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;            /* spacing between lines */
}
h1 {
  color: #6a1b9a;
  text-align: center;
}

Colors: write a name like red, or a hex code like #6a1b9a. Grab a hex from a color picker at htmlcolorcodes.com/color-picker, or a whole matching palette at coolors.co.

The Box Model — Spacing

Every element is a box with three layers of spacing. This is the single most important idea in CSS.

.card {
  padding: 1rem;               /* space INSIDE the box, around the content */
  border: 2px solid #ccc;      /* the line around the box */
  margin: 1rem;                /* space OUTSIDE the box, pushing others away */
  border-radius: 12px;         /* rounded corners */
}

Sizing and Centering

body {
  max-width: 700px;            /* don't stretch wider than this */
  margin: 0 auto;              /* auto left/right margins = centered */
}
img {
  width: 200px;
  border-radius: 12px;
}

The `<div>` Tag — a Box to Group Things

A <div> is a plain container. On its own it does nothing and shows nothing — but it lets you group related elements so you can style or position them as one block. It's the workhorse tag of every layout.

<div class="card">
  <h2>Dog Walking Service</h2>
  <p>Reliable walks in your neighborhood.</p>
</div>

Wrap related elements in a <div>, give it a class, then style the whole box at once (like the card look below). You'll lean on <div> constantly — for cards, sections, and the layouts we build on Day 3.

Class vs. id — and the CSS for Each

You need a way to style some elements but not others. That's what classes and ids are for. You add them in the HTML, then target them in the CSS.

A class — reuse it on many elements

Add class="..." in the HTML, then style it with a dot in CSS:

<p class="note">Watch out for this!</p>
<p class="note">And this too.</p>

.note {
  color: darkred;
  font-weight: bold;
}

An id — for one special element

Add id="..." in the HTML, then style it with a hash in CSS:

<div id="hero">Welcome!</div>

#hero {
  background: #1a1a2e;
  color: white;
  padding: 2rem;
}

The difference: a class can repeat on as many elements as you like; an id should appear once per page. When in doubt, use a class.

A Bit More CSS

A few extra tricks that make a page feel polished.

Hover effects

Add :hover to a selector to change something when the mouse is over it. transition makes the change fade smoothly instead of snapping.

a {
  color: #6a1b9a;
  transition: color 0.2s;      /* animate the change */
}
a:hover {
  color: tomato;
}

Gradients and shadows

/* a gradient background */
body { background: linear-gradient(#a18cd1, #fbc2eb); }

/* a soft shadow under a card */
.card { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

Color variables

Name a color once, reuse it everywhere. Change your whole theme from one spot:

:root {
  --brand: #6a1b9a;            /* define it once */
}
h1     { color: var(--brand); }
a:hover { color: var(--brand); }

Project — Style Your Page

Add a <link> to a stylesheet, then style yesterday's page. This CSS works no matter which theme you picked — start here, then change every value to your taste.

Starter Code — `style.css`

body {
  font-family: system-ui, sans-serif;
  background: #f4f4f8;
  color: #222;
  max-width: 700px;
  margin: 0 auto;              /* centers the page */
  padding: 2rem;
  line-height: 1.6;
}

h1 {
  color: #6a1b9a;
  text-align: center;
}

img {
  width: 200px;
  border-radius: 12px;
}

a {
  color: #6a1b9a;
}

Don't forget: add <link rel="stylesheet" href="style.css"> inside your HTML's <head>, or none of this will show up.

Stretch Goals

Add a hover effect on your links: a:hover { color: red; }
Use a Google Font — grab the <link> from fonts.google.com
Give the page a gradient background: background: linear-gradient(#a18cd1, #fbc2eb);
Add a shadow to an image or box: box-shadow: 0 4px 12px rgba(0,0,0,0.2);
Style a <button> even if it doesn't do anything yet (we'll wire it up on Day 4)

A Fancier Font in Two Lines

The built-in fonts are fine, but a Google Font makes a page feel designed. Pick one at fonts.google.com, then do two things.

1. Paste the <link> Google gives you into your <head>:

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

2. Use that font's name in your CSS:

body { font-family: "Poppins", sans-serif; }

Two different spots: the <link> goes in your HTML's <head>; the font-family goes in your CSS. Google Fonts hands you both — just copy each into place.

Color & Units Cheat Sheet

Ways to write a color

Form	Example	When
Named	`tomato`, `rebeccapurple`	Quick and readable — ~140 names exist
Hex	`#ff6347`	Exact color, e.g. from coolors.co
RGB w/ opacity	`rgba(0,0,0,0.2)`	See-through colors (great for shadows)

Common size units

Unit	Means	Good for
`px`	exact pixels	borders, fixed image widths
`rem`	multiples of the base text size	font sizes, spacing (scales nicely)
`%`	percent of the parent	widths that flex with the screen

Rule of thumb: reach for rem for fonts and spacing, px for thin borders, and % for widths that should stretch.

Common Mistakes

Nothing changed. Did you add <link rel="stylesheet" href="style.css"> in the <head>? Without it, the browser never loads your CSS.
Missing semicolon. Every line inside { } ends with ;. Miss one and the rest of the rule silently stops working.
Forgot the dot or hash. A class selector needs a dot: .card. An id needs a hash: #header. Plain card looks for a <card> tag, which doesn't exist.
Padding vs. margin mix-up. Padding is space inside the box (pushes the border out); margin is space outside (pushes other elements away).
Overriding yourself. If two rules target the same element, the more specific one (id beats class beats tag) wins — not always the last one you wrote.

Day 2 — CSS: Color, Type & the Box Model

Schedule

What CSS Is

Quick Reference

Selectors — Choosing What to Style

Colors and Text

The Box Model — Spacing

Sizing and Centering

The <div> Tag — a Box to Group Things

Class vs. id — and the CSS for Each

A class — reuse it on many elements

An id — for one special element

A Bit More CSS

Hover effects

Gradients and shadows

Color variables

Project — Style Your Page

Starter Code — style.css

Stretch Goals

A Fancier Font in Two Lines

Color & Units Cheat Sheet

Ways to write a color

Common size units

Common Mistakes

The `<div>` Tag — a Box to Group Things

Starter Code — `style.css`