May 4th 2021 | 3 Minutes Read
CSS Shorthand Properties Overview
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.
background can define the values for
Another common example of shorthand properties is using
padding to define the respective values on an element at once. Without having to specify
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.
While shorthand properties make us more productive, there are some edge cases we need to keep in mind when using them.
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.
background-color: blue; background: 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
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.
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
/* This would not work */ margin: 50px 50px 50px inherit; /* This would work */ margin: 50px; margin-left: inherit;
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:
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.
Any properties like
border-style that relate to the edge of a box, use a consistent 1-to-4 syntax representing the edges.
- When 1 value is specified it represents every edge of the box
- 2 values, represent the vertical first (top & bottom) and then the horizontal second (left & right)
- 3 values, represents the top, horizontal and bottom in that order.
- 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.
Any properties like
border-radius that represent the corners of a box, use a consistent 1-to-4 syntax as well:
- 1 value, represents all the corners.
- 2 values: 1st represents the top left and bottom right. 2nd represents the top right and bottom left.
- 3 values: 1st represents the top left, 2nd represents the top right and bottom left. 3rd represents the bottom right corner
- 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.
Here are some examples to show how shorthand properties can shorten code.
A background with these properties...
background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: left top;
Can be shortened to just one line...
background: #000 url(images/bg.gif) no-repeat left top;
font-style: italic; font-weight: bold; font-size: 0.8em; line-height: 1.2; font-family: Arial, sans-serif;
This can be shortened to...
font: italic bold 0.8em/1.2 Arial, sans-serif;
border-width: 1px; border-style: solid; border-color: #000;
Can be shortened to...
border: 1px solid #000;
margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px;
Can be shortened to...
margin: 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.
CSS provides a universal shorthand property
all, this applies it's value to every property in the document.
all property is designed to change the properties inheritance model to one of:
- inherit - Sets the property value to be the same as the parent's
- initial - Sets the property value to be initial value of that property
- unset - Resets the property to it's natural value. This could be
inheritif it naturally inherits, otherwise it will be
There is a 4th value coming: revert but it has limited support right now.
Want to get weekly notifications of my posts and more exclusive content?
Please consider signing up to my email newsletter.