Font and Text

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.

font

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

Dracula

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:

.dramatic {font: italic large "Impact"}

Shorthand properties let you set the values of several related CSS properties simultaneously. CSS defines shorthand properties for groups of related properties, such as font, background and margin. The properties in bold on the CSS reference page are all shorthand properties.

Google Fonts
Modern CSS lets you include actual fonts with your page so you know the user will have them. This is done with the @font-face rule and a font file, but you don't need to include the font yourself. Instead, you can generate a CSS style with Google Fonts and include the CSS they provide in your web page.

text

There are various styles to adjust the look of text without changing the font. For example, text-align sets the alignment of text, and can either be to the left, right, or center. Here's an example of each:

---

<p style="text-align: left">hello world</p>

hello world

---

<p style="text-align: right">hello world</p>

hello world

---

<p style="text-align: center">hello world</p>

hello world

---

(See the Reference page for other text styles.)

Store Challenge

Create a new style for the <h1> heading on your site that sets the font-family to "Arial Black". In case the user doesn't have "Arial Black", it should use Arial.