4. CSS text 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:

• Fundamental text and font styling

• Text and typography, web.dev (2021)

• Web-safe fonts, Scrimba Course Partner

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:

• Styling lists

• Styling links

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:

• Web fonts

• Fonts Knowledge, Google Fonts