On CSS Shorthand Properties

Let us remind ourselves what we did in the last two articles. We created a cute card view consisting of our favorite Pokemon (and quite a simple one too!). Using that card view we explained two important concepts in CSS - cascades, and inheritance. Using the same view we will now go through another CSS topic - Shorthand Properties.

For the article about cascades click here, and for the article about inheritance here. This is the third part of basic CSS methodologies, and it will be on the topic of CSS Shorthand Properties.

Shorthand properties are properties that we can use to set several other related properties at once. Some common shorthand properties are background, font, padding, margin, and border.

For example - the font shorthand property allows us to change several other font properties - some of which are font-style, font-weight, font-size, line-height, and font-family. Shorthand properties are useful simply because they keep our code clean and short.

How shorthands override other properties

The thing with shorthand values is that we don't need to write complete styles. For example, on the official MDN Web Docs, we have different variations of the font property. Sometimes we can omit certain values, but that doesn't mean that the omitted values are gone - they are just set to the initial value. Let us import a new font and set it up using the font shorthand property to illustrate this.

@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@300;400;500&display=swap");

#main-list a {
  font: 20px Antonio; /* new font */
  /* ... */
}

This would of course change the look of our Pokemon Cards:

List of favorite Pokemon - new font property!

But more importantly, by checking the computed tab inside our Dev Tools we see that we applied more styles to our element (not only the font-family and font-size).

Initial properties added by using the font shorthand property

We didn't define any of the additional font properties such as font-style, font-variant, font-weight, font-stretch, or font-height. Using the shorthand properties we could override other styles that would be set by default, or inherited by other elements, so be careful if you set a certain style to an element!

The order of shorthand values

When it comes to the order of the values, CSS is quite flexible - we can set the border shorthand property in quite a few different ways (although we should always use the best practice). For example - we can write border: 5px solid red; or border: red 5px solid; and our smart browser would understand which value specifies the width, which the color and which the border style.

We also have the more ambiguous properties, which couldn't be written as freely, for example, the properties for padding and margin that specify values for each of the four sides of the element. For these properties, the values are in always the clockwise order - starting at the top. Top, Right, Bottom, Left.

Let us now set our anchor padding using the shorthand property!

#main-list a {
  font: 20px Antonio;
  color: inherit;
  text-decoration: inherit;
  background-color: pink;
  padding: 20px 5px 10px 35px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: 6px;
}

Using the shorthand padding property

You can see the result above. Yeah, it looks clunky and uneven, but we wrote this just to illustrate the concept.

We can also use the truncated notation. We can omit some values, and the property will still pick up values from the opposite side. For example, if we specify three values, the left and the right side will use the second one, if we specify two values, the top, and the bottom value will use the first one, and one value will apply to every side.

div {
    padding: 30px; /* equivalent to padding: 30px 30px 30px 30px */
    margin: 20px 15px; /* equivalent to margin: 20px 15px 20px 15px */

    border-color: black;
    border-style: dashed;
    border-width: 10px 30px 12px; /* equivalent to border-width: 10px 30px 12px 30px; */
}

Above, for the border-width property we've given three properties - for top, right and bottom. No left value is specified, so the left side will take the same value as the right side (30 pixels in this case). Below we will set the padding using only two values (applying the first value to top and bottom sides, and the second value to left-right sides).

#main-list a {
  font: 20px Antonio;
  color: inherit;
  text-decoration: inherit;
  background-color: pink;
  padding: 10px 30px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: 6px;
}

Using the two-value shorthand for padding

Final Words

With this article we conclude the three-part CSS fundamentals regarding structure and style appliance. We learned what styles are applied to the elements and how the properties of those elements are determined.

Here we have our codepen for this article:

If you liked this article maybe you'll like more stuff on thedukh.com.