DEV Community

Cover image for Useful CSS Shorthand Properties
Rezaul karim
Rezaul karim

Posted on • Edited on

Useful CSS Shorthand Properties

#codenewbie #beginners #css #programming

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

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

Recommended: Download Free HTML CSS Template with source code for practice

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

Recommended: 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;
  }
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

Recommended: Awesome Animation Libraries – (CSS + JavaScript )

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

Recommended: Learn About Text styling in CSS)

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

Top comments (1)

Collapse
 
jyotishman profile image
Jyotishman Saikia •

Read next

chiragagg5k profile image

How a Viral Tweet Landed Me Multiple Job Interviews

Chirag Aggarwal -

oculus42 profile image

Do we need Promise.allSettled()?

Samuel Rouse -

choir241 profile image

My thoughts on Pieces

Richard Choi -

hichemtab-tech profile image

PHP 8.4: What to Expect, What’s New, and Why It’s a Big Deal for Developers

HichemTech -