For further information, head on over to www.flashonlinedesigners.com

There are several areas within css where you can use shorthand, I’m not going into them in great depth here but i will mention what they are, give you an example and you can feel free to investigate them further, this is not intended to be a complete and concise reference, merely a guide to help you on your way.

Background
So to start with, lets have a look at the background properties, there are five of them below which I’ve given some values for the purpose of this demo.

example
{
 background-color:#fff;
 background-image:url(../images/sample.jpg);
 background-repeat:no-repeat;
 background-position:top left;
 background-attachment:fixed;
}

The good news it that they can be condensed into one line as so:

example
{
 background:#fff url(../images/sample.jpg) no-repeat top left fixed;
}

job done! moving on.

Font

example
{
 font-style:normal;
 font-variant:small-caps;
 font-weight:bold;
 font-size:1em;
 line-height:1.4em;
 font-family:Verdana, Arial, Helvetica, sans-serif;
}

And the shorthand equivalent:

example
{
 font:normal small-caps bold 1em/1.4em Verdana, Arial, Helvetica, sans-serif;
}

Border
there is a potentialy huge time saver here depending on how you currently work with borders.
firstly the full list of properties available:

example
{
 border-top-width:1px;
 border-top-style:solid;
 border-top-color:#000;
 border-right-width:1px;
 border-right-style:solid;
 border-right-color:#000;
 border-bottom-width:1px;
 border-bottom-style:solid;
 border-bottom-color:#000;
 border-left-width:1px;
 border-left-style:solid;
 border-left-color:#000;
}

and the more common way to work:

example
{
 border-width:1px;
 border-style:solid;
 border-color:#000;
}

And the shorthand equivalent:

example
{
 border:1px solid #000;
}

Margin

example
{
 margin-top:1px;
 margin-right:2px;
 margin-bottom:3px;
 margin-left:4px;
}

And the shorthand equivalent:

example
{
 margin:1px 2px 3px 4px;
}

*side note* i think it was Eric Meyer who came up with the “trouble” method of remembering this…that is T(top)R(right)ouB(bottom)L(left)e. another way is to remember it goes clockwise.

Padding
padding is handled exactly the same way as margin to the shorthand would simply be:

example
{
 padding:5px 6px 7px 8px;
}

List

example
{
 list-style-type:square;
 list-style-position:outside;
 list-style-image:url(../images/sample.png);
}

And the shorthand equivalent:

example
{
 list-style:square outside url(../images/sample.png);
}

And one further shorthand method you may have noticed me using throughout this page, the hex colour code. If you are using colours which are matched in pairs of values (that is three pairs of hexadecimal digits) as in the below examples:

#ffffff
#ff0000
#ff00cc

you can shorten them to 3 digits as follows:

#fff
#f00
#f0c

less typing = less code = faster loading
or
less typing = less code = easier to maintain
or
less typing = more time for beer

the benefits are there for everyone!

An id is used to define a unique element in a page, this is a requirement of xhtml and should be observed. In the xhtml we name it by stating the following:

and in the corresponding css we select it with the hash symbol(#item{})

A class may be used as many times as desired in a page. In the xhtml we name it by stating the following:

and in the corresponding css we select it with the full stop symbol(.item{})

here comes the science….

below is a basic well structured xhtml document with a link to an imaginary stylesheet. Have a quick look at where “id=” and “class=” are being used.

Id’s are being used here to define the parts that will only exist once and which form the structure of the document. As you can see, this includes, in hierarchical order from the opening of the body tag, the “container” element which holds everything below it. Firstly the “header” element, then a “menu” element, a “pageContent” item, (am deliberately ignoring the two items with classes and will get to this in a minute) and finaly the “footer” element. These items make up the page structure and will never have more than one instance on the page…perfect candidates for the ID selector. The corresponding CSS for a couple of these elements could look like this:

So…classes! In the xhtml example above, you can see two items with class=”content”. As there are multiple instances of these “content” areas, we give them a class definition to deal with them. An example could be:

As we can see, classes have scope for re-use where id’s are fixed to one element per document and hopefully it’s now easier to determine which one to use in your own code.

There is much more that can be said about id’s and classes, including pseudo classes etc but this is just a very brief introduction to answer a specific question we were asked. We will aim to expand on this with further articles.