Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Working with Shorthand Properties

Problem

You want to use shorthand properties in stylesheets.

Solution

Begin with a properly marked up section:

<h3>Shorthand Property</h3>
<p>Combine properties with shorthand and save time, typing, and a
few bytes. Your stylesheets will also be easier to read.</p>

Then use just one instance of the font property instead of using font-style, font-size, and font-family:

h3 {
 font: italic 18pt verdana, arial, sans-serif;
}
p {
 border: 2pt solid black;
}

Discussion

You can toss several CSS properties in favor of shorthand properties.

The border property is a shorthand property that combines three properties into one. The border property can cover the values from the following properties:

  • border-color

  • border-width

  • border-style

The font property is a shorthand property that combines five properties into one. The font property can cover the values from the following properties:

  • font-style

  • font-size/line-height

  • font-family

  • font-weight

  • font-variant

Enter the values just as you would with any other property, except for font-family and font-size/line height. With font-family, enter the fonts in the priority you wish them to have and use a comma between each.

If you use both font-size and line-height, separate their values with a forward slash:

h3 {
 font: italic 18pt/20pt verdana, arial, sans-serif
}

For a rundown of the shorthand properties available to web developers, see Table 2-6.

Table 2-6. Shorthand properties

Property

Values

Example

background

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required