Shorthand Rules

To save space, groups of related CSS properties can be concatenated into a single shorthand assignment. For example, I have already used the shorthand for creating a border a few times, as in the focus rule in the previous section:

*:focus { border:2px dotted #888888; }

This is actually a shorthand concatenation of the following rule set:

*:focus {
    border-width:2px;
    border-style:dotted;
    border-color:#ff8800; }

When using a shorthand rule you need only apply the properties up to the point where you wish to change values. So you could use the following to set only a border’s width and style, choosing not to set its color, too:

*:focus { border:2px dotted; }

Note

The order in which the properties are placed in a shorthand rule can be important, and misplacing them is a common way to get unexpected results. Since there are far too many to detail in this chapter, if you wish to use shorthand CSS you will need to look up the default properties and their order of application using a CSS manual or search engine. To get you started I recommend visiting the following website: http://tinyurl.com/shcss.