The CSS Font Shorthand Property
To make the code shorter, you can set all the font properties in one declaration.
The font property is a shorthand for: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.
Rules for the CSS Font Shorthand Property
- The
font-sizeandfont-familyvalues are required. If any other value is missing, its default is used. - If set,
font-style,font-variant, andfont-weightmust come beforefont-size. - If set,
line-heightmust come right afterfont-size, separated by a slash, like15px/30px. font-familymust be the last value.
Example
Three paragraphs set several font properties at once with the font shorthand.
Prompt
An HTML page that uses the font shorthand property.
In an internal
<style> block, make three paragraph classes: a with "20px Arial, sans-serif"; b with "italic bold 16px Arial, sans-serif"; and c with "italic small-caps bold 15px/30px Georgia, serif". Add a paragraph of each class.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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;
}
</style>
</head>
<body>
<p class="a">A paragraph using font: 20px Arial.</p>
<p class="b">A paragraph using font: italic bold 16px Arial.</p>
<p class="c">A paragraph using font: italic small-caps bold 15px/30px Georgia.</p>
</body>
</html>
All CSS Font Properties
A summary of the font properties:
font— sets all the font properties in one declaration.font-family— sets the font family.font-size— sets the font size.font-style— sets the font style.font-variant— sets whether the text uses a small-caps font.font-weight— sets the weight of the font.