Computers & ProgrammingCSSWeb Development

CSS Shorthand Properties

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.

Leave a Comment

Your email address will not be published.

Scroll to Top