Styling text

Sizing text

• font-size sets how big text is, usually in pixels: font-size: 24px;.
• font-weight: bold; makes text bold (use normal to undo it).
• font-family: Georgia; changes the typeface — the style of the letters.

Aligning text

• text-align moves text left, center, or right inside its box.
• text-align: center; is great for titles.
• line-height: 1.6; adds space between lines, so paragraphs are easier to read.

<style>
  h1 { font-size: 36px; text-align: center; }
  p  { font-family: Georgia; line-height: 1.6; }
</style>
<h1>My story</h1>
<p>Once upon a time, on a small website...</p>

Common mistakes

• font-size, font-weight and text-align control text.
• Sizes often use px or rem.

Now you try

• These properties stack up — one box can have several.
• Resize a heading, then center a paragraph.