11 Abbreviation Properties

Some CSS properties allow a string of values to be substituted for many properties, with the value separated by a space.

margin, pdding and border-width allow merging margin-top-width , margin-right-width and margin-bottom-width so on, form like this: property:top right bottom left; Counterclockwise order.

So the following:

p {border-top-width: 1px;border-right-width: 5px;border-bottom-width: 10px;border-left-width: 20px;}

Can be written as:

p {border-width: 1px 5px 10px 20px;}

border-width, border-color and border-style can also be merged together, for example:

p {border: 1px red solid;}

(same can be applied to border-top , border-right , etc.)

If you use only two values (for example margin: 1em 10em; ), the first value includes the top and bottom, and the second value is left or right.

Font properties can also be font merged using attributes.

p {font: italic bold 1em/1.5 courier;}

(Above "/1.5" is the value of Line-height)

To sum them up, try the following code:

p {font: 1em/1.5 "Times New Roman", times, serif;padding: 3em 1em;border: 1px black solid;border-width: 1px 5px 5px 1px;border-color: red green blue yellow;margin: 1em 5em;}

We recommend that you use abbreviated forms.