CSS Explained: CSS Shorthand Properties Overview

What are they?

Shorthand properties are CSS properties that let you set the values of multiple CSS properties at once. CSS shorthand groups the definition of common properties acting on the same theme.

For example, `background` can define the values for `background-color`, `background-image`, `background-repeat`, and `background-position`.

Another common example of shorthand properties is using `margin` and `padding` to define the respective values on an element at once. Without having to specify `top`, `right`, `left` and `bottom` individually.

Why should we use them?

By using shorthand properties we can be more concise in our code and in most cases more readable as well. This allows us to save time and energy in the long run making us more productive.

Edge Cases

While shorthand properties make us more productive, there are some edge cases we need to keep in mind when using them.

A value which is not specified will be set to it's initial value.

What this means, is if we don't specify a value in the shorthand, regardless if we have previously defined the value or not, it will be defaulted back to it's initial value.

For Example:

1background-color: blue;
2background: url(images/bg.gif) no-repeat left top;

You might expect, in this case that the `background-color` would still be blue but because the second declaration takes priority and it doesn't define a value for `background-color` it defaults it back to the initial value which is `transparent`.

Only individual properties values can inherit.

Missing values in a shorthand declaration are replaced by their initial or default value as described above. This makes it impossible to allow inheritance of individual properties by omitting them in a declaration.

The keyword `inherit` can only be applied to a property in whole, not on a per value basis. So if you do want to inherit a value, then you need to use the longhand property and specify `inherit`.

For example:

1/* This would not work */
2
3margin: 50px 50px 50px inherit;
4
5/* This would work */
6
7margin: 50px;
8margin-left: inherit;

Shorthand properties try not to force a specific order.

Shorthand CSS properties will try to not force a specific order on the properties they represent. This works great for properties that use different value types as the order has no importance. An example of this would be the `background` property or the `animation` property, we can specify values for those properties in any order.

However, this doesn't work when the properties replaced can have identical values. For example: `margin`, `padding`, `border-style` and `border-radius`. In these cases, we need to pay attention to the order and how we define them. Let's take a look at that now.

Edges of a box

Any properties like `margin`, `padding` and `border-style` that relate to the edge of a box, use a consistent 1-to-4 syntax representing the edges.

1. When 1 value is specified it represents every edge of the box
2. 2 values, represent the vertical first (top & bottom) and then the horizontal second (left & right)
3. 3 values, represents the top, horizontal and bottom in that order.
4. 4 values, represent the top, right, bottom and left. This is always in that order and never deviates. You can remember this by thinking of a clockwise clock or the initialism TRBL.

Corners of a box

Any properties like `border-radius` that represent the corners of a box, use a consistent 1-to-4 syntax as well:

1. 1 value, represents all the corners.
2. 2 values: 1st represents the top left and bottom right. 2nd represents the top right and bottom left.
3. 3 values: 1st represents the top left, 2nd represents the top right and bottom left. 3rd represents the bottom right corner
4. 4 values, represents each corner individually. In the order: top left, top right, bottom right and bottom left. In other words it goes clockwise starting from the top left.

Examples

Here are some examples to show how shorthand properties can shorten code.

Background Properties

A background with these properties...

1background-color: #000;
2background-image: url(images/bg.gif);
3background-repeat: no-repeat;
4background-position: left top;

Can be shortened to just one line...

1background: #000 url(images/bg.gif) no-repeat left top;

Font Properties

1font-style: italic;
2font-weight: bold;
3font-size: 0.8em;
4line-height: 1.2;
5font-family: Arial, sans-serif;

This can be shortened to...

1font: italic bold 0.8em/1.2 Arial, sans-serif;

Border Properties

1border-width: 1px;
2border-style: solid;
3border-color: #000;

Can be shortened to...

1border: 1px solid #000;

Margin and Padding Properties

1margin-top: 10px;
2margin-right: 5px;
3margin-bottom: 10px;
4margin-left: 5px;

Can be shortened to...

1margin: 10px 5px 10px 5px;

With these shorthand properties you can specify any number of values from 1-to-4, please see above for how the different numbers are applied to the element.

The Universal Shorthand Property

CSS provides a universal shorthand property `all`, this applies it's value to every property in the document.

The `all` property is designed to change the properties inheritance model to one of:

1. inherit - Sets the property value to be the same as the parent's
2. initial - Sets the property value to be initial value of that property
3. unset - Resets the property to it's natural value. This could be `inherit` if it naturally inherits, otherwise it will be `initial`.

There is a 4th value coming: revert but it has limited support right now.

Read More / Sources

Read more on MDN