6 CSS Shorthand properties to improve your web application
Tags: webdev, css, beginners, codenewbie
Published: 2021-08-22 10:55:25

# Why should I care shorthand properties? :balloon:

CSS is a language used to describe how a web page should look like. With CSS we can set position, colors, fonts, layout of each element in an HTML page. :rainbow:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suxzb0mwwowa8nbvmy7n.png)

In this blog post, I will share some tips to improve your CSS code and the performance of your web app. :warning:

<center> :fire: :sun_with_face: :palm_tree: :mushroom: :fire: </center>

There are several ways in which a CSS file can be optimized. One of the things you should care when writing your CSS code is to minimize the number of lines. :boom:

There are several reasons to care about the number of code lines :astonished::
:point_right: improve the code readability
:point_right: improve the loading speed of your web page
:point_right: improve the ranking in search engines (e.g. Google Search, Bing, ...), because ranking depends on the loading speed and optimization level of your application

<center>:fire: :fire: :fire: :fire: :fire:</center>


An interesting tip to reduce the number of lines of code is the following:

> **_Use CSS shorthand properties whenever possible_**

In this blog post I'll show you what shorthand properties are and how they can be used to optimize your CSS code.

Interested? Read on!!! :blush::computer:

# What are shorthand properties?

**Shorthand properties** let you set the values of multiple other CSS properties simultaneously.

CSS supports a number of shorthand properties. In this blog post we will see the most used ones. :airplane:


# CSS Background Shorthand

**Background property** lets you set different background properties of an HTML element (e.g. a `div`) in a single line of CSS.

**Background** is a shorthand for:
* background-color
* background-image
* background-position
* background-size
* background-repeat
* background-origin
* background-clip
* background-attachment

So instead of having background-color, background-image,  background-position, background-size, background-repeat, background-origin, background-clip, background-attachment defined for an HTML element, we can use a single property. :heart_eyes:

Hmmm confused??? :scream: :confused: 

A picture is worth a thousand words:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zukoe629szz9kl9kng5a.png)

That's the trick. Thanks to `background` shorthand property, we have compressed 8 CSS lines into one line.

Now let's image a complex web application, with dozens of CSS files and thousands of lines per file. :scream:

Definitely, this results in much smaller files, cleaner code and faster loading times for your web application. :smile:

# CSS Border Shorthand

The second shorthand property that I want to show you is called **Border**. Border shorthand is used to set the border of an HTML element.

It is a shorthand for:
* border-width
* border-style
* border-color

Here is an example:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua2jaajgkkzyzkujcekc.png)

Three properties at one go. Not so bad!!! :smirk: :fire:

# CSS Font Shorthand

**Font** shorthand is used to set the following font properties:

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epbng7ypqeahp7wsnvbf.png)

# CSS Inset Shorthand

The **Inset** property has to do with the positioning of an HTML element. It is a shorthand for:
* top
* right
* bottom
* left

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ppsfx8coso1j5zsmyg9.png)

Simple and efficient! :relaxed: :hibiscus:

# CSS Padding Shorthand

**Padding** is a way to add space around an element. More precisely it allows you to add space between the element and its border.

To completely set the padding of an HTML element, we need to set four values:
* padding-top
* padding-right
* padding-bottom
* padding-left

The meaning of these values is quite intuitive:
* **padding-top** is the space between the element and the its border
* **padding-right** is the space between the element and its right border
* **padding-bottom** is the space between the element and its bottom border
* **padding-left** is the space between the element and its left border

All these properties can be specified in a single declaration, using the **padding** shorthand. :sunflower:

The syntax is straightforward:
```css
padding: <padding-top> <padding-right> <padding-bottom> <padding-left>
```

Here is an example:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pi10x5153xgp7lyg8kct.png)


# CSS Margin Shorthand

**Margin** property is similar to padding. Margin is the space around the element, outside its borders.

To specify a margin you need to provide four different values:
* **margin-top** is the space between the top border of the element and the other elements
* **margin-right** is the space between the right border of the element and the other elements
* **margin-bottom** is the space between the bottom border of the element and the other elements
* **margin-left** is the space between the left border of the element and the other elements


The syntax is straightforward :rose::
```css
margin: <margin-top> <margin-right> <margin-bottom> <margin-left>
```

Here is an example:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay5vhdzzts34yyv060yh.png)

# Conclusion

We have come to an end. :blossom: I want to remark the following tip:

> **_Use CSS shorthand properties whenever possible_**

because they help to reduce the lines of CSS code and improve readability. 

Reducing the CSS file size will also **improve the loading speed of our web pages**, because the CSS file is **smaller**. This will also **improve our ranking in search engine**, because the search engine algorithms tend to reward the optimized web pages. :rainbow: :rocket:

<center>:fire: :fire: :fire: :fire: :fire:</center>

I hope I convinced you to care about lines of CSS code. :stuck_out_tongue_winking_eye:

If you liked this post, consider following me on Twitter [@cscarpitta94](https://twitter.com/cscarpitta94) and on dev [cscarpitta](https://dev.to/cscarpitta) :heart_eyes:

<center>:wave: :fire:</center>