Recipe 1.12. Working with Shorthand Properties

Problem

You want to use shorthand properties in style sheets.

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 style sheets will also be easier to read.</p>

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

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

Discussion

Several CSS properties can be tossed in favor of shorthand properties.

The border property is a shorthand property, which 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, which combines three 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 order you wish for them to have priority and use a comma between each.

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

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

For a rundown on the shorthand properties available to web developers, see Table 1-4.

Table 1-4. Shorthand properties

Property	Values	Example
background	background-color background-image background-repeat background-attachment background-position	background: url(book.gif) #999 no-repeat top;
border border-left border-right border-top border-bottom	border-width border-style border-color	border: thin solid #000;
font	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar	font: 14px italic Verdana, Arial, sans-serif;
list-style	list-style-type list-style-position list-style-image	list-style: circle inside;
margin	margin-top margin-right margin-bottom margin-left	margin: 5px 0px 5px 10px; margin: 5px;
padding	padding-top padding-right padding-bottom padding-left	padding: 5px 10%;

See Also

The CSS 2.1 specification for border shorthand properties at http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties and font shorthand properties at http://www.w3.org/TR/CSS21/about.html#shorthand; and see Appendix B for a full listing of CSS properties.