Did you find this useful?
Socialize it today.

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.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.

Recommended Books & Training Resources

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