Font properties
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which property sets the typeface of text?
2. Is font-weight: 700; the same as font-weight: bold;?
3. Which value makes text slant to the right using font-style?
4. Must you always include a fallback generic font in font-family?
5. Does font-size: 24; (without a unit) work in CSS?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1font-family: Arial, sans-serif; | AInvalid — font-size must include a unit such as px, em, or rem | |
| 2font-weight: bold; | Bfont: italic bold 18px Georgia; | |
| 3font-style controls slant (italic or normal) | CSets the typeface to Arial with sans-serif as a fallback | |
| 4The font shorthand sets size and family at minimum | Dfont-style: italic; | |
| 5font-size: 24; | EMakes text appear heavier/thicker — equivalent to the numeric value 700 | |
| 6font-family: Times New Roman, serif; | FInvalid — multi-word font names must be wrapped in quotes: "Times New Roman" |
C
Definitions
font-family
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
p { ___________: Arial, sans-serif; }
2.
h1 { _________: 32px; }
3.
p { font-weight: ____; }
4.
em { font-style: ______; }
5.
p { ____ : bold 16px Arial; }
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
font-family: Comic Sans, serif;
B
font-size: 18px;
C
font-weight: bold;
Question 2
A
h2 {
B
font-size: 24;
C
font-weight: bold;
D
}
Question 3
A
p {
B
font-family: Arial, sans-serif;
C
font-stile: italic;
D
}
Question 4
A
p {
B
font-family: Arial;
C
font-weight: 700;
D
font-size: normal;
E
}
Question 5
A
h1 {
B
font-size: 2em;
C
font-style: italic;
D
font-family: Georgia serif;
E
}
Answer Key
Font properties
Section A: Quick Questions
Q1
B — font-family
Q2
A — Yes — 700 equals bold
Q3
A — italic
Q4
B — Best practice — yes
Q5
A — No — a unit is required
Section B: Match the Pairs
Q1
font-family: Arial, sans-serif; → Sets the typeface to Arial with sans-serif as a fallback
Q2
font-weight: bold; → Makes text appear heavier/thicker — equivalent to the numeric value 700
Q3
font-style controls slant (italic or normal) → font-style: italic;
Q4
The font shorthand sets size and family at minimum → font: italic bold 18px Georgia;
Q5
font-size: 24; → Invalid — font-size must include a unit such as px, em, or rem
Q6
font-family: Times New Roman, serif; → Invalid — multi-word font names must be wrapped in quotes: "Times New Roman"
Section C: Definitions
Q1
font-family — A CSS property that sets the typeface for text, accepting a prioritised list of font names with a generic fallback such as serif or sans-serifSection D: Fill in the Blanks
Q1
p { font-family: Arial, sans-serif; }Q2
h1 { font-size: 32px; }Q3
p { font-weight: bold; }Q4
em { font-style: italic; }Q5
p { font: bold 16px Arial; }Section E: Spot the Error
Q1
A — Font names containing spaces must be quoted. It should be font-family: "Comic Sans", serif;
Q2
B — font-size needs a unit. It should be font-size: 24px; (or another valid unit like em or rem)
Q3
C — font-stile is a misspelling. The correct property name is font-style: italic;
Q4
D — normal is not a valid value for font-size. It should be a length like 16px or a keyword like medium
Q5
D — Multiple font names must be separated by commas. It should be font-family: Georgia, serif;