What Is CSS?
The formatting toolbar for your HTML — color, font, size, spacing, layout
HTML gives your page structure. CSS gives it style. Without CSS, a webpage looks like a plain Word document with default fonts. With CSS, it can look like anything — a sleek dark dashboard, a clean newspaper, a product landing page.
The Word formatting toolbar analogy
Connecting CSS to HTML — three ways
<!-- Option 1: Inline style (avoid — hard to maintain) -->
<p style="color: red; font-size: 18px;">This paragraph is red and 18px.</p>
<!-- Option 2: Internal style block (for small single-page projects) -->
<head>
<style>
p { color: #333; font-size: 16px; }
</style>
</head>
<!-- Option 3: External stylesheet (best — use this always) -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<!-- Then in styles.css: -->
<!-- p { color: #333; font-size: 16px; } -->CSS is Word's Format menu — but smarter
In Word, you select text and click "Bold" or choose a font size from the dropdown, or change the text color. That formatting only applies to the selected text. CSS works differently: you write a rule that says "ALL paragraphs on this page should be in grey, 16px, with 1.6x line height." The rule applies everywhere automatically — add 100 more paragraphs and they all look right. You write the rule once. Word applies it everywhere.
A CSS rule — the three parts
Selector, property, value
/* Selector: which elements to style */
/* Property: what to change */
/* Value: what to set it to */
p {
color: #333333; /* text color — like Word's font color picker */
font-size: 16px; /* text size — like Word's font size box */
line-height: 1.6; /* line spacing — like Word's paragraph spacing */
font-family: Georgia; /* font — like Word's font dropdown */
}
h1 {
color: #1a1a2e;
font-size: 48px;
font-weight: bold;
}px, rem, em, % — when to use which
px is absolute: 16px is always 16px. rem is relative to the root font size (1rem = 16px by default) — great for font sizes because it respects user accessibility settings. % is relative to the parent element — great for widths. For font sizes, prefer rem. For widths and spacing, px or rem both work fine.
Try this
Create styles.css next to your index.html and link it with <link rel="stylesheet" href="styles.css">. Set body { font-family: sans-serif; color: #222; } and h1 { color: #1a1a2e; }. Refresh your browser — see how the page transforms with just a few lines of CSS.