Web Standard Basics Tutorial: CSS Shorthand Guide

One of the most efficient CSS writing is to use shorthand. You can make your CSS file smaller and easier to read by shorthand. Understanding CSS attributes Shorthand is also one of the basic skills of front-end development engineers. Today we systematically summarize the abbreviations for CSS properties.

Color abbreviation

The simplest color abbreviations, in the color value of 16, if the value of each color is the same, you can write a:

Color: #113366

can be abbreviated to

Color: #136

All of the 16 color values used in the place can be abbreviated, such as Background-color, Border-color, Text-shadow, Box-shadow and so on.

Box size

This is mainly used for two properties: margin and padding, we take margin as an example, padding is the same. The box has four directions up and down, with an outer margin in each direction:

margin-top:1px;


margin-right:1px;


margin-botton:1px;


margin-left:1px;

These four values can be abbreviated together:

margin:1px 1px 1px 1px;

The abbreviated order is upper-> right-> down-> left. Clockwise direction. The values for the opposite edges are the same, you can omit:

margin:1px;//Four directions of the same margin, equivalent to margin:1px 1px 1px 1px;


margin:1px 2px;//up and down margins are 1px, left and right margins are 2px, equivalent to margin:1px 2px 1px 2px


margin:1px 2px 3px;//the right and left margins are the same, equivalent to margin:1px 2px 3px 2px;


margin:1px 2px 1px 3px;//Note that although the top and bottom margins are 1px, this is not abbreviated here.

Border (border)

Border is a relatively flexible property that has border-width, Border-style, Border-color three child properties.

border-width: number + unit;


Border-style:none | | Hidden | | Dashed | | Dotted | | Double | | Groove | | inset | | Outset | | Ridge | | solid;


Border-color: color;

It can be abbreviated in the order of width, style, and color:

border:5px solid #369;

Sometimes, border can write simpler, some values can be omitted, but please note which is necessary, you can also test:

Border:groove Red; Guess what the width of this border is?


Border:solid; What's it going to look like?


border:5px; Is that okay?


border:5px Red; Is that OK?


border:red; Is that OK?