On CSS Shorthand Properties
Tags: css, html, codepen
Published: 2021-04-29 23:14:35

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":11}}} -->
<p style="font-size:11px">For the article about cascades click <a href="https://dev.to/bracikaa/how-do-css-cascades-work-d44" target="_blank" rel="noreferrer noopener">here</a>, and for the article about inheritance <a href="https://dev.to/bracikaa/css-inheritance-in-more-detail-2ak" target="_blank" rel="noreferrer noopener">here</a>. This is the third part of basic CSS methodologies, and it will be on the topic of CSS Shorthand Properties.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Shorthand properties are properties that we can use to set several other related properties at once. Some common shorthand properties are <code>background</code>, <code>font</code>, <code>padding</code>, <code>margin</code>, and <code>border</code>.</p>

<!-- /wp:paragraph -->

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

# How shorthands override other properties

<!-- wp:paragraph -->
<p>The thing with shorthand values is that we don't need to write complete styles. For example, on the official <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" target="_blank" rel="noreferrer noopener">MDN Web Docs,</a> 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 <code>font</code> shorthand property to illustrate this.</p>
<!-- /wp:paragraph -->

```css
@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!](https://thedukh.com/wp-content/uploads/2021/04/shorthandproperties.png)<figcaption>List of favorite Pokemon - new font property!</figcaption>

<!-- wp:paragraph -->
<p>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 <code>font-family</code> and <code>font-size</code>).</p>
<!-- /wp:paragraph -->

![Initial properties added by using the font shorthand property](https://thedukh.com/wp-content/uploads/2021/04/applyingshorthand-1024x337.png)<figcaption>Initial properties added by using the font shorthand property</figcaption>

<!-- wp:paragraph -->
<p>We didn't define any of the additional font properties such as <code>font-style</code>, <code>font-variant</code>, <code>font-weight</code>, <code>font-stretch</code>, or <code>font-height</code>. Using the shorthand properties we could <em>override</em> other styles that would be set by default, or <a href="https://thedukh.com/2021/04/css-inheritance-in-more-detail/" target="_blank" rel="noreferrer noopener">inherited</a> by other elements, so be <span class="has-inline-color has-nv-c-2-color">careful</span> if you set a certain style to an element!</p>
<!-- /wp:paragraph -->

# The order of shorthand values

<!-- wp:paragraph -->
<p>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: <code>5px solid red;</code> or <code>border: red 5px solid;</code> and our smart browser would understand which value specifies the width, which the color and which the border style.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. <strong>Top, Right, Bottom, Left.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let us now set our anchor padding using the shorthand property!</p>
<!-- /wp:paragraph -->

```css
#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](https://thedukh.com/wp-content/uploads/2021/04/favoritepokemonshorthand.png)<figcaption>Using the shorthand padding property</figcaption>

<!-- wp:paragraph -->
<p>You can see the result above. Yeah, it looks clunky and uneven, but we wrote this just to illustrate the concept.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

```css
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; */
}
```

<!-- wp:paragraph -->
<p>Above, for the <code>border-width</code> 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).</p>
<!-- /wp:paragraph -->

```css
#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](https://thedukh.com/wp-content/uploads/2021/04/finalpadding.png)<figcaption>Using the two-value shorthand for padding</figcaption>

# Final Words

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here we have our codepen for this article:</p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/brachika/pen/VwPVyBW %}

If you liked this article maybe you'll like more stuff on [thedukh.com](https://thedukh.com).