Hello! Welcome back to your front-end development course.
In our last lesson, we focused on the "how" of CSS styling—using type, class, ID, and descendant selectors to target specific HTML elements. You learned that selectors are your way of telling the browser which elements you want to change.
Today, we'll focus on the "what." Now that you can select an element, what styles can you apply to it? We'll start with one of the most fundamental aspects of web design: typography. As a designer, you know that typography is crucial for setting a product's tone, ensuring readability, and creating a clear visual hierarchy. This lesson bridges that design knowledge with the code needed to implement it.
Our goal is to style text properties including font-family, font-size, color, and text-align. We'll translate your design decisions about fonts and text into functioning CSS.
1. The Foundation: Inheritance and the color Property
Before we dive into specific properties, we need to understand a core CSS concept: inheritance. Many CSS properties, especially those for text, are "inherited" by child elements from their parent. If you set a font and color on the <body> element, all the text inside the body (headings, paragraphs, lists) will adopt that style by default. This is incredibly efficient, allowing you to set base styles once.
Let's start with a video that introduces this concept and our first property, color.
Beginner’s guide to styling text with CSS
This video from Kevin Powell's channel provides an excellent introduction to styling text. The first part explains the powerful concept of inheritance, and a later segment covers the color property.
Please watch these two segments: Introduction to Text Styling and Inheritance (00:00 - 03:24): Focus on how setting a property like color or font-family on the body affects the entire page. Color Property and Specificity (13:39 - 17:45): Pay attention to how the color property works and why some elements, like links, don't inherit the color automatically. This is a great review of the specificity concept we touched on in the last lesson.
As the video demonstrated:
- Inheritance allows you to set global text styles on a high-level element like
<body>. - The
colorproperty sets the color of the text. - More specific selectors or default browser styles (like for links) can override inherited styles. You can then target those elements specifically to change their color.
For a quick written reference on the color property, you can consult the MDN documentation.
Fundamental text and font styling
The MDN article "Fundamental text and font styling" is a great resource to have on hand. This section focuses just on the color property.
Read the short section titled 'Color'. It reinforces what you just saw and shows the basic syntax.
2. Choosing a Typeface: font-family
In design, you choose a typeface to convey a certain mood or brand identity. In CSS, you use the font-family property to do the same. However, you can't assume a user has a specific font installed on their device. To handle this, we use a font stack.
A font stack is a comma-separated list of fonts. The browser will try to use the first font in the list. If it's not available, it moves to the second, and so on. It's best practice to end the list with a generic family name like sans-serif or serif as a final fallback.
body {
/* The browser will try to use Helvetica Neue. If not found, it tries Helvetica, then Arial.
If none are found, it will use the system's default sans-serif font. */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Notice that font names with spaces are wrapped in quotes.
Let's watch the next segment of the video to see this in action.
Beginner’s guide to styling text with CSS
Kevin Powell explains how to use font-family and the importance of creating a font stack.
Watch the segment on Font Family and Font Stacks (03:15 - 06:15). Focus on the syntax for listing multiple fonts and the purpose of the generic family fallback.
For a more in-depth explanation of web-safe fonts and font stacks, the MDN article is an excellent resource.
Fundamental text and font styling
This article provides more detail on web-safe fonts, generic font families, and how to construct a proper font stack.
Read the section 'Font families'. Pay attention to the tables listing web-safe fonts and the five generic font names. This will help you make robust font choices.
3. Setting the Scale: font-size
Setting a clear typographic scale is key to good UI design. The font-size property controls the size of your text. While you can use pixels (px), it's highly recommended to use relative units like rem for better accessibility.
px(Pixels): An absolute unit.font-size: 16px;will always be 16 pixels. This can override a user's browser settings for larger text, creating an accessibility issue.rem(Root EM): A relative unit.1remis equal to the font size of the root element (<html>), which is typically16pxby default. If a user has set their browser to display larger text,1remwill scale accordingly. Usingremrespects the user's preferences.
This next video segment explains the difference clearly.
Beginner’s guide to styling text with CSS
This is one of the most important parts of the lesson. Understanding rem units is crucial for modern, accessible web design.
Watch the section on Font Size and REM Units for Accessibility (06:06 - 09:01). Focus on why rem units are preferred over px for font sizes.
4. Controlling Flow: text-align
The text-align property is straightforward and works just like alignment tools in a design application. It controls the horizontal alignment of text within its container.
The most common values are:
left(the default for left-to-right languages)rightcenterjustify(spreads the text to fill the container's width)
Let's see a quick demonstration.
Beginner’s guide to styling text with CSS
The final video segment covers the text-align property.
Watch the section on the Text Align Property (20:08 - 21:54). This is a quick one that shows how to apply different alignment values.
5. Putting It All Together
Now, let's combine what you've learned about selectors and text properties. Here is a typical example of setting up base typography for a page and then overriding it for specific elements.
/* 1. Set base styles on the body using a TYPE selector */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1.125rem; /* This will compute to 18px if the root font-size is 16px */
color: #333; /* A dark gray, often easier on the eyes than pure black */
}
/* 2. Use a TYPE selector to style the main heading */
h1 {
font-size: 3rem; /* 48px */
color: #1a535c; /* A different color for emphasis */
text-align: center;
}
/* 3. Use a CLASS selector for a specific component */
.caption {
font-size: 0.875rem; /* 14px */
color: #888; /* A lighter gray for secondary text */
text-align: center;
}
In this example, we establish a readable default for all text on the body. Then, we use more specific selectors (h1 and .caption) to create the visual hierarchy, just as you would in a design tool.
Conclusion
Great work! You've just learned how to control the fundamental typographic properties of a webpage. This is a critical skill that directly translates your design mockups into real code.
Key Takeaways:
- Inheritance: Set base styles on parent elements like
<body>to apply them globally. color: Sets the text color.font-family: Use a "font stack" with fallbacks to ensure a consistent experience for all users.font-size: Useremunits to create scalable, accessible text that respects user preferences.text-align: Controls horizontal alignment with values likeleft,center, andright.
In our next lesson, we will move from styling text to styling the space around elements. You'll learn about the CSS box model, which includes the essential properties of margin, border, and padding. This is the foundation for creating layouts and managing space in your designs.
Can't find a good explanation? Sign up and we'll make it for you
Sign up