Webpage standardization: simple examples of CSS code abbreviations!

Some CSS attributes allow a string of values to replace many attributes. Values are separated by spaces.
Margin, pdding, and border-width can be merged into margin-top-width, margin-right-width, margin-bottom-width, and so on, in the form of property: top right bottom left; it is in a counter-clockwise order.

So the following code:

P {
Border-top-width: 1px;

Border-right-width: 5px;

Border-bottom-width: 10px;

Border-left-width: 20px ;}

Can be written:

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 ;}

(It can also be applied to border-top, border-right, and so on)

If only two values are used (such as margin: 1em 10em;), the first value includes the top and bottom, and the second value includes the left and right.

Font attributes can also be merged.

P {
Font: italic bold 1em/ 1.5 courier ;}

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

Summarize them and 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 abbreviations to simplify and optimize CSS code!