CSS Shorthand Properties- Useful CSS Shorthand

Home » Blog » CSS » CSS Shorthand Properties- Useful CSS Shorthand
css-shorthand

What is shorthand property in CSS?

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

Background CSS 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

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

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

05. 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: Top 10 Animation Libraries – (CSS + JavaScript )

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

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

Animation CSS Shorthand:

… can be shortened to just one declaration:

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

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

09. Transition

Longhand:

The following declarations …

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

Transition CSS Shorthand:

… can be shortened to just one declaration:

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

10. Flex

Longhand:

The following declarations …

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

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

Grid-area 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.

For more CSS Shorthand properties visit here

If you like our today’s article, then you must share the article on social media and Read my others article about coding and programming, Tips, Productivity , Resources etc…

Also, if you have any questions or suggestions related to the article, please let us know in the comments below.

Recommended: Test your programming knowledge – Programming quiz!

Leave a comment

Leave a Reply

Your email address will not be published.

Read Next

Implicit type coercion in JavaScript is automatic conversion of value from one data type to another. It takes place ...
Continue Reading
A responsive website design responds to the device it is being viewed on, whether a desktop computer, laptop, tablet, or smartphone.
Continue Reading
explore a huge number of free tools/resources that might help you to grow on online. We are separated these free marketing tools in a ...
Continue Reading

Reach Out to me!

Discuss a project or just want to say hi? My Inbox is open for all.

"Client satisfaction is the key to me.Always try to provide the best possible services to my clients in every steps."

Narayanganj , Bangladesh
Open for opportunities: Yes!