On this publish we’re going to verify essentially the most helpful and generally used Css Shorthand Properties which can assist us in our productiveness.
Shorthand properties are CSS properties that allow you to set the values of a number of different CSS properties concurrently. Utilizing a shorthand property, you’ll be able to write extra concise (and infrequently extra readable) type sheets, saving time and power.
The CSS specification defines shorthand properties to group the definition of frequent properties performing on the identical theme. As an illustration, the CSS background property is a shorthand property that is capable of outline the values of background-color, background-image, background-repeat, and background-position. Equally, the most typical font-related properties might be outlined utilizing the shorthand font, and the totally different margins round a field might be outlined utilizing the margin shorthand.
These are Prime 5 Helpful CSS Shorthand Properties
Shorthand Property for FONTS
Earlier than:
font-style: italic;
font-weight: daring;
font-size: 18px;
font-family: 'Bree Serif', serif;
After:
font: italic daring 18px Bree Serif, sans-serif;
Shorthand Property for BACKGROUND
Earlier than:
background-color: white;
background-image: url(photos/background.jpg);
background-repeat: no-repeat;
background-position: high proper;
After:
background: white url(photos/background.jpg) no-repeat high proper;
Shorthand Property for MARGIN
Earlier than:
margin-top: 10px;
margin-right: 4px
margin-bottom: 10px;
margin-left: 4px;
After:
margin: 10px 4px 10px 4px;
Shorthand Property for LIST
Earlier than:
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
Earlier than:
border-width: 1px;
border-style: strong;
border-color: grey;
After:
border: 1px strong grey;
Hope you discover this publish Helpful.
Learn Full Article Right here: Helpful Css Shorthand Properties
