DEV Community

loading...
Cover image for CSS Shorthand – Useful CSS Shorthand Properties

CSS Shorthand – Useful CSS Shorthand Properties

Rezaul karim
Full Stack Developer | Blogger | Marketer
・3 min read

css shorthant.jpg

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 :-

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;
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

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

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;
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

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

03. Margin

Longhand:

The following declarations …

.class {
     margin-top: 1em;
     margin-right: 1.5em;
     margin-bottom: 2em;
     margin-left: 2.5em;
  }
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

04. Padding

Longhand:

The following declarations …

.class {
     padding-top: 1em;
     padding-right: 1.5em;
     padding-bottom: 2em;
     padding-left: 2.5em;
  }
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

05. Border

Longhand:

The following declarations …

.class {
     border-width: 1px;
     border-style: solid;
     border-color: black;
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

.class {
      border: 1px solid black;
  }
Enter fullscreen mode Exit fullscreen mode

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;
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

 .class {
      animation: motion 2s ease-in 1s alternate infinite none running;
  }
Enter fullscreen mode Exit fullscreen mode

07. Outline

Longhand:

The following declarations …

.class {
     outline-width: thick;
     outline-style: dotted;
     outline-color: red;
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

 .class {
      outline: thick dotted red;
  }
Enter fullscreen mode Exit fullscreen mode

08. Transition

Longhand:

The following declarations …

.class {
    transition-property: extend;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;  
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

.class {
    transition: extend 2s linear 1s;
  }
Enter fullscreen mode Exit fullscreen mode

09. Text-decoration

Longhand:

The following declarations …

.class {
    text-decoration-color: blue;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;  
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

 .class {
    text-decoration: blue underline solid 2px;
  }
Enter fullscreen mode Exit fullscreen mode

10. Flex

Longhand:

The following declarations …

.class {
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: auto;
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

.class {
      flex: 1 1 auto;
  }
Enter fullscreen mode Exit fullscreen mode

11. List

Longhand:

The following declarations …

.class {
     list-style-type: square;
     list-style-position: inside;
     list-style-image: url("image.png");
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

.class {
      list: square inside url("image.png");
  }
Enter fullscreen mode Exit fullscreen mode

12. Columns

Longhand:

The following declarations …

.class {
    column-width: 40px;
    column-count: 4;  
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

.class {
    columns: 40px 4;
  }
Enter fullscreen mode Exit fullscreen mode

13. Grid

Longhand:

The following declarations …

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

Shorthand:

… can be shortened to just one declaration:

.class {
    grid: 100px auto 300px / repeat(2, 1fr) 100px;
  }
Enter fullscreen mode Exit fullscreen mode

14. Grid-area

Longhand:

The following declarations …

.class {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 4;
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

.class {
    grid-area: 2 / 1 / span 2 / span 3;
  }
Enter fullscreen mode Exit fullscreen mode

15. Grid-row

Longhand:

The following declarations …

.class {
    grid-row-start: 1;
    grid-row-end: 3; /* or */ 
    grid-row-end: span 2; 
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… can be shortened to just one declaration:

.class {
    grid-row: 1 / 3 ;
    /* or */
    grid-row: 1 / span 2;
  }
Enter fullscreen mode Exit fullscreen mode

16. Grid-column

Longhand:

The following declarations …

.class {
    grid-column-start: 1;
    grid-column-end: 3; /* or */
    grid-column-end: span 2;  
  }
Enter fullscreen mode Exit fullscreen mode

Shorthand:

… shortened to just following one declaration:

 .class {
    grid-column: 1 / 3 ;
    /* or */
    grid-column: 1 / span 2; 
  }
Enter fullscreen mode Exit fullscreen mode

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.

For more exciting tips and tricks please read our others articles

Find My page on Instagram: @stack.content

Discussion (1)

Collapse
jyotishman profile image
Jyotishman Saikia