A CSS shorthand property is simply a CSS style property that combines multiple properties into one. Instead of having more than one line of CSS, you can use one property that allows for multiple values so that you can style multiple properties without having to define each property individually. This makes CSS easier to manage. Another reason to use CSS shorthand properties is to save space which will allow for your web pages to load quicker.
For example, if you needed to style your fonts and you wanted to apply a font-size, line-height, font-weight, font-style, and font-family, you would need to have at least 5 lines of CSS.
p {
font-size: 1.25em;
line-height: 1.5em;
font-weight: bolder;
font-style: italic;
font-family: "Times New Roman";
}If you use the shorthand font property you can reduce this to one line of CSS.
p {
font: bolder italic 1.25em/1.5em "Times New Roman";
}Shorthand Properties
There are a several CSS shorthand properties.
border | border-width border-style border-color; |
border-top | border-top-width border-top-style border-top-color; |
border-right | border-right-width border-right-style border-right-color; |
border-bottom | border-bottom-width border-bottom-style border-bottom-color; |
border-left | border-left-width border-left-style border-left-color; |
border-width | border-top-width border-right-width border-bottom-width border-left-width; |
background | background-color background-image background-repeat background-attachment background-position; |
font | font: font-style font-variant font-weight font-size/line-height font-family; |
list-style | list-style-type list-style-position list-style-image; |
margin | margin-top margin-right margin-bottom margin-left; |
outline | outline-color outline-style outline-width; |
padding | padding-top padding-right padding-bottom padding-left; |
Do not be too concerned about the property details listed in this article. It is more important at this time to understand the concept of shorthand so that you can manage your CSS in the most efficient and effective manner possible.
