CSS Shorthand Properties

Thursday, March 15, 2012

tags CSS

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, weight, style, and 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.

borderborder-width border-style border-color;
border-topborder-top-width border-top-style border-top-color;
border-rightborder-right-width border-right-style border-right-color;
border-bottomborder-bottom-width border-bottom-style border-bottom-color;
border-leftborder-left-width border-left-style border-left-color;
border-widthborder-top-width border-right-width border-bottom-width border-left-width;
backgroundbackground-color background-image background-repeat background-attachment background-position;
fontfont: font-style font-variant font-weight font-size/line-height font-family;
list-stylelist-style-type list-style-position list-style-image;
marginmargin-top margin-right margin-bottom margin-left;
outlineoutline-color outline-style outline-width;
paddingpadding-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. In the upcoming articles, we will be covering each of these properties in this article in more detail.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

CSS: The Missing Manual HTML CSS: The Complete Reference HTML CSS and JavaScript Editor