DEV Community

Adebiyi Itunuayo
Adebiyi Itunuayo

Posted on

Day 008 on My journey to becoming a CSS Pro with Keith Grant

#webdev #css #tutorial #frontend

Continuing from Day 007.
Let's talk about Shorthand properties.
Shorthand properties are properties that let you set the value of other properties in one declaration.

A common shorthand is the font shorthand property, which lets you set several font properties. This declaration specifies font-style, font-weight, font-size, line-height, and font-family in that order:

font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;
Enter fullscreen mode Exit fullscreen mode

Instead of using the individual properties in separate declarations, you can use a shorthand property to include them all. It is good for making code clean and optimised. However, it is important to know that most shorthand properties let you omit certain values, and when those are omitted, they are set to their initial value, as defined in the CSS specification.

You should check carefully when using shorthand properties because they override declarations elsewhere.

For example:

<h1 id="page-title" class="title">Journey to becoming a CSS Pro</h1>
Enter fullscreen mode Exit fullscreen mode

If you use a tag rule targeting the <h1> element:

h1 {
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

and at the same time target the same element using a class rule:

.title {
  font: 32px Helvetica, Arial, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

The class rule is more specific for two reasons:

  1. Selector specificity: the second rule is more specific because a class selector has higher specificity than a type/tag selector.
  2. Source order: since the font-weight declaration is applied in two places, the cascade resolves the conflict by using the one that appears later, in this case, the second rule. Here, font-weight is implicitly set to normal, which is the initial value in the font shorthand.

TRouBLe zone:
I learned this cool mnemonic; I think this is the second mnemonic I've learned so far from Keith in his book, the first being LoVe/HAte, which is applied to the order in which link styles should appear: link, visited, hover, active.

As for TRouBLe, it means top, right, bottom, left; think clockwise. It is used for shorthand properties that accept four values.

For example:

padding: 9px 3px 0 7px;
Enter fullscreen mode Exit fullscreen mode

The above rule means:

  • top = 9px
  • right = 3px
  • bottom = 0
  • left = 7px

Now, what if only one, two, or three values are given? How does CSS interpret the rule?
It’s simple, think clockwise:

  • If one value is written:
    padding: 9px; - All four sides get 9px.

  • If two values are written:
    padding: 9px 3px;
    top = 9px, bottom = 9px; right = 3px, left = 3px.

  • If three values are written:
    padding: 9px 3px 0;
    top = 9px; right = 3px, left = 3px; bottom = 0.

This is called truncated notation.

Some properties instead use two values, representing the Cartesian grid: x (horizontal) and y (vertical).

For example:

box-shadow: 20px 16px;
Enter fullscreen mode Exit fullscreen mode

Here, 20px represents the x value, and 16px represents the y value.

Unlike truncated notation (which applies to properties that take four values), Cartesian grid properties behave differently. If one value is omitted, the second value is property-specific, so you should check the documentation for that property.

I believe anyone can become a CSS Pro, and therefore I am.

Top comments (0)