Web · Text and Font Styles
Quizz
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Proper Font Family Declaration
Which of the following is the correct way to specify Arial as the primary font, with sans-serif as a fallback?
Options
• ```font-family: Arial, sans-serif;```
• ```font-family: "Arial"; font-family: "sans-serif";```
• ```font-family: Arial + sans-serif;```
• ```font-family: (Arial, sans-serif);```
Hint : Remember that multiple font families should be separated by commas, with the preferred font listed first and generic fallback fonts at the end.
Exercise 2 — Complete the Font Styling
Complete the CSS to make the heading large, bold, and use a serif font.
h1 {
____ 24px;
____ ____;
font-family: Georgia, ____;
}
Options: font-size: font-weight: bold font-style: italic serif
Hint : Think about the properties needed to control the size and weight of text, and the appropriate fallback for a serif font.
Exercise 3 — Match Text Properties with Their Effects
Match each CSS property with its visual effect:
Items to match
• text-align: center;
• text-decoration: underline;
• text-transform: uppercase;
• font-style: italic;
Definitions
• Centers text horizontally within its container
• Adds a line beneath the text
• Converts all characters to capital letters
• Slants the text to the right
Exercise 4 — Line Height Units
Which line-height value is most recommended for maintaining proper spacing across different font sizes?
Options
• ```line-height: 1.5;```
• ```line-height: 24px;```
• ```line-height: 150%;```
• ```line-height: 1.5em;```
Hint : Consider which type of value will scale proportionally when font sizes change, rather than remaining fixed.
Exercise 5 — Complete the Link Styling
Complete the CSS to style links as uppercase with no underline and red color when hovered.
a {
____ none;
____ uppercase;
}
a:hover {
color: ____;
}
Options: text-decoration: text-transform: red underline font-weight: bold
Hint : Consider which properties control the underlining of text and the case transformation of letters.
Exercise 6 — Match Elements with Their Purpose
Match each HTML element or CSS property with its correct purpose:
Items to match
• <br>
• <hr>
• letter-spacing
• word-spacing
Definitions
• Creates a line break within text
• Creates a horizontal rule (line) to separate content
• Controls the space between characters
• Controls the space between words
Exercise 7 — Font Weight Values
Which font-weight value represents a bolder weight than normal but lighter than bold?
Options
• ```font-weight: 600;```
• ```font-weight: normal;```
• ```font-weight: bolder;```
• ```font-weight: 300;```
Hint : Remember that font-weight can use numeric values from 100 to 900, where 400 is normal and 700 is bold.
Exercise 8 — Complete the Paragraph Styling
Complete the CSS to create justified paragraph text with increased line spacing.
p {
____ ____;
____ 1.6;
}
Options: text-align: justify line-height: text-justify: center margin:
Hint : Use `text-align` to control the alignment and `line-height` to adjust the vertical spacing between lines of text.
Exercise 9 — Match Text Decoration Properties
Match each text-decoration property with its effect:
Items to match
• text-decoration-line: underline;
• text-decoration-style: wavy;
• text-decoration-color: red;
• text-decoration: line-through;
Definitions
• Adds a line beneath the text
• Makes the decoration line wavy instead of solid
• Changes the color of the decoration line
• Creates a strikethrough effect on text
Exercise 10 — Responsive Font Size
Which font-size unit is best for creating responsive text that scales with the viewport size?
Options
• ```font-size: 5vw;```
• ```font-size: 20px;```
• ```font-size: 1.5em;```
• ```font-size: 150%;```
Hint : Consider which unit is specifically designed to scale in relation to the viewport (browser window) dimensions rather than parent elements or default sizes.
Exercise 11 — Complete the Title Styling
Complete the CSS to make the title appear in uppercase letters and centered alignment.
h2 {
____ uppercase;
____ center;
}
Options: text-transform: text-align: font-weight: transform: text-style: justify-content:
Hint : `text-transform: uppercase` turns all letters into capital letters, and `text-align: center` aligns the text to the center.
Exercise 12 — Match Font Style Properties
Match each CSS code snippet with its visual description:
Items to match
• font: italic bold 16px/1.5 Arial, sans-serif;
• font: small-caps 14px Georgia, serif;
• text-shadow: 2px 2px 4px #000000;
• font-stretch: condensed;
Definitions
• Italic, bold, 16px Arial text with 1.5 line height
• 14px Georgia text with small caps
• Text with a black shadow offset 2px right and down
• Narrower version of the font if available
Exercise 13 — Text Alignment Practice
Which CSS rule will center the text inside a heading element?
Options
• ```text-align: center;```
• ```align-items: center;```
• ```margin: auto;```
• ```justify-content: center;```
Hint : `text-align: center;` is the correct way to horizontally center inline content like text.
Exercise 14 — Style a Horizontal Rule
Complete the CSS to create a custom horizontal line with a solid color and no default border.
hr {
height: 3px;
____ none;
____ black;
margin: 20px 0;
}
Options: border: background-color: color: border-style: width: font-size:
Hint : `border: none` removes the default line style, and `background-color` gives your `<hr>` its new color.
Exercise 15 — Match Spacing Properties
Match each spacing property with its purpose:
Items to match
• line-height
• letter-spacing
• word-spacing
• text-indent
Definitions
• Controls the height of each line of text
• Adjusts space between individual characters
• Adjusts space between words
• Sets the indentation of the first line of text
Exercise 16 — Web Safe Fonts
Which of the following font-family combinations is most likely to display consistently across different operating systems?
Options
• ```font-family: Arial, Helvetica, sans-serif;```
• ```font-family: Futura, Avenir, sans-serif;```
• ```font-family: "Codemon Sans", Arial, sans-serif;```
• ```font-family: serif;```
Hint : Think about which font combinations include fonts that are widely installed across different operating systems (web-safe fonts).
Exercise 17 — Style a Title
Complete the CSS to make the title red and center-aligned.
h1 {
____ #cc0000;
____ center;
}
Options: color: text-align: background: font-weight: align: text-style:
Hint : `color` changes the text color, and `text-align` adjusts how the text is aligned inside its container.
Exercise 18 — Match CSS with Text Effects
Match each CSS rule with the effect it creates:
Items to match
• text-transform: uppercase;
• text-align: center;
• font-weight: bold;
• font-style: italic;
Definitions
• All letters become capital letters
• Text is centered in its container
• Text appears thicker or stronger
• Text is slanted to the right
Exercise 19 — Best Line Height Value
Which line-height value creates the most readable text for paragraphs?
Options
• ```line-height: 1.5;```
• ```line-height: 1;```
• ```line-height: 3;```
• ```line-height: 0;```
Hint : A line-height value between 1.4 and 1.6 is generally considered ideal for paragraph text readability, providing enough space between lines without making them too far apart.
Exercise 20 — Text Alignment Properties
Complete the CSS to create a card with a centered heading and justified paragraph text.
.card h2 {
____ center;
}
.card p {
____ justify;
}
Options: text-align: align: text-justify: alignment: text-align: align: text-justify: alignment:
Hint : Remember that text-align is the property that controls horizontal alignment of text within its container.
Exercise 21 — Match Font Size Units
Match each font size unit with its description:
Items to match
• px
• em
• rem
• vw
Definitions
• Fixed size that doesn't scale with user settings
• Relative to the font-size of the parent element
• Relative to the font-size of the root element
• Relative to 1% of the viewport width
Exercise 22 — Proper Use of Line Breaks
Which is the most appropriate use of the <br> element?
Options
• Breaking a line in a poem or address
• Creating space between paragraphs
• Creating a horizontal divider between sections
• Breaking words that are too long
Hint : Think about the semantic purpose of <br> - when is it appropriate to force a line break within a block of text?
Exercise 23 — Style Block Quotes
Complete the CSS to style a blockquote with italics, indentation, and a left border.
blockquote {
____ italic;
padding-left: 20px;
____ 5px solid #cccccc;
margin-left: 20px;
}
Options: font-style: border-left: text-style: border: font-family: text-indent:
Hint : Consider which property controls italic text and which property adds a border only on the left side of an element.
Exercise 24 — Match Text Properties with Their Purpose
Match each CSS property with its purpose:
Items to match
• line-height
• text-decoration
• font-weight
• text-transform
Definitions
• Controls spacing between lines of text
• Adds or removes underlines, strikethroughs, etc.
• Controls how bold or light the text appears
• Changes text to uppercase, lowercase, or capitalized
Exercise 25 — Font Family Best Practice
Which of the following is the best practice when specifying font families in CSS?
Options
• Include both specific fonts and a generic fallback family
• Only specify one font that all users are likely to have
• Only use generic font families like serif or sans-serif
• Avoid using font-family and rely on browser defaults
Hint : It's best to provide a list of font options, starting with your preferred font and ending with a generic fallback like serif or sans-serif, to ensure text displays properly for all users.