CSS Shorthand – Useful CSS Shorthand Properties

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 ene…

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



Shorthand:

… can be shortened to just one declaration:

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



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 */



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



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.

For more exciting tips and tricks please read our others articles

Find My page on Instagram: @stack.content


Print Share Comment Cite Upload Translate
APA
Rezaul karim?? | Sciencx (2024-03-28T11:49:18+00:00) » CSS Shorthand – Useful CSS Shorthand Properties. Retrieved from https://www.scien.cx/2021/06/17/css-shorthand-useful-css-shorthand-properties/.
MLA
" » CSS Shorthand – Useful CSS Shorthand Properties." Rezaul karim?? | Sciencx - Thursday June 17, 2021, https://www.scien.cx/2021/06/17/css-shorthand-useful-css-shorthand-properties/
HARVARD
Rezaul karim?? | Sciencx Thursday June 17, 2021 » CSS Shorthand – Useful CSS Shorthand Properties., viewed 2024-03-28T11:49:18+00:00,<https://www.scien.cx/2021/06/17/css-shorthand-useful-css-shorthand-properties/>
VANCOUVER
Rezaul karim?? | Sciencx - » CSS Shorthand – Useful CSS Shorthand Properties. [Internet]. [Accessed 2024-03-28T11:49:18+00:00]. Available from: https://www.scien.cx/2021/06/17/css-shorthand-useful-css-shorthand-properties/
CHICAGO
" » CSS Shorthand – Useful CSS Shorthand Properties." Rezaul karim?? | Sciencx - Accessed 2024-03-28T11:49:18+00:00. https://www.scien.cx/2021/06/17/css-shorthand-useful-css-shorthand-properties/
IEEE
" » CSS Shorthand – Useful CSS Shorthand Properties." Rezaul karim?? | Sciencx [Online]. Available: https://www.scien.cx/2021/06/17/css-shorthand-useful-css-shorthand-properties/. [Accessed: 2024-03-28T11:49:18+00:00]
rf:citation
» CSS Shorthand – Useful CSS Shorthand Properties | Rezaul karim?? | Sciencx | https://www.scien.cx/2021/06/17/css-shorthand-useful-css-shorthand-properties/ | 2024-03-28T11:49:18+00:00
https://github.com/addpipe/simple-recorderjs-demo