Great job! You learned how to style an important aspect of the user experience: fonts!
Let's review what you've learned so far:
- The
font-family
property changes the typeface of text. - Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not.
- Fallback fonts are used when a certain font is not installed on a user's computer.
- Google Fonts provides free fonts that can be used in an HTML file with the
<link
> element. - Font size can be specified using pixels, ems, or percentages.
- The vertical spacing between lines of text can be modified with the
line-spacing
property. - The horizontal spacing between words can be modified with the
word-spacing
property. - The spacing between letters, the kernel, can be modified with the
letter-spacing
property. - Text can appear bold with the
font-weight
property. - Text can appear in italics with the
font-style
property. - Text can appear in all uppercase or all lowercase with the
text-transform
property. - Text can be aligned with the
text-align
property.
So far, you've learned how to style color and fonts. Note, however, that all of the styling you've used is always applied to all elements of one type on a web page. For example, a p
selector in the stylesheet targets all <p>
elements on the web page. How can we be more selective about the elements we'd like to style?
In the next unit, you'll learn how to organize and label your HTML code so that you can be more selective with your CSS styling.