Creating a Heading with Stylized Text

Creating a Heading with Stylized Text


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 into italics, as you see in Figure.

The default rendering of a heading

The stylized text of a heading


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;


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.

See Also

The CSS 2.1 specification for the font shorthand property at

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows