CSS Tutorial
CSS Text
Align, decorate, transform, and space letters. Line-height is the most important reading control.
Align the line
text-align sets how inline content sits inside a block: left,right, center, or justify. It does not move the block itself. A Harbor studio heading centered with text-align still spans the full width of its parent; only the letters shift.
Example
<style>
.mast {
text-align: center;
color: #0c4a6e;
}
.hours {
text-align: left;
color: #475569;
}
</style>
<h1 class="mast">Harbor studio</h1>
<p class="hours">Open 8–16 on Harbor Street.</p>justify stretches spaces so both edges line up. On a narrow phone it often makes uneven rivers of white. Prefer left (or start) for body copy.
Line-height is the reading control
line-height is the height of each line box — the space from one baseline to the next. It is the property that makes a paragraph comfortable or cramped. A unitless number such as1.5 multiplies the element’s font size. That scales when the visitor zooms text.
Example
<style>
.tight {
line-height: 1.15;
color: #0c4a6e;
}
.readable {
line-height: 1.6;
max-width: 36rem;
color: #0c4a6e;
}
</style>
<p class="tight">Harbor studio fires clay every Tuesday. Tight lines feel busy.</p>
<p class="readable">
Harbor studio fires clay every Tuesday. A taller line-height leaves air between rows so the eye can track
the next line without losing the start of the sentence.
</p>| line-height | Feels like |
|---|---|
1.15–1.25 | Headings, short labels |
1.5–1.7 | Body paragraphs |
2 | Double-spaced notes, usually too loose for a page |
Unitless line-height is the usual choice. line-height: 24px stays 24 pixels even iffont-size grows, which can clip descenders.
Decoration and transform
text-decoration draws a line: underline, overline,line-through, or none. Links are underlined by default; you can restyle the line’s color and thickness with text-decoration-color andtext-decoration-thickness.
text-transform changes case in the stylesheet: uppercase,lowercase, capitalize. The HTML still holds the original letters. Prefer writing a heading in normal case in HTML, then transforming it in CSS if the design needs small caps or a shouty kicker.
Example
<style>
.kicker {
text-transform: uppercase;
letter-spacing: 0.12em;
color: teal;
font-size: 0.85rem;
}
.old {
text-decoration: line-through;
color: #64748b;
}
.book {
text-decoration: underline;
text-decoration-color: #0284c7;
text-underline-offset: 3px;
color: #0c4a6e;
}
</style>
<p class="kicker">Harbor studio</p>
<p><span class="old">Walk-in only</span> — bookings on the slip.</p>
<p class="book">Reserve a kiln slot</p>Letter-spacing and word-spacing
letter-spacing adds space between characters. A little extra tracking on uppercase kickers helps them read. Large spacing on body copy makes words fall apart. word-spacingadjusts the gap between words; leave it at the default unless you are repairing a justified line.
Example
<style>
h1 {
letter-spacing: 0.04em;
color: #0c4a6e;
}
p {
word-spacing: 0.05em;
line-height: 1.6;
color: #334155;
}
</style>
<h1>Harbor studio</h1>
<p>Tide charts hang by the kiln. Letter-spacing on the heading; body stays nearly default.</p>Negative letter-spacing can glue letters together and fail readability checks. If a heading feels too wide, shorten the copy or reduce font-size before you crush the gaps.
Indent, wrap, and shadow
text-indent offsets the first line of a block — useful for print-like essays, rare on screens. white-space: nowrap keeps a label on one line; overflow-wrap: break-wordlets a long URL break instead of overflowing a card. text-shadow lifts letters; keep blur small so the type still reads.
| Property | Job |
|---|---|
text-align | Left, right, center, justify |
line-height | Space between lines |
text-decoration | Underline, strike, none |
text-transform | Case without editing HTML |
letter-spacing | Tracking between letters |
Next: fonts. Alignment and line-height sit on top of a family, a size, and a weight.
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.
Biology
Line-height on a protocol
line-height is the most important reading control. 1.5–1.7 on body copy. 1.1 on a large heading. max-width in ch stops a line from spanning the whole monitor.
letter-spacing on a small caps label is a glance layer. Do not space out paragraphs; that is how body text falls apart.
Example
<style>
p { line-height: 1.7; max-width: 36ch; color: #44403c; }
.label { letter-spacing: 0.16em; text-transform: uppercase; color: #9f1239; }
</style>
<p class="label">Fever</p>
<p>Oral 38.4 °C. Rest and fluids unless a clinician says otherwise.</p>Maths
A centred theorem title
text-align:center centres inline content in the block. The block itself still spans the column unless you also set a width.
a² + b² = c²
Example
<style>
h1 { text-align: center; color: #3730a3; }
</style>
<h1>Pythagoras</h1>
<p style="text-align:center">3, 4, 5</p>