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 a large number of 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)

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