4. CSS text styling

Styling

Core modules

This module focuses specifically on CSS font and text styling, including loading custom web fonts and applying them to your text.

4.1 Text and font styling

Learning outcomes:

  • color.
  • Font family, font stacks, web safe fonts.
  • font-size, font-weight, and font-style.
  • text-align, text-transform, and text-decoration.
  • text-shadow.
  • line-height.

Notes:

There are several other font and text styling properties, and students should be encouraged to explore more of them as part of their constant learning.

Resources:

Learning outcomes:

  • Spacing list items, for example, with margin or line-height.
  • list-style properties.
  • Understand why default link styles are important for usability on the web — they are familiar and help users recognize links.
  • Styling link states: :hover, :focus, :visited, and :active:
    • Understand why these are necessary for usability and accessibility.
  • Creating a navigation menu with lists and links.

Resources:

4.3 Web fonts

Learning outcomes:

  • Understand that web fonts allow developers to go beyond the web safe font set and use custom fonts on their web apps.
  • Basic setup — the @font-face at-rule, and font-family and src descriptors.
  • Using a web font with the font-family property.
  • Other descriptors — font-weight, font-style, etc.
  • Using an online service to find web fonts and generate web font code, for example, Font Squirrel and Google Fonts.
  • Usability implications of web fonts — using several of them can increase page download size.

Resources:

Previous: 3. CSS fundamentalsNext: 5. CSS layout