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
, andfont-style
.text-align
,text-transform
, andtext-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
4.2 Styling lists and links
Learning outcomes:
- Spacing list items, for example, with
margin
orline-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, andfont-family
andsrc
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