The Beginner’s Guide to CSS Shorthand

St. Jan. Vs. Dr. These are just a few examples of common abbreviations that you might use when writing a blog post, postcard, or text. Abbreviations can help you save space and time and avoid repeating long words and phrases.

Shorthand like this also exists in CSS. It can save developers time and space and make the codebase look cleaner by avoiding redundancies. Not all CSS properties can be written in shorthand, but some important ones can.

In this post, we’ll define what CSS shorthand is and then look at how to use the different shorthand properties.

What is CSS shorthand?

CSS shorthand is a group of CSS properties that allow values of multiple properties to be set simultaneously. These values are separated by spaces. For example, the border property is shorthand for the border-width, border-style, and border-color properties. So in CSS, border: 5px solid red; would specify a border that’s five px wide, solid, and red.

In addition to the CSS border property, the margin, padding, background, font, animation, transition, and flex properties all have a shorthand. Let’s take a closer look at these shorthand properties below.

CSS Margin Shorthand

The margin property is shorthand for the following individual properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

So I could write the following declarations in longhand:

Or in one declaration using the shorthand margin property:

The order of the values matter. In the example above, they start at the top and move clockwise. In addition to the order, the number of values specified matters.

• If only one value is defined, then it applies to all sides of the element.
• If two values are defined, then the first value represents the top and bottom margins and the second represents the right and left margins.
• If three values are defined, the first value represents the top margin, the second represents the left and right, and the fourth represents the bottom margin.
• If four values are defined, they represent the top, right, bottom, and left, respectively.

Let’s look at the example below.

See the Pen CSS Margin shorthand by Christina Perricone (@hubspot) on CodePen.

Padding Shorthand

The padding property is shorthand for the following individual properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

So I could write the following declarations in longhand:

Or in one declaration using the shorthand background property:

The rules about the order and number of values for the margin property apply to the padding property as well.

Here’s the example below.

See the Pen CSS Padding shorthand by Christina Perricone (@hubspot) on CodePen.

CSS Background Shorthand

The background property is shorthand for the following individual properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

The background-color and background-image properties set the background color and image of an element. You can use the background-repeat property to control how the image is repeated, or if it is at all, and the background-attachment property to set whether the image is fixed or scrolls. The background-position property sets where the background image is positioned on the page.

So I could write the following declarations in longhand:

Or in one declaration using the shorthand background property:

When using the shorthand property, you have to put the values in the order above: color, image, repeat, attachment, position. You don’t have to define all these properties though. If a value is missing, the shorthand will still be applied properly as long as the order of the values is correct. If you want to use another background property, like the background-size property, you must define it separately.

Look at the example below.

See the Pen CSS Background shorthand by Christina Perricone (@hubspot) on CodePen.

CSS Border Shorthand

The border property is shorthand for the following individual border properties:

• border-width
• border-style
• border-color

So I could write the following declarations in longhand:

Or in one declaration using the shorthand background property:

A value for the border-style property must be defined or the border won’t render, but values for the width and color are optional. Without these values, the line will be rendered as black and about 3px wide. You can also specify these three border properties for just one side of the element by using border-top, border-right, border-bottom, or border-left.

Let’s look at the example below.

See the Pen CSS Border shorthand by Christina Perricone (@hubspot) on CodePen.

CSS Font Shorthand

The font property is shorthand for the following individual properties:

• font-style
• font-weight
• font-variant
• font-size / line-height
• font-family

The font-style property specifies the style for a text; it can be normal, italic, oblique. The font-weight specifies the weight for a text and can have any of the following values: normal, bold, bolder, lighter, or 100-900. With the font-variant property, you can set the text to display in a small-caps font so that all lowercase letters will be converted to uppercase letters but appear in a smaller font size.

You can use the font-size property to set the size of text with a keyword, length value, or percentage. Or you can set the line-height property instead. Finally, using the font-family property, you can define multiple fonts in case the browser doesn’t support your first choice. It’s recommended you specify the name of the family font you want first, and end with a generic family name like “sans-serif” or “cursive.”

I could write the following declarations in longhand:

Or in one declaration using the shorthand background property:

Values for the font-size and font-family properties must be specified, or the shorthand may not render in some browsers. If no values are specified for font-weight, font-style, or font-variant, then they’ll default to normal.

You should declare the values of font-size (and/or line-height) and font-family in the order above. Otherwise, the order doesn’t matter.

Let’s look at the example below.

See the Pen CSS font shorthand by Christina Perricone (@hubspot) on CodePen.

CSS Animation Shorthand

The animation property is shorthand for the following individual properties:

• animation-duration
• animation-name
• animation-delay
• animation-direction
• animation-fill-mode
• animation-iteration-count
• animation-play-state
• animation-timing-function

Values for the animation-duration property, which specifies the length of time of the animation sequence, and the animation-name property, which specifies the type of animation, are required. If the other properties aren’t specified, then they’ll be set to their default values. Here’s  a brief look at what each property does.

Using the animation-delay property, you can specify when the animation starts, using milliseconds or seconds, and positive or negative values. The animation-direction property defines the direction of the animation. Using the animation-fill-mode function, you can have the animation styles applied before or after the animation plays. The animation-iteration-count property specifies the number of times that the animation will play. With the animation-play-state property, you can pause and resume the animation sequence. Finally, the animation-timing-function sets the pace of the animation.

To learn more about these properties and their possible values, check out The Ultimate Guide to CSS Animation.

I could write the following declarations in longhand:

Or in one declaration using the shorthand background property. Note: the animation-fill-mode and animation-play-state properties are set to their default values so I’ll leave them out of the shorthand below:

Let’s look at the example below.

See the Pen CSS animation shorthand by Christina Perricone (@hubspot) on CodePen.

CSS Transition Shorthand

The transition property is shorthand for the following individual properties:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

These properties are similar to the animation properties described above. The transition-delay property specifies when the transition effect begins. The transition-duration property specifies the length of time the transition effect takes to complete. The transition-property specifies the name of the CSS property the transition effect is for. So, for example, if this property is set to “width,” then the transition effect will take place when a user hovers over the element and its width begins to change. Finally, the transition-timing-function sets the pace of the transition effect.

If you’re wondering when to use the CSS animation or transition property, then check out The Main Difference Between CSS Animations & Transitions.

I could write the following declarations in longhand:

Or in one declaration using the shorthand background property:

Let’s look at the example below.

See the Pen CSS Transition shorthand by Christina Perricone (@hubspot) on CodePen.

CSS Flex Shorthand

The flex property is shorthand for the following individual properties:

• flex-grow
• flex-shrink
• flex-basis

With the flex-grow property, you can specify how much the flex item will grow relative to the other flex items or to the available space in the flex container. Or you can specify the flex item to shrink with the flex-shrink property. The flex-basis property sets the initial size of the flex item, which can be a percent or length unit.

I could write the following declarations in longhand:

Or in one declaration using the shorthand background property:

The flex property may be specified using one, two, or three values. The rules about the number of values and their order are a little trickier than the rules for the margin or padding property.

• If there’s one value, it can be a number or keyword to set the flex-grow property. The value for the flex-shrink property is assumed to be 1, and the value for the flex-basis property is assumed to be 0.
• If there’s two values, the first must be a number to set the flex-grow property. The second must be either a number to set the flex-shrink property or a width value for the flex-basis property. Two-value syntax
• If there’s three values, then the first must be a number for the flex-grow property, the second a number for the flex-shrink property, and the third a value for the flex-basis property.

Let’s look at an example below.

See the Pen CSS Flex shorthand by Christina Perricone (@hubspot) on CodePen.

Coding in Shorthand

Using CSS shorthand can help you save time and space and make your codebase look cleaner. While there are rules to remember about the order and number of values you define, you can master them with a little practice.