Learn

Lesson 06 / Typography

Styling Text With CSS

Time
43 min
Type
Reading + Practice
Level
Beginner

Use CSS font and text layout properties to control the appearance, spacing, and alignment of text.

Teacher Notes / In-Class Use

Demo Live

  • Model the core workflow from the lesson using a small class example.
  • Connect the example back to the first goal: Use font style properties like color, font-family, font-size, font-style, and font-weight

Try In Class

  • Style headings, paragraphs, and links on an existing page.
  • Have students make one visible change, save, refresh, and explain what changed.

Submit Or Check

  • Ask students to show the work in the browser, not only in the editor.
  • Have students commit their progress with a clear message when the checkpoint is stable.

Watch For

  • Students copying code without checking file paths, spelling, or capitalization.
  • Visual changes that work locally but break when the project is published.

Learning Goals

  • Use font style properties like color, font-family, font-size, font-style, and font-weight
  • Use text properties like transform, decoration, shadow, alignment, line-height, letter-spacing, and word-spacing
  • Connect text styling decisions to readability and visual hierarchy

Font Styles

Font styles affect the appearance of text within your HTML elements. Here are some key properties:

color

Updates the foreground color of the text. It also affects the color of any associated underlines included with text-decoration.

p {
  color: #1f2937;
}

MDN Link | Demo

font-family

Used to set a different font for your text. Use web-safe fonts to ensure consistent display across different devices and browsers.

The font stack is a list of fonts, from left to right, that the browser will try to load.

body {
  font-family: Arial, Helvetica, sans-serif;
}

MDN Link | Demo

font-size

Sets the size of the text. Common units include:

  • px: Fixed size
  • em: Relative to the parent
  • rem: Relative to the root
h1 {
  font-size: 2rem;
}

MDN Link | Demo

font-style

Used to toggle italics.

em {
  font-style: italic;
}

MDN Link | Demo

font-weight

Controls the boldness of text using keywords or numeric values from 100 to 900.

strong {
  font-weight: 700;
}

MDN Link | Demo

text-transform

Applies casing transformations to text.

.eyebrow {
  text-transform: uppercase;
}

MDN Link | Demo

text-decoration

Used for underlines and other text lines. Often used to style or remove link underlines.

a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

MDN Link | Demo

text-shadow

Applies shadow to text with horizontal offset, vertical offset, blur, and color.

h1 {
  text-shadow: 1px 1px 2px rgb(0 0 0 / 0.25);
}

MDN Link | Demo

Text Layout

These properties affect spacing and alignment of text:

text-align

Aligns text left, right, center, or justify.

p {
  text-align: center;
}

MDN Link | Demo

line-height

Controls spacing between lines. Use unitless values like 1.5 for better scalability.

p {
  line-height: 1.5;
}

MDN Link | Demo

letter-spacing

Controls spacing between letters.

.label {
  letter-spacing: 0.08em;
}

MDN Link | Demo

word-spacing

Controls spacing between words.

p {
  word-spacing: 0.1em;
}

MDN Link | Demo

Checkpoint

Before moving on, make sure these feel true.

  • I can explain the main concept in my own words.
  • I can apply this lesson to my current project.
  • I can verify the result in the browser.
  • I can commit the change with a clear message.

Project Connection

This lesson supports current class projects.

Project 01 Basic Webpage Create a basic webpage using HTML to practice structure, semantic markup, headings, paragraphs, lists, links, images, and basic styling.

Practice

  • Style headings, paragraphs, and links on an existing page.
  • Create a simple form and use CSS to improve readability and spacing.