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

hamzakhan profile image

🚀 The Rise of Bun.js: Why It’s More Than Just Another JavaScript Runtime 🥖

Hamza Khan -

araldhafeeri profile image

Designing and Implementing Ant Design Global App Tour for React Apps.

Ahmed Rakan -

prince_beec5ccde00b7c6c73 profile image

👻 Scary Ghost Cursor with Smoke Trail! 💀 code using html5,css3 and javascript

Prince -

shams_arman_510 profile image

BLA ! BLA! BLA! DECEMBER...!

shams Arman siddique -