Font and Text

Premium Content - Free Preview

After covering the general way CSS works, it's time to go through a few specific areas. We'll cover text-related styles, colors, sizing, the box model and spacing of elements.


Many common styles are related to the font of an item. Here's an example:

.dramatic {
  font-style: italic;
  font-size: large; 
  font-family: "Impact";  

If you add the class dramatic to a paragraph:

<p class="dramatic">Dracula</p>

You'll get


font-family is used for setting the actual font of text. You should specify more than one font in case a user doesn't have the first font installed. (The browser will use the display the first font that's available.)

font-family: Impact, Charcoal, sans-serif;  

Shorthand Properties
Often, related CSS properties can be combined into shorthand properties. The above CSS properties could be replaced with one font shorthand property:

End of Free Content Preview. Please Sign in or Sign up to buy premium content.


Contact Us
Sign in or email us at [email protected]