CSS basics

Name: FriendRewind
Author: FriendRewind

FriendRewind

Lesson 2 of 5

HTML says what something is. CSS says how it looks. Same headings, same paragraphs — but with CSS, suddenly there's color, a custom font, the heading is centered, the background is dark. That's the whole job.

Three ways to add CSS

You'll see all three out in the wild, but ~95% of real sites use option 3.

Inline — styles attached directly to one tag:
```
<h1 style="color: red">Hello</h1>
```
Quick and dirty. Fine for one-off tweaks; awful for whole pages.
In the page's <head>:
```
<style>
  h1 { color: red; }
</style>
```
Cleaner. Good when one page has special styles nothing else needs.
External stylesheet — a separate style.css file linked from <head>:
```
<link rel="stylesheet" href="style.css">
```
Best practice. One file styles every page. Change one rule, every page updates.

Anatomy of a rule

h1 {
  color: tomato;
  font-size: 36px;
  text-align: center;
}

The bit before the braces is the selector (which elements to style). Inside the braces is one or more declarations — property: value; pairs.

Selectors you'll use most:

h1 — every <h1> on the page.
.callout — every element with class="callout".
#header — the one element with id="header".
a:hover — every link, but only when the mouse is over it.
nav a — every <a> inside any <nav>.

Properties you'll reach for constantly

color: #ff5733;          /* text color */
background: #1a1d2e;     /* background color (or image) */
font-family: Georgia, serif;
font-size: 18px;
font-weight: bold;
line-height: 1.6;        /* space between lines */
text-align: center;
padding: 20px;           /* space INSIDE an element */
margin: 0 auto;          /* space OUTSIDE; "0 auto" centers a block */
border: 1px solid #ccc;
border-radius: 8px;      /* rounded corners */
width: 600px;
max-width: 100%;         /* never wider than the screen */

A real-world example

Here's a stylesheet that turns the page from lesson 1 into something nice:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #faf6ee;
  color: #2a2421;
  max-width: 640px;
  margin: 8vh auto;
  padding: 0 24px;
  line-height: 1.65;
}

h1 {
  font-size: 2.4rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.2em;
}

h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: tomato;
  margin-top: 12px;
}

p {
  margin: 14px 0;
}

a {
  color: tomato;
}
a:hover {
  color: #1a1d2e;
}

Save that as style.css, link it from your <head> with <link rel="stylesheet" href="style.css">, hit preview. Boom — same content, completely different vibe.

Colors

You'll write color values in three main flavors:

Names — red, tomato, rebeccapurple. Limited but readable.
Hex — #ff5733. Two digits each for red/green/blue.
RGB / RGBA — rgb(255 87 51), with alpha: rgba(255, 87, 51, 0.5). The "a" lets you do partial transparency.

The box model. Every element on the page is a rectangle. padding is the space inside its border; margin is the space between it and the next element. Spend a few minutes playing with both and you'll get it forever.

Try it

Make a file called style.css in your editor, paste the stylesheet above, link it from your index.html, and refresh the preview. Then change a color. Make the heading bigger. Center it. Get it wrong on purpose. The browser tells you when it doesn't understand something — just try the next thing.

Where to next

You can build a whole personal site with just HTML and CSS — many people do, and they're great. But the moment you want a button to do something, you'll need a sprinkle of JavaScript. That's next.