Summarized and abbreviated writing forms in CSS

The syntax offers several options for grouping instructions of certain elements. Let's see a couple of examples:

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

Since the edge is identical in all four sides, the instructions can be summarized:

.element {
border: solid 1px #336699;
}

In the abbreviated form, all the properties can be annotated consecutively, separated by a blank space. The order in which they appear does not matter.

Possibly similar are offered, for example, in margin and padding (outer and inner distances).

.element {
margin: 5px;
}

The element obtains a margin of 5 pixels on all four sides even when several values are necessary, there are many things that can be simplified:

.element {
margin: 5px 0;
}

Here we have defined a top and bottom margin of 5 pixels, and 0 pixels to the right and left (to the value 0 [zero] you do not have to add any unit of measurement).

.element {
margin: 0 5px 10px;
}

This syntax means that we are creating a superior margin of 0 pixels, a right and left margin of 5 pixels and a lower margin of 10 pixels.

.element {
margin: 5px 5px 10px 20px;
}

Here we have a margin with different values on each side. The reading of the values is always done from above and in a clockwise direction, that is:

Top margin = 5 pixeles.
Right margin = 5 pixeles.
Bottom margin = 5 pixeles.
Left margin = 5 pixeles.

In writing mode, no doubt, much more practical than a script with all the explicit details:

.element {
margin-top: 5px;
margin-right:5px;
margin-bottom:10px
margin-left:20px;
}

Other elements that simplify the syntax considerably are tag families such as <a> and <h>. The syntax of the following groups is not incorrect, but it is too long:

a:link {
font-family:Arial, sans-serif;
font-weight:bold;
text-decoration:underline;
background-color: #ffffff;
color:#0066ff;
}
a:visited {
font-family: Arial, sans-serif;
font-weight:bold;
text-decoration:underline;
background-color: #ffffff;
color:#006699;
}
a:hover {
font-family: Arial, sans-serif;
font-weight:bold;
text-decoration:underline;
background-color:#ffffff;
color:#000066;
text-decoration:underline overline;
}
a:active, a:focus {
font-family: Arial, sans-serif;
font-weight:bold;
text-decoration:underline;
background-color: #ffffff;
color: #ff9900;
}

The following syntax, on the other hand, requires fewer lines of code and offers greater clarity. In them the values that remain the same have been grouped, and for the corresponding status only the divergent values have been noted:

a {
font-family: Arial, sans-serif;
font-weight:bold;
text-decoration: underline;
background-color:#ffffff;
}
a:link{
color:#0066ff;
}
a:visited{
color:#006699;
}
a:hover {
color:#000066;
text-decoration:underline overline;
}
a:active, a:focus{
color:#ff9900;
}

Even the values for the color, usually in hexadecimal notation, can also be simplified:

.element {
background: #09c;
}

# 09c means here # 0099cc - all colors with pairs formed by identical values, can be simplified in that way - # 000000 becomes # 000, # bb99ff becomes # b9f, # 66cc33 changes to # 6c3, etc. On the contrary, values like # 000043 or # 65ffab cannot be simplified.

Proprietary syntax

If you look at other types of style sheets, you can check that the property names of some rules are sometimes entered with hyphens. This syntax is reserved for the specific annotations of the manufacturers (owners) and only serve to test (test) the new properties. Each manufacturer has thus introduced its own abbreviation which serves to identify its annotations and proposals, for example:

1. -moz- para Mozilla
2. -o- para Opera
3. mso- for Microsoft (skipping, as usual, a convention: it does not write a script at the beginning)

Using them hinders the correct validation of the style sheet, so it does not guarantee operation with all browsers.