Explore key aspects of typography and text utilities, including font styles, alignment, decoration, responsiveness, and whitespace options in modern utility-first CSS frameworks. This quiz will help you assess your understanding of how to effectively style and structure text using commonly used text-related classes.
Which utility class would you use to make a paragraph text bold in a utility-first CSS framework?
Explanation: The 'font-bold' class is the correct utility for applying bold font weight to text. 'text-bolder' and 'bold-font' are not standard class names and may not have the intended effect. 'font-weight' resembles traditional CSS property naming but does not function as a utility class in this system. Using the correct utility ensures consistent and expected styling.
If you need to align a heading to the right edge of its container, which class should you apply?
Explanation: 'text-right' is the correct utility for aligning text to the right. 'align-end' and 'right-align' are not recognized class names in the utility-first approach, and 'text-end' may be used in some contexts, but 'text-right' is the reliable standard. Choosing the exact class ensures proper application of the alignment style.
How would you create a heading that has a text size of '2xl' on small screens but increases to '4xl' on large screens?
Explanation: Using 'text-2xl lg:text-4xl' sets font size to '2xl' by default, switching to '4xl' at larger breakpoints. 'text-lg text-4xl' applies only the last declared utility, while 'lg:text-2xl text-4xl' would not produce the desired effect since it makes large screens smaller. 'text-4xl sm:text-2xl' would set a larger size by default and reduce it on smaller screens, which is the opposite approach.
A developer wants to underline a specific word for emphasis. Which utility should be used?
Explanation: 'underline' is the correct utility for applying an underline decoration. 'text-underline' and 'underlined' are not the correct utility class names and will not work as expected. 'text-lowerline' is not a valid utility and might be confused with other styling properties. Choosing the proper utility class ensures predictable styling for quick visual emphasis.
What class would you apply to a block of text to set its line height to a relaxed value for better readability?
Explanation: 'leading-relaxed' properly increases the line height for improved readability in body text. 'text-relax' and 'line-relaxed' are not standard utility names within this system and would not alter line spacing. 'space-relaxed' is related to spacing between elements, not lines. Applying the correct utility ensures desirable vertical rhythm in textual content.