Summary - Article typography
Combine typography properties to style an article.
All typography together
In this lesson you will combine the typography properties you have learned so far on an article page: font-family for the font, font-size and font-weight for size and thickness, line-height for line spacing, text-align for alignment, text-decoration and text-shadow for effects.
In two code tasks you will first style the article's heading, then its paragraph. Each declaration sharpens one side of the article.
Exercise Style the article heading
Open a block for the h1 selector. Add these four declarations inside: font-family: "Segoe UI", Arial, sans-serif;, font-size: 36px;, font-weight: bold; and text-shadow: 2px 2px 4px rgba(0,0,0,0.3);.
Show example solution
h1 {
font-family: "Segoe UI", Arial, sans-serif;
font-size: 36px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}Exercise Style the article paragraph
Open a block for the p selector. Add these four declarations inside: font-family: "Georgia", "Times New Roman", serif;, font-size: 18px;, line-height: 1.6; and text-align: justify;.
Show example solution
p {
font-family: "Georgia", "Times New Roman", serif;
font-size: 18px;
line-height: 1.6;
text-align: justify;
}Test yourself
-
Match each property to its job
- font-family
- Font family
- line-height
- Gap between lines
- text-align
- Horizontal alignment
- text-shadow
- Text shadow
-
Which value justifies a paragraph to both edges?
- text-align: center;
- text-align: justify;
- text-align: both;
- text-align: sides;
Show answer
text-align: justify; — Correct. text-align: justify; spreads lines to both edges.
-
Set the paragraph font
article { font-family: "Georgia", ____; }Show answer
article { font-family: "Georgia", "Times New Roman", serif; }