DEV Community

Cover image for ✨Useful Css Shorthand Properties
Stacksjar
Stacksjar

Posted on

✨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;
Enter fullscreen mode Exit fullscreen mode

After:

 font: italic bold 18px Bree Serif, sans-serif;
Enter fullscreen mode Exit fullscreen mode

Shorthand Property for BACKGROUND

Before:

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

After:

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

Shorthand Property for MARGIN

Before:

 margin-top: 10px;
 margin-right: 4px
 margin-bottom: 10px;
 margin-left: 4px;
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

After:

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

Enter fullscreen mode Exit fullscreen mode

Shorthand Property for BORDER

Before:

  border-width: 1px;
  border-style: solid;
  border-color: gray;
Enter fullscreen mode Exit fullscreen mode

After:

border: 1px solid gray;
Enter fullscreen mode Exit fullscreen mode

Hope you find this post Useful.

Read Complete Article Here: Useful Css Shorthand Properties

Discussion (0)