Learn how to make your pages load faster using CSS shorthand properties for backgrounds, borders, colours, fonts, lists, margins, padding, and outlines.

One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the <font> tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once.

But why stop there? By using CSS shorthand properties you can reduce the size of your CSS document even more.

Let us look at an example to have a better idea. To add CSS style to the body tag in HTML you can write this:

body { background: url("test.gif"); background-color: #fff; background-repeat: repeat-x; }

The above code is a common way of using CSS by happy coders all over the world. Now let's see what happens if we try to define the same style, but this time by using a shortcut. We use the property background and this makes us able to set values for all the above properties with more efficiency, in fact we're close to cutting the amount of code in half:

body {background: url("test.gif") #fff repeat-x}

So as you can see, there's plenty of room to make your CSS more efficiant if you know how to put the shorthand properties to work.

Under each header in this article I present the shorthand in the same way as above. First the browser support will be indicated, then the syntax in which the shorthand is being used, and then an example with a short explanation.

Font

Use:

font: 1em/1.5em bold italic serif

...instead of

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

This CSS shorthand property will only work if you're specifying both the font-size and the font-family - omit either and the CSS rule will be completely ignored. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.

Background

Use:

background: #fff url(image.gif) no-repeat top left

...instead of

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Omit any of these commands from the background CSS shorthand property, and the browser will use the default values. If you leave out the background-position command then any background image will be place in the top-left of the container and then repeated both horizontally and vertically.

Lists

Use:

list-style: disc outside url(image.gif)

...instead of

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Leave out any of these CSS commands from the shorthand rule, and the browser will use the default values for each, namely disc, outside and none (i.e. no images) respectively.

Margin & padding

There are a number of different CSS shorthand commands for margin and padding, depending on how many of the sides of the containing element have the same margin or padding values:

Four different values

Use:

margin: 4px 1px 3px 4px (top, right, bottom, left)

...instead of

margin-top: 4px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Three different values

Use:

margin: 5em 1em 3em (top, right and left, bottom)

...instead of

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Two different values

Use:

margin: 5% 1% (top and bottom, right and left)

...instead of

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

One different value

Use:

margin: 1 (top, bottom, right and left)

...instead of

margin-top: 1;
margin-right: 1;
margin-bottom: 1;
margin-left: 1

The above rules also apply to padding and border (see below for more on border).

Border

Use:

border: 1px black solid

...instead of

border-width: 1px;
border-color: black;
border-style: solid

Use:

border-right: 1px black solid

...instead of

border-right-width: 1px;
border-right-color: black;
border-right-style: solid

(You can substitute right with top, bottom or left.)

The above CSS shorthand rules can be conveniently combined with the shorthand rules used by margin and padding. Take a look at the following box:

These borders can be achieved with the following CSS command:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

You can achieve exactly the same effect by using:

border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf

List-style

Use:

The list-style shorthand property isn’t used all that often, but it can save you a couple of lines of code. It combines the list-style-position property with either of the list-style-type or list-style-image properties – you could probably specify both, but list-style-image would overwrite the list-style-type property with whatever image you selected. So instead of writing this:

ul {  	list-style-type: square;  	list-style-position: inside; }

You could write this:

ul { list-style: square inside; }

Generally speaking, however, I tend to only use this shorthand when I’m looking to remove styling from the list (as when building a navigation bar):

ul { list-style: none; }

header tag

Use:

For example, the H1 tag shown below uses longhand CSS syntax. Note that the font-variant, font-stretch, font-size-adjust, and font-style properties have been assigned their default values.

H1 {  font-weight: bold;   font-size: 16pt;  line-height: 18pt;

     font-family: Arial;   font-variant: normal;  font-style: normal;

     font-stretch: normal;  font-size-adjust: none    }  

Rewritten as a single, shorthand property, the same tag appears as follows:

H1 { font: bold 16pt/18pt Arial }  

When written using shorthand notation, omitted values are automatically assigned their default values. Thus, the previous shorthand example omits the font-variant, font-style, font-stretch, and font-size-adjust tags.

Conclusion

CSS shorthand properties are great! They're a great way to reduce the amount of code contained in a CSS document, allowing for faster download times and easier editing. Now we've learned that the CSS shorthand are quicker and more efficient to use in many situations.

If we look a little further ahead, there are even more powerful selectors waiting to be implemented and used in CSS 3. Many of the CSS 3 selectors have already been implemented in modern browsers, but in general support is far too patchy for developers to rely on these new selectors. However, there are cases where they can be used to add nice forward enhancing features, so I think taking a look at how the new selectors in CSS 3 work can be useful.

In this article, the specification I am referring to is the Selectors W3C Working Draft . The new selectors described in the document will be used by CSS level 3, but may also be used by other languages. If you are reading this article months, or even years after that date it may be worth checking if a more recent version is available.

I am not going to explain the basics of how CSS selectors in general work here.

First, a quick overview of the selectors that are new in CSS 3:

Each selector will be described in more detail show in the bellow, and there are examples of how each selector can be used.

Substring matching attribute selectors

This whole group of selectors is new, and the selectors in it let developers match substrings in the value of an attribute.

Assume that you have an HTML document that contains the following markup structure:

1. <div id="nav-primary"></div>
2. <div id="content-primary"></div>
3. <div id="content-secondary"></div>
4. <div id="tertiary-content"></div>
5. <div id="nav-secondary"></div>

By using the substring matching attribute selectors you can target combinations of these structural parts of the document.

The following rule will set the background colour of all div elements whose id begins with “nav”:

1. div[id^="nav"] { background:#ff0; }

In this case the selector will match div#nav-primary and div#nav-secondary.

To target the div elements whose id ends with “primary”, you could use the following rule:

1. div[id$="primary"] { background:#ff0; }

This time the selector will match div#nav-primary and div#content-primary.

The following rule will apply to all div elements whose id contain the substring “content”:

1. div[id*="content"] { background:#ff0; }

The elements that will be affected by this rule are div#content-primary, div#content-secondary, and div#tertiary-content.

The substring matching attribute selectors are all fully supported by the latest versions of Mozilla, Firefox, Flock, Camino, Safari, OmniWeb, and Opera, so if it wasn’t for Internet Explorer we could start using them now.

The :target pseudo-class

URLs with fragment identifiers (an octothorpe, “#”, followed by an anchor name or element id) link to a certain element within the document. The element being linked to is the target element, and the :target pseudo-class makes it possible to style that element. If the current URL has no fragment identifier, the :target pseudo-class does not match any element.

Assuming the HTML structure mentioned earlier in this document, the following rule would put an outline around div#content-primary when the URL contains that fragment identifier:

1. div#content-primary:target { outline:1px solid #300; }

An example of such an URL is http://www.example.com/index.html#content-primary.

The :target pseudo-class is currently supported by browsers based on Mozilla and Safari.

UI element states pseudo-classes

The :enabled and :disabled pseudo-classes

The :enabled and :disabled pseudo-classes allow developers to specify the appearance of user interface elements (form controls) that are enabled or disabled, provided that the browser allows styling of form controls. The following rules will apply different background colours to single line text inputs depending on whether they are enabled or disabled:

1. input[type="text"]:enabled { background:#ffc; }
2. input[type="text"]:disabled { background:#ddd; }

The :checked pseudo-class

The :checked pseudo-class allows developers to specify the appearance of checked radio and checkbox elements. Again, this is provided that the browser allows styling of form controls. This CSS rule will apply a green border to checked radio and checkbox elements:

1. input:checked { border:1px solid #090; }

The UI element states pseudo-classes are currently supported by Opera and browsers based on Mozilla.

Structural pseudo-classes

The structural pseudo-classes allow developers to target elements based on information that is available in the document tree but cannot be matched by other simple selectors or combinators. The structural pseudo-classes are very powerful, but unfortunately current browsers only support a few of them.

The :root pseudo-class

The :root pseudo-class targets the document’s root element. In HTML, the root element is always the HTML element, which means that the following two rules are the same (well, almost - :root has a higher specificity than html):

1. :root { background:#ff0; }
2. html { background:#ff0; }

The :root pseudo-class is currently supported by browsers based on Mozilla and Safari.

The :nth-child() pseudo-class

The :nth-child() pseudo-class targets an element that has a certain number of siblings before it in the document tree. This argument, which is placed within the parentheses, can be a number, a keyword, or a formula.

A number b matches the b-th child. The following rule applies to all p elements that are the third child of their parent element:

1. p:nth-child(3) { color:#f00; }

The keywords odd and even can be used to match child elements whose index is odd or even. The index of an element’s first child is 1, so this rule will match any p element that is the first, third, fifth, and so on, child of its parent element:

1. p:nth-child(odd) { color:#f00; }

The following rule matches p elements that are the second, fourth, sixth, and so on, child of their parent element:

1. p:nth-child(even) { color:#f00; }

The formula an + b can be used to create more complex repeating patterns. In the formula, a represents a cycle size, n is a counter starting at 0, and b represents an offset value. All values are integers. Understanding how this works is easier when you look at a few code examples, so let’s do that.

The following rules will match all p elements whose index is a multiple of 3. In the first rule, b is zero and could have been omitted, as in the second rule:

1. p:nth-child(3n+0) { color:#f00; }
2. p:nth-child(3n) { color:#f00; }

The offset value can be used to define at which child a repeating rule starts to apply. If you have a data table with 20 rows and want every odd row after the tenth row to have a different background colour, you can use this rule:

1. tr:nth-child(2n+11) { background:#ff0; }

Since n starts at 0, the first tr element to be affected is the 11th. Next is the 13th, then the 15th, and so on.

More details are available in the :nth-child() pseudo-class section of the CSS 3 Selectors specification.

So, what about browser support for this very useful selector? Not good at all. As far as I can tell, no browser supports this or any of the other “nth” selectors. Please correct me if you know otherwise.

The :nth-last-child() pseudo-class

The :nth-last-child() pseudo-class works just like the :nth-child() pseudo-class, except that it targets an element that has a certain number of siblings after it in the document tree. In other words, it starts counting from the last child instead of the first, and counts backwards. The following rule will match the second-to-last tr element of a table:

1. tr:nth-last-child(2) { background:#ff0; }

The :nth-last-child() pseudo-class is currently not supported by any browsers.

The :nth-of-type() pseudo-class

The :nth-of-type() pseudo-class works exactly like the :nth-child() pseudo-class, but only counts those elements that are of the same type as the element the rule is applied to. This rule will match every p element that is the third p element of its parent:

1. p:nth-of-type(3) { background:#ff0; }

This can be useful if you want to make sure that you are really targeting the third p element. At first you might think that you could just as well use the nth-child pseudo-class, but :nth-child(3) will take all sibling elements into account, so the result will be different unless all p elements only have siblings that are also p elements.

The :nth-of-type() pseudo-class is currently not supported by any browsers.

The :nth-last-of-type() pseudo-class

The :nth-last-of-type() pseudo-class targets an element that has a certain number of siblings of the same element type after it in the document tree. Just like the :nth-last-child() pseudo-class, it starts counting from the last child instead of the first, and counts backwards. The following rule will match each second-to-last sibling of type p:

1. p:nth-last-of-type(2) { background:#ff0; }

The :nth-last-of-type() pseudo-class is currently not supported by any browsers.

The :last-child pseudo-class

The :last-child pseudo-class targets an element that is the last child of its parent element. It is the same as :nth-last-child(1). This rule will match all p elements that are the last child of their parent element:

1. p:last-child { background:#ff0; }

The :last-child pseudo-class works in browsers based on Mozilla. It is not supported by Opera and is buggy in Safari (the above rule matches all p elements in the document). Surprisingly it works as expected in OmniWeb (tested in version 5.1.1), despite that browser being based on Safari. That could be caused by a regression in the latest version of Apple WebKit, since OmniWeb is usually built on a slightly older version of WebKit than what Safari is using.

The :first-of-type pseudo-class

The :first-of-type pseudo-class targets an element that is the first sibling of its type. it is the same as :nth-of-type(1).

1. p:first-of-type { background:#ff0; }

The :first-of-type pseudo-class is currently not supported by any browsers.

The :last-of-type pseudo-class

The :last-of-type pseudo-class targets an element that is the last sibling of its type. it is the same as :nth-last-of-type(1).

1. p:last-of-type { background:#ff0; }

The :last-of-type pseudo-class is currently not supported by any browsers.

The :only-child pseudo-class

The :only-child pseudo-class targets an element whose parent element has no other element children. It is the same (but with a lower specificity) as :first-child:last-child or :nth-child(1):nth-last-child(1).

1. p:only-child { background:#ff0; }

The :only-child pseudo-class works in browsers based on Mozilla. Safari seems to interpret it as :first-child (the above rule matches all p elements in the document that are the first child of their parent element).

The :only-of-type pseudo-class

The :only-of-type pseudo-class targets an element whose parent element has no other children of the same element type. It is the same (but with a lower specificity) as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1).

1. p:only-of-type { background:#ff0; }

The :only-of-type pseudo-class is currently not supported by any browsers.

The :empty pseudo-class

The :empty pseudo-class targets an element that has no children. That includes text nodes, so of the following elements, only the first is empty:

1. <p></p>
2. <p>Text</p>
3. <p><em></em></p>

The following CSS rule will match that first element:

1. p:empty { background:#ff0; }

The :empty pseudo-class is currently supported by browsers based on Mozilla. Safari erroneously applies the rule to all elements of the given element type.

The negation pseudo-class

The negation pseudo-class, written :not(s), takes a simple selector as an argument. It targets elements that are not targeted by the simple selector. For example, the following CSS will target any element that is not a p element:

1. :not(p) { border:1px solid #ccc; }

The negation pseudo-class currently works in browsers based on Mozilla and Safari.

The ::selection pseudo-element

The ::selection pseudo-element matches the portion of an element that is currently selected or highlighted by the user. One possible use for this would be to control the appearance of selected text.

Only a few CSS properties apply to ::selection pseudo-elements: color, background, cursor, and outline.

The following rule will make the foreground colour of a selection red:

1. ::selection { color:#f00; }

The ::selection pseudo-element currently only works in browsers based on Safari. The behaviour is a bit unpredictable, so the Safari implementation needs a bit of improvement. Mozilla based browsers support it if you use a -moz- prefix: ::-moz-selection. The prefix will probably be removed eventually.

The General sibling combinator

The general sibling combinator consists of two simple selectors separated by a “tilde” (~) character. It matches occurrences of elements matched by the second simple selector that are preceded by an element matched by the first simple selector. Both elements must have the same parent, but the second element does not have to be immediately preceded by the first element. This CSS rule will target ul elements that are preceded by a p element with the same parent:

1. p ~ ul { background:#ff0; }

The general sibling combinator is currently supported by Opera and browsers based on Mozilla.

css_useful_resources