CSS Shorthand Properties

Learn how to use CSS shorthand properties to make your stylesheets take up less space.

CSS shorthand properties allow you to write less and do more.

Let’s say you want to style your h1 element with the Georgia font-family, a font-size of 42 pixels, and a line-height of 1.25.

First, let’s look at the normal CSS method below:

h1 {
    font-family: "Georgia", "serif";
    font-size: 42px;
    line-height: 1.25;
}

Now compare that to using the CSS font shorthand method below:

h1 {
    font: 42px/1.25 "Georgia", "serif";
}

Three lines condensed into one!

Shorthand properties work by combining several style declarations into one line and allow your code to take up less space.

Shorthand code might not be as readable as the regular method, which is more expressive. However, that’s because it’s new. It will become second nature quickly once you start using it.

Let’s look at one more shorthand CSS property example to drive the point home.

Here’s a button with a top and bottom padding of 12px, and a left and right padding of 20px:

It uses the following padding properties:

button {
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
}

Now let’s use the shorthand padding property and make the CSS less bloated:

button {
    padding: 12px 20px; /* top-bottom, left-right */
}

Four lines condensed into one!

The padding shorthand above is called a two-value shorthand, because well, it uses two values.

• The first value 12px corresponds to the padding-top and padding-bottom property.
• The 20px value corresponds to padding-left and padding-right.

Here’s a complete list of shorthand properties in CSS:

all, animation, background, border, border-block-end, border-block-start, border-bottom, border-color, border-image, border-inline-end, border-inline-start, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, gap, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, mask, offset, outline, overflow, padding, place-content, place-items, place-self, scroll-margin, scroll-padding, text-decoration, text-emphasis, transition.

See Mozilla’s complete CSS shorthand docs.

Not all of the shorthand properties are worth memorizing because chances are you’ll rarely if ever, use them. However, the shorthand two examples from this tutorial font and padding, are some of the most commonly used shorthands.

The following shorthand properties are also worth looking into (because you will be using them a lot) margin, background, border, animation, transition, border-radius.