Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Font Property?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___: 20px Arial, sans-serif;3Order
Put the learning moves in the order that makes the concept easiest to apply.
All CSS Font Properties
Rules for the CSS Font Shorthand Property
The CSS Font Shorthand Property
The CSS Font Shorthand Property
To shorten the code, it is possible to specify all the individual font properties in one declaration.
The CSS font property is a shorthand property for:
- font-style
- font-variant
- font-weight
- font-stretch
- font-size
- line-height
- font-family
Rules for the CSS Font Shorthand Property
- The font-size and font-family values are required. If one of the other values is missing, their default value are used.
- If defined, font-style , font-variant and font-weight must precede font-size .
- If defined, line-height must immediately follow font-size , preceded by "/", like this: 15px/30px.
- font-family must be the last value specified.
Example
Formatted code
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic bold 16px Arial, sans-serif;
}
p.c {
font: italic
small-caps bold 15px/30px Georgia, serif;
}Live preview
All CSS Font Properties
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |