HTML and CSS Reference
In-Depth Information
.example {
border: dashed 2px blue;
}
The rule set above, which contains just one declaration, can also be written in longhand, like
this:
.example {
border-style: dashed;
border-width: 2px;
border-color: blue;
}
From this it's easy to see why you'll rarely come across the longhand version of border-re-
lated properties. It's simpler to use the shorthand, and it uses less code, which, in a large CSS
file, will make a small impact on page speed and probably a big impact on future code main-
tenance.
It should also be noted that if you leave out one of the values of a shorthand property, it will
cause that value to revert to its initial, or default, state. Let's combine our previous two code
examples so you can see how this works:
.example {
border-style: dashed;
border-width: 2px;
border-color: blue;
}
.example {
border: solid;
color: green;
}
Here we've used the same selector on two different rule sets. As we learned in Chapter 1, the
second rule set will take precedence over the first, overriding any styles that are the same in
both rule sets.
