SELECTORS - CSS: Professional Techniques for Modern Layout - page 45

h at is how things work with most shorthands, anyway. h e exceptions are margin , pad-
ding , border-style , border-width , and border-color . In those cases, you have the
ef ect where missing values are “copied” from supplied values. Here's a list of some function-
ally identical declarations.

margin: 1em ; margin: 1em 1em 1em 1em ;
padding: 10px 25px ; padding: 10px 25px 10px 25px ;
border-color: red green blue ; border-color: red green blue green ;

And of course those values are in the order top-right-bottom-let , or TRBL (which keeps you
out of TRouBLe).

SELECTIVELY OVERRIDING SHORTHANDS
Just because shorthand properties i ll in undeclared defaults, that doesn't mean we have to
avoid them. In fact, it can be useful to declare 80% of what you want with a shorthand, and
override it in one place to get the other 20%.

Suppose you're trying to get a border that's three pixels wide, dotted, and black on three sides
with red on the fourth side (see Figure 2-5). You could write it out one side at a time, but that
would get repetitive. Instead, you can declare:

border: 3px dotted black ;
border-left-color: red ;

47

h at way, you tweak only the one little piece that needs to be dif erent than the rest. Even
better, you can do it all within the same rule.

Figure 2-5: Reddening one side of a border.