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.
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; }
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; }
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.
50+ CSS heading styles at http://www.cssbook.com/resources/css/headings/;
the CSS 2.1 specification for the font
shorthand
property
at http://www.w3.org/TR/CSS21/fonts.html#propdef-font.
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.