This content originally appeared on DEV Community and was authored by Stacksjar
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.
Read Complete Article Here: Useful Css Shorthand Properties
This content originally appeared on DEV Community and was authored by Stacksjar
Stacksjar | Sciencx (2021-09-17T12:29:07+00:00) ✨Useful Css Shorthand Properties. Retrieved from https://www.scien.cx/2021/09/17/%e2%9c%a8useful-css-shorthand-properties/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.