Day 2: Styling with CSS

Time commitment: 10-15 minutes (+ video)

Yesterday you built an "ugly but working" HTML page. Today you'll make it look better with CSS, learn how to link a stylesheet, use browser DevTools, and understand IDs vs. classes, margin vs. padding, and cascading rules.

What is CSS?

CSS (Cascading Style Sheets) controls how your HTML looks:

Colors
Fonts
Spacing
Layout

Syntax: selector { property: value; }

Selector: what you're styling (body, h1, .class, #id)
Property: what you change (color, font-family, margin, etc.)
Value: how you change it (cornflowerblue, 20px, etc.)

You don’t need to memorize every property. Learn patterns. Google + MDN = your best friend.

Create and Link a Stylesheet

Create style.css in your project folder
Link it in your HTML <head>:

<head>
    <title>My First Webpage</title>
    <link rel="stylesheet" href="style.css">
</head>

This tells the browser to load your CSS.

This short video shows what happens once you link your stylesheet—watch the HTML come to life with color and layout.

Try These Base Styles

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: bisque;
}

h1 {
    color: cornflowerblue;
    text-align: center;
}

#intro {
    text-align: center;
    padding: 50px;
}

#small-heading {
    color: aquamarine;
}

#link {
    color: cadetblue;
}

.items {
    list-style: circle;
}

Example HTML

<h1>Hello, World!</h1>

<section id="intro">
    <h2 id="small-heading">This is a smaller h2 item</h2>
    <p>My name is Mr Brian.</p>
    <p>I'm learning to code!</p>
    <img src="..." alt="Me learning to code">
</section>

<h2>Things about me that are interesting</h2>
<ol>
    <li>I'm vegan</li>
    <li>I'm a rapper</li>
</ol>

<ul>
    <li class="items">First point</li>
    <li class="items">Second point</li>
    <li class="items"><a href="https://javascript.com">JS Resources</a></li>
</ul>

<h2>
    <a id="link" href="https://www.airbnb.com/">This is a link for Airbnb</a>
</h2>

IDs vs Classes

#id = one element (unique)
.class = reusable on many elements

Use DevTools to Experiment

Right click → Inspect → tweak CSS live → copy into your file when happy.

Margin vs Padding

#intro {
    text-align: center;
    padding: 50px; /* inside */
    /* margin: 20px;  outside */
}

Cascading Rules Matter

body { background-color: bisque; }
/* ... later ... */
body { background-color: red; }

Result: background becomes red. Later rules win.

Flexbox Preview

#intro {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Learn more:

Key CSS Properties

color
background-color
font-size
margin
padding
border

Practice Exercises

Tweak colors live in DevTools
Wrap intro in <section id="intro"> and style it
Use one #id and several .class items
Add margin + padding to see difference
Try a new background color
Bonus: add Flexbox to #intro

Common Gotchas

Missing ;
Wrong selector
Typos (collor 😂)
CSS not linked
Hard refresh if styles don’t change

Key Takeaways

Link CSS in <head>
CSS = selector { property: value; }
IDs = one, Classes = many
Margin (outside) vs Padding (inside)
Cascade: later overrides earlier
Use DevTools to experiment fast
Flexbox = modern layout

Tomorrow: JavaScript day — make your page interactive 👇