What Is CSS Shorthand?
A CSS shorthand property is a property that can take multiple values, with each value relating to a different regular CSS property. Values are separated by spaces as shown below:
property: value1 value2 value3;
In this lesson, we will cover the following shorthand properties:
Benefits of Using CSS Shorthand
There are two major benefits of using CSS shorthand properties:
- Less code for you to write.
- Smaller files for the user to download.
Value Order of CSS Shorthand Properties
Some properties, such as border, allow you to rearrange values without affecting the display of the style. For example:
border: 1px solid black;
...will display the same as...
border: black 1px solid;
However, for other properties, such as padding and margin, order does matter as we'll see later in the lesson.
CSS Initial Values
Many CSS properties have initial values, which are specified in the Knowing how CSS initial values affect your styles will help you make your CSS shorthand code even shorter by omitting them from a declaration.
Omitting values from a shorthand property declaration will result in one of the following:
- CSS inserts a default called an initial value.
- The omitted value may be inherited from elsewhere in your CSS.
As an example, the initial values for the border property are shown below:
CSS Initial Values for the border Property
||inherited from a color property
Note that the initial value for the border style is "none". No border will appear unless you change this value even if you assign a border-width and border-color.
The following example demonstrates how you can remove values from the border property relying on CSS initial values as well as styles inherited from other property values.
We will indicate the initial values of properties as we introduce them throughout the lesson.