Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 160

• One value sets an equal padding for all sides (Listing 5-45).

Listing 5-45. Padding Shorthand Property with One Value

#decor {
padding: 10px;
}

Similar shorthand notations can be used for setting border and margin property values with the border and
margin shorthand properties. Further padding, border, and margin properties can also be written in shorthand
notation. Listing 5-46 shows an example.

Listing 5-46. Border Properties That Can Be Shortened

.book {
border-width: 1px;
border-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}

Since the border color of each side is the same in this example, the properties in the third, fourth, fifth, and sixth
lines can be written as border-color (Listing 5-47).

Listing 5-47. The border-color Shorthand Property Sets the Border Color of Each Side of the Element

.book {
border-width: 1px;
border-style: solid;
border-color: #000;
}

Even if the border colors are different, they can be declared by the border-color shorthand property by simply
enumerating the desired colors in the top, right, bottom, left order (clockwise, starting from top).
All the previous properties can be shortened further to a single line, as shown in Listing 5-48.

Listing 5-48. The Shortest Border Declaration for Multiple Properties
.book {
border: 1px solid #000;
}

Implementation
There are three ways to implement CSS. The chosen method determines the scope of styling.

• Inline style : Styling with the most limited scope. An inline style is embedded in an (X)HTML
tag to which it exclusively applies. This CSS fragment is defined by the style attribute that
can be provided on most markup elements. The attribute value has the same syntax as the
contents of a CSS declaration block except that the delimiting braces are omitted [16].
Listing 5-49 shows an example.