CSS, How to use Shorthand Properties!
Saturday, 1. August 2009
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 file smaller and faster to load.
For example, the h2 element can be styled with font-style, font variant, font-weight, font-size, line-height, and font-family or with a single font property. see below:
Traditional:
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
line-height: 120%;
font-family: arial, helvetica, sans-serif;
}
Shorthand:
}
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.
Values for the short hand 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. Foe example, for the <p> element, you might want to only specify values for font-size and font-family
}
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 values.