Recipe 2.11. 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 2-15 into italics, as you see in Figure 2-16.

Figure 2-15. The default rendering of a heading

Figure 2-16. 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&hellip;</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

As described in Recipe 1.12, 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; }

When setting the style headings, remember that browsers have their own default values for padding and margins of paragraphs and heading tags. These default values are generally based on mathematics, not aesthetics, so don't hesitate to adjust them to further enhance the look of your web document.