What is CSS Shorthand? CSS Shorthand is simply combining multiple property values into a single CSS property. This guide will help you improve your knowledge and understanding. Over time you will find yourself spending less time writing CSS and spending more time on actual style and page structure.
CSS Shorthand is all about memorizing order. Starting off you may find yourself asking, which property value goes where again? You might get lost and you may even have to reference this guide (or another that you might choose) numerous times before it sticks. There are a lot of CSS properties, most is learned over time with practice (and good use!).
An important rule of thumb when using CSS Shorthand on any page element: Any and all properties you do not declare when using CSS Shorthand are defaulted to the property default. If you are a veteran using CSS or you have done your reading as a beginner, you already know this rule. However, for the un-knowing, this is important to know and is important to remember if you want to avoid the unexpected or possibly some frustration.
This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.
Distribution of this article must contain the following:
- Written by: Daniel J. Robbins (http://www.k3mist.com/)
- Copyright 2008. Daniel J. Robbins.
- References: W3C (http://www.w3.org/TR/CSS21/)
Background Property
Let’s start off with the background property. The background consists of 5 properties as follows.
Background Properties and Values
W3C Reference: ‘background-color’, ‘background-image’, ‘background-repeat’, ‘background-position’, and ‘background-attachment’
Shorthand Background Property
All 5 of the background properties can be combined into a single shorthand background property. You will now see how 7 lines of CSS can be shortened into 3 lines using CSS Shorthand.
W3C Reference: ‘background’
Default Background Properties
Below are the default background properties. Which ever of these properties you do not declare on your element will default to these values.
Shorthand Background Property Example (non-explicit)
If you only want to declare a background color and a background image, you would write your CSS as follows. In most CSS document’s around the web, you will see designers and developers using the “non-explicit” shorthand method below.
Shorthand Background Property Example (explicit)
As mentioned earlier in the introduction, when you do not declare all the values of a property, the above example would actually declare the following.
Back to contentsFont Property
The font property is the most complicated of the CSS Shorthand methods. It is also the one you need to pay the most attention to when declaring values. The font property consists of 6 properties.
Font Properties and Values
W3C Reference: ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’, ‘font-family’
Shorthand Font Property
All 6 of the font properties can be combined into a single shorthand font property.
W3C Reference: ‘font’
Default Font Properties
Below are the default font properties. Which ever of these properties you do not declare on your element will default to these values.
Shorthand Font Property Example (non-explicit)
In this example we will declare the font-size, line-height and font-family. These are the exact property values that I use on my div container for all my layouts.
Shorthand Font Property Example (explicit)
The above example will actually declare the following.
What could go wrong? Shorthand Font Property Example
When you are working with page elements that have default formatting applied by the browser, such as <h1>, <strong>, etc. You can remove the browser formatting without even knowing. Take a look at the below examples.
In example #1 is a non-explicit <h1> declaration. Using this property definition as is would remove the bold formatting on the H1 page element that is normally applied by the browser. So if you want your H1 page element to continue to be bold, you would have to declare the H1 page element as you see it in example #2.
This applies to all page elements that have default formatting by the browser. If you are unaware of what formatting is defaulted by the browser, you can easily setup a separate identical page with no CSS declarations and see how the browser applies it’s formatting to the page elements. I highly recommend this to beginner’s.
Margin Property and Padding Property (Show / Hide)
The Margin Property and Padding Property share identical syntax/markup. The Margin Property and Padding Property both consist of 4 properties.
Margin Properties and Values / Padding Properties and Values
W3C Reference:
Margin: ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’
Padding: ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’
Shorthand Margin Property and Shorthand Padding Property
All 4 of the margin properties can be cominded into a single shorthand margin property and all 4 of the padding properties can be combined into a single shorthand padding property. The order is top, right, bottom and then left.
Default Margin Properties and Default Padding Properties
Below are the default margin properties and default padding properties. Which ever of these properties you do not declare on your element will default to these values.
Margin Property Example and Padding Property Example
Margin’s and Padding’s are the core of spacing your page elements and page layout. Using them correctly and efficiently will allow you to design beautifully spaced layouts and content with pixel perfection across all browsers. Since these two properties are identical in syntax, I will provide example’s using the shorthand margin property only.
Border Property
The border property can be used very effectively along with margin’s and padding’s to define the area’s and content of your page layout. The border property consists of 12 properties, 3 for each the top, right, bottom and left. I will use only the top border as an example since all 4 border’s are identical in syntax/markup.
Border Properties and Values
W3C Reference: Border Properties: (same for top, right, bottom, left) ‘border-top-width’, ‘border-top-style’ and ‘border-top-color’
Shorthand Border Property
All 12 of the border properties can be combined into single shorthand border property for each the top, right, bottom and left. In addition, width, style and color, what I call the main border properties can be used individually. Then you also have your single shorthand border property.
W3C Reference: ‘border-top’, ‘border-right’, ‘border-bottom’, ‘border-left’, and ‘border’
3 Main Border Properties: ‘border-width’, ‘border-style’ and ‘border-color’
Default Border Property Values
Below are the default border properties. Which ever of these properties you do not declare on your element will default to these values. You must always declare the border style or no border will show at all. The reason for the default 3px border is simple, if you choose to use the border style “double”, there must be 3 pixels total for the double style to show correctly. This leaves 2 outer lines your defined border color and the inner line (middle) transparent.
Shorthand Border Property Example
The shorthand border property with all it’s shorthand’s have some very clever use. I’m going to go over some basic use and then some “clever” use in the examples below.
Basic Shorthand Border Property Examples
“Clever” Shorthand Border Property Examples
These are just some examples, you can do just about anything you want in the method used below. Just remember to pay attention to the rules of declaring your border properties!
List Style Property
The list style property is used very frequently. Usually you will see it used to remove formatting so the designer or developer can use an unordered or ordered list on a site navigation, calendar and/or other area’s on a site where a list may be the best approach. The list style property consists of 3 properties.
List Style Properties and Values
W3C Reference: ‘list-style-type’, ‘list-style-image’ and ‘list-style-position’
Shorthand List Style Property
All 3 of the list style properties can be combined into a single shorthand list style property.
W3C Reference: ‘list-style’
Default List Style Properties
Below are the default list style properties. Which ever of these properties you do not declare on your list will default to these values.
Shorthand List Style Property Example
Let’s just go over some basic examples very briefly. You should always declare your list style property with “ul” or “ol” preceding “li” so you are only changing the list style for the correct type of list.