HTML and CSS Reference
In-Depth Information
In the first rule set, we've defined all three border-related properties in longhand, setting the
values to display a dashed border that's 2px wide and colored blue. But what's the result of
these two rule sets? Well, the border will become 3px wide (the default border width for a
visible border,) and it'll be colored green, not blue. This happens because the second rule set
uses shorthand to define the border-style as
solid
, but doesn't define the other two proper-
ties (
border-width
and
border-color
).
This might sound a bit complicated at first, but it's worth experimenting with to get the hang
of it. Just understand that if you don't define all the properties represented in a shorthand
property,themissingoneswillreverttotheirdefaults,ratherthaninheritingfromanyexisting
styles.
In most cases, this won't cause too many problems, but in some instances (for example, when
using the font shorthand property) it could have undesirable and confusing results, as
de-
Anotherthingtounderstandaboutshorthandisthatforcertainshorthandproperties,themiss-
ing values are inherited based on the existing values. Two good examples, which you'll often
use in this way, are
margin
and
padding
. For example:
.box {
padding: 20px 10px 15px;
}
padding for the top, right, bottom, and left, in that order. The fourth value (referencing the
left padding) is missing, but it is assumed to be 10px, which matches the opposite side pad-
ding (the second value declared). Ifwe had omitted two values, then the bottom would inherit
from the top in addition to the left inheriting from the right.
The same principle applies to other shorthand properties like
margin
,
border-color
,
and
border-width
. So the following two lines of code would yield the exact same results:
.example {
margin: 10px 20px 10px 20px;
}
.example {
