Using Shorthand Properties

Using Shorthand Properties

Shorthand properties allow the values of several properties to be specified within a single property. Shorthand properties are easier to write and maintain. They also make CSS files more concise.

For example, the <h2> element can be styled with font-style, font-variant, font-weight, font-size, line-height, and font-family as shown in Listing 2.11, or with a single font property as shown in Listing 2.12 and Figure 2.4.

Most shorthand properties do not require the values to be placed in a set order. However, when using the font property, it is safer to set values in the order specified by the W3C, which is font-style, font-variant, font-weight, font-size, line-height, and font-family.

When font-size and line-height are used within the font property, they must be specified with font-size first, followed by a forward slash (/), followed by line-height, as shown in Listing 2.12.

Listing 2.11. CSS Code Highlighting All font Properties

h1, h2
{
    text-align: center;
    color: navy;
}

h2
{
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 100%;
    line-height: 120%;
    font-family: arial, helvetica, sans-serif;
}

p
{
    color: maroon;
}

Listing 2.12. CSS Code Highlighting Shorthand font Property

h1, h2
{
    text-align: center;
    color: navy;
}

h2
{
    font: italic small-caps bold 100%/120% arial, helvetica,
sans-serif;
}

p
{
    color: maroon;
}

Values for the shorthand font property include font-style, font-variant, font-weight, font-size, line-height, and font-family. However, all of these values do not need to be included in a shorthand declaration. For example, for the <p> element, you might want to only specify values for font-size and font-family as shown in Listing 2.13.

In this case, font-style, font-variant, font-weight, and line-height are not included in the shorthand property, so they will be assigned their default value. The results can be seen in Figure 2.5.

Listing 2.13. CSS Code Highlighting All font Properties

h1, h2
{
    text-align: center;
    color: navy;
}

h2
{
    font: italic small-caps bold 100%/120% arial, helvetica,
sans-serif;
}

p
{
    color: maroon;
    font: 80% arial, helvetica, sans-serif;
}