Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Learn

Great job! You learned how to style an important aspect of the user experience: fonts!

Let's review what you've learned so far:

  1. The font-family property changes the typeface of text.
  2. Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not.
  3. Fallback fonts are used when a certain font is not installed on a user's computer.
  4. Google Fonts provides free fonts that can be used in an HTML file with the <link> element.
  5. Font size can be specified using pixels, ems, or percentages.
  6. The vertical spacing between lines of text can be modified with the line-spacing property.
  7. The horizontal spacing between words can be modified with the word-spacing property.
  8. The spacing between letters, the kernel, can be modified with the letter-spacing property.
  9. Text can appear bold with the font-weight property.
  10. Text can appear in italics with the font-style property.
  11. Text can appear in all uppercase or all lowercase with the text-transform property.
  12. 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.

Instructions

Take some time to experiment with your new knowledge of fonts in style.css. When you're done, you can proceed to the next unit.

Report a Bug
If you see a bug or any other issue with this page, please report it here.