Useful Css Shorthand Properties

In this post we are going to check the most useful and commonly used Css Shorthand Properties which will help us in our productivity.

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position. Similarly, the most common font-related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand.

These are Top 5 Useful CSS Shorthand Properties

Shorthand Property for FONTS

Before:

 font-style: italic;
 font-weight: bold;
 font-size: 18px;
 font-family: 'Bree Serif', serif;

After:

 font: italic bold 18px Bree Serif, sans-serif;

Shorthand Property for BACKGROUND

Before:

 background-color: white;
 background-image: url(images/background.jpg);
 background-repeat: no-repeat;
 background-position: top right;

After:

 background: white url(images/background.jpg) no-repeat top right;

Shorthand Property for MARGIN

Before:

 margin-top: 10px;
 margin-right: 4px
 margin-bottom: 10px;
 margin-left: 4px;

After:

 margin: 10px 4px 10px 4px;

Shorthand Property for LIST

Before:

 list-style-type: circle;
 list-style-position: inside;
 list-style-image: url(pointer.jpg);

After:

 list-style: circle inside url(pointer.jpg);

Shorthand Property for BORDER

Before:

  border-width: 1px;
  border-style: solid;
  border-color: gray;

After:

 border: 1px solid gray;

Hope you find this post Useful.

Happy Coding!