CSS Cookbook-Recipe 1.7 Creating a Heading with Stylized Text

Recipe 1.7 Creating a Heading with Stylized Text

Problem

You want to use CSS properties to design a heading that is different from the default. For example, you want to put the heading in Figure 1-14 into italics, as shown in Figure 1-15.

Figure 1-14. The default rendering of a heading

Figure 1-15. The stylized text of a heading

Solution

First, properly mark up the heading:

<h2>Designing Instant Gratification</h2>
<p>Online, activity of exchanging ideas is sped up. The 
distribution of messages from the selling of propaganda to the
 giving away of disinformation takes place at a blindingly fast
pace thanks to the state of technology...</p>

Then, use the font shorthand property to easily change the style of the heading:

h2 { 
 font: bold italic 2em  Georgia, Times, "Times New Roman", serif;
 margin: 0;
 padding: 0;
} 
p {
 margin: 0;
 padding: 0;
}

Discussion

A shorthand property combines several properties into one. The font property is just one of these timesavers. One font property can represent the following values:

font-style
font-variant
font-weight
font-size/line-height
font-family

The first three values can be placed in any order, while the others need to be in the order shown.

When you want to include the line-height value, put a forward slash between the font-size value and the line-height value:

p {
 font: 1em/1.5em Verdana, Arial, sans-serif;
}