Useful CSS Shorthand Properties
Tags: codenewbie, beginners, css, programming
Published: 2021-06-17 12:22:38

***#Please Do Not Copy & Paste this Article on Your Website***


![css shorthant.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1623930390909/HmEQlBixw.jpeg)


## CSS Shorthand

CSS Shorthand properties are properties that let you set the values of multiple other CSS properties simultaneously. Using shorthand property, you can write more short and often more readable style sheets, saving time and energy.

This Shorthand properties makes your code optimized and ‘SEO’ friendly. Let’s discover some useful CSS Shorthand properties :-

Recommended:  [Download Free HTML CSS Template with source code for practice](https://mrezaulkarim.com/psd-to-html-with-source-code-free/)

### 01. Background:

#### Longhand:
The following declarations …


```
.class {
     background-color: #ddd;
     background-image: url(image.png);
     background-repeat: no-repeat;
     background-position: top left;
     background-attachment: fixed;
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:


```
.class {
      background: #ddd url(img.png) no-repeat top left fixed;
  }
``` 


Recommended:  [Learn About CSS Background Properties )](https://mrezaulkarim.com/learn-about-css-background-properties/)


### 02. Font

#### Longhand:
The following declarations …


```
.class {
    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-size: 1em;
    line-height: 1.6;
    font-family: Arial, Helvetica, sans-serif;
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:


```
.class {
      font: bold italic small-caps 1em/1.6 Arial, sans-serif;
  }
``` 

### 03. Margin

#### Longhand:
The following declarations …



```
.class {
     margin-top: 1em;
     margin-right: 1.5em;
     margin-bottom: 2em;
     margin-left: 2.5em;
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
      margin: 1em 1.5em 2em 2.5em;
  }
/* or */
.class {
      margin: 5em 3em;
  } /* up/down - 5em & left/right - 3em */
``` 

### 04. Padding

#### Longhand:
The following declarations …


```
.class {
     padding-top: 1em;
     padding-right: 1.5em;
     padding-bottom: 2em;
     padding-left: 2.5em;
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
      padding: 1em 1.5em 2em 2.5em;
  }
/* or */
.class {
      padding: 5em 3em;
  } /* up/down - 5em & left/right - 3em */
``` 

Recommended:  [Awesome Animation Libraries – (CSS + JavaScript )](https://mrezaulkarim.com/top-10-animation-libraries-css-animation-javascript-animation/) 


### 05. Border

#### Longhand:
The following declarations …

```
.class {
     border-width: 1px;
     border-style: solid;
     border-color: black;
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
      border: 1px solid black;
  }
``` 

### 06. Animation

#### Longhand:
The following declarations …


```
.class {
     animation-name: motion;
     animation-duration: 2s;
     animation-timing-function: ease-in;
     animation-delay: 1s;
     animation-direction: alternate;
     animation-iteration-count: infinite;
     animation-fill-mode: none;
     animation-play-state: running;
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
 .class {
      animation: motion 2s ease-in 1s alternate infinite none running;
  }
``` 

### 07. Outline

#### Longhand:
The following declarations …

```
.class {
     outline-width: thick;
     outline-style: dotted;
     outline-color: red;
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
 .class {
      outline: thick dotted red;
  }
``` 

### 08. Transition

#### Longhand:
The following declarations …

```
.class {
    transition-property: extend;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;  
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
    transition: extend 2s linear 1s;
  }
``` 

### 09. Text-decoration

#### Longhand:
The following declarations …

```
.class {
    text-decoration-color: blue;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;  
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
 .class {
    text-decoration: blue underline solid 2px;
  }
``` 
Recommended:  [Learn About Text styling in CSS)](https://mrezaulkarim.com/text-styling-in-css/)

### 10. Flex

#### Longhand:
The following declarations …

```
.class {
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: auto;
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
      flex: 1 1 auto;
  }
``` 

### 11. List

#### Longhand:
The following declarations …

```
.class {
     list-style-type: square;
     list-style-position: inside;
     list-style-image: url("image.png");
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
      list: square inside url("image.png");
  }
``` 

### 12. Columns

#### Longhand:
The following declarations …

```
.class {
    column-width: 40px;
    column-count: 4;  
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
    columns: 40px 4;
  }
``` 

### 13. Grid

#### Longhand:
The following declarations …

```
.class {
    grid-template-rows: 100px auto 300px;
    grid-template-columns: repeat(2, 1fr) 100px;  
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
    grid: 100px auto 300px / repeat(2, 1fr) 100px;
  }
``` 

### 14. Grid-area

#### Longhand:
The following declarations …

```
.class {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 4;
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
    grid-area: 2 / 1 / span 2 / span 3;
  }
``` 

### 15. Grid-row

#### Longhand:
The following declarations …

```
.class {
    grid-row-start: 1;
    grid-row-end: 3; /* or */ 
    grid-row-end: span 2; 
  }
``` 

#### Shorthand:
… can be shortened to just one declaration:

```
.class {
    grid-row: 1 / 3 ;
    /* or */
    grid-row: 1 / span 2;
  }
``` 

### 16. Grid-column

#### Longhand:
The following declarations …

```
.class {
    grid-column-start: 1;
    grid-column-end: 3; /* or */
    grid-column-end: span 2;  
  }
``` 

#### Shorthand:
… shortened to just following one declaration:

```
 .class {
    grid-column: 1 / 3 ;
    /* or */
    grid-column: 1 / span 2; 
  }
``` 

These are the most useful CSS Shorthand properties. You can use on your project. And Let me know if you get any help with this.

[Read this article on my blog](https://mrezaulkarim.com/css-shorthand-useful-css-shorthand-properties/).

For more exciting tips and tricks please read our  [others articles](https://mrezaulkarim.com/blog/)

Find My page on Instagram:  [@stack.content](instagram.com/stack.content)