in

✨Useful Css Shorthand Properties – DEV Community


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



Source: https://dev.to/stacksjar/useful-css-shorthand-properties-2ek

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

A cautionary tale about JavaScript callbacks

JetBrains Web UI Components For React