Flash cards
Review the key moves
What is the main idea behind CSS Font Style?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-style: normal;Put the learning moves in the order that makes the concept easiest to apply.
The CSS font-style property specifies the font style for a text..
This property can have one of the following values:
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is "leaning" (oblique is very similar to italic)
Example
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}Live preview
CSS Font Weight
The CSS font-weight property specifies how thick or thin characters in text should be displayed.
This property can have one of the following values:
- normal - This is default. Defines normal characters
- bold - Defines thick characters
- bolder - Defines thicker characters
- lighter - Defines lighter characters
- 100-900 - Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold
Example
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}Live preview
CSS Font Variant
The CSS font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
Example
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}Live preview