CSS Tutorial
CSS Fonts
font-family, size, weight, and style. Always list a fallback after a custom face.
font-family and fallbacks
font-family names the typeface. The browser walks the list from left to right and uses the first face it can load. Put a specific name first, then a generic family last —serif, sans-serif, monospace, system-ui. If the custom file fails, the generic still looks like the design you meant.
Example
<style>
body {
font-family: Georgia, "Times New Roman", serif;
color: #0c4a6e;
line-height: 1.5;
}
.ui {
font-family: system-ui, "Segoe UI", sans-serif;
}
</style>
<h1>Harbor studio</h1>
<p>Body copy in a serif stack.</p>
<p class="ui">Buttons and hours in a system sans.</p>Quote family names that contain spaces: "Times New Roman". Generic names (sans-serif) stay unquoted. Always end the list with a generic so a missing file does not dump the page into the browser default at random.
Generic families
You do not control which exact serif a visitor gets from serif, but you do control the category. That is enough for a first Harbor studio page. Custom files loaded with@font-face or a font service come later; the fallback rule stays the same.
| Generic | Looks like | Use for |
|---|---|---|
sans-serif | No tails on letters | UI, headings, most sites |
serif | Tails (Times-like) | Long reading, print feel |
monospace | Equal-width letters | Code, kiln log numbers |
system-ui | The OS interface font | Native-feeling controls |
font-size
font-size sets the size of the letters. Pixels are exact. rem is relative to the root (usually 16px, so 1.25rem is 20px). Percentages and em are relative to the parent’s font size, which can nest in surprising ways. Prefer rem for page type.
Example
<style>
h1 {
font-size: 2rem;
color: teal;
}
.lede {
font-size: 1.125rem;
color: #0c4a6e;
}
.meta {
font-size: 0.875rem;
color: #64748b;
}
</style>
<h1>Harbor studio</h1>
<p class="lede">Clay, tide light, and booking slips.</p>
<p class="meta">Harbor Street 12 · open 8–16</p>Body text around 1rem to 1.125rem is a solid starting point. Headings can jump in a scale (2rem, 1.5rem, 1.25rem) so the outline of the page is obvious.
Weight and style
font-weight is how heavy the stroke is: normal (400), bold(700), or a number from 100 to 900 if the family has those cuts. font-style: italic slants the letters when an italic face exists; otherwise the browser may fake an oblique.
Example
<style>
.name {
font-weight: 700;
color: #0c4a6e;
}
.note {
font-style: italic;
color: #0f766e;
}
.light {
font-weight: 300;
color: #0284c7;
}
</style>
<p class="name">Harbor studio</p>
<p class="note">Last firing at 16:00.</p>
<p class="light">Light weight — only if the file includes it.</p>Asking for font-weight: 300 when the file only has 400 and 700 makes the browsersynthesize a thinner face. It often looks muddy. Load the weights you name, or stick to normal and bold.
The font shorthand
font packs style, weight, size, line-height, and family in one declaration. Size and family are required. Line-height follows size after a slash: 1.125rem/1.6.
Example
<style>
body {
font: 1.125rem/1.6 system-ui, sans-serif;
color: #0c4a6e;
}
h1 {
font: 700 2rem/1.2 Georgia, serif;
color: teal;
}
</style>
<h1>Harbor studio</h1>
<p>One shorthand for the page, another for the heading.</p>| Property | Typical values |
|---|---|
font-family | Name, then a generic fallback |
font-size | 1rem, 1.25rem, 2rem |
font-weight | 400 / normal, 700 / bold |
font-style | normal, italic |
Next: links. The same family can look like a quiet paragraph or a teal booking link once you style thea states.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Astronomy
A serif fact sheet
font-family is a stack: try Georgia, then Times, then generic serif. The fallback is not decoration; it is what loads when the first face is missing.
font-weight 700 is bold. 400 is regular. Italic is font-style, not a fake slant if you can help it.
Example
<style>
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
p { font-size: 1.05rem; }
</style>
<h1>Mars</h1>
<p>Year ≈ 687 Earth days.</p>Chemistry
An italic species-style note
font-style: italic on a class is typography. em in HTML is stress. Prefer the HTML tag when the words are emphasised; use CSS italic for a caption voice.
Example
<style>
.whisper { font-style: italic; color: #166534; }
</style>
<p class="whisper">Wear goggles — HCl is corrosive.</p>