CSS Font Style
The font-style property sets the style of the text. It can take one of these values:
normal— the text is shown normally.italic— the text is shown in italics.oblique— the text is leaning (very similar to italic).
Example
Three paragraphs show normal, italic, and oblique text.
Prompt
An HTML page that shows the font-style property.
In an internal
<style> block, make three paragraph classes: normal, italic, and oblique. 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.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This text is shown normally.</p>
<p class="italic">This text is shown in italics.</p>
<p class="oblique">This text is leaning (oblique).</p>
</body>
</html>
CSS Font Weight
The font-weight property sets how thick or thin the characters are. It can take one of these values:
normal— the default.bold— thick characters.bolder— thicker characters.lighter— lighter characters.100–900— from thin to thick. 400 is the same as normal, and 700 is the same as bold.
Example
Four paragraphs show normal, lighter, bold, and weight 900 text.
Prompt
An HTML page that shows the font-weight property.
In an internal
<style> block, make four paragraph classes: normal, lighter, bold, and 900. 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.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Normal weight text.</p>
<p class="light">Lighter weight text.</p>
<p class="thick">Bold text.</p>
<p class="thicker">Weight 900 text.</p>
</body>
</html>
CSS Font Variant
The font-variant property sets whether the text is shown in a small-caps font.
In a small-caps font, all lowercase letters become uppercase, but the converted letters are smaller than the original uppercase letters.
Example
One paragraph is normal and the other uses small-caps.
Prompt
An HTML page that shows the font-variant property.
In an internal
<style> block, make two paragraph classes: normal and small-caps. Add a paragraph of each class with mixed-case text so the small-caps effect is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>