This technique requires two levels of markup:
<li><a><span>Content here</span></a></li>

Because of this, you need to add and extra <span></span> wrap for your menu content or you can use the <li> and <a> as pairs, but the problem raises in IE6 as IE6 does not support CSS hover for <li>. Adding an extra span can be easy for a static site, but in wordpress the pages or categories that are usually used as page items are generated by built-in functions that do no provide options to add the extra <span> tag for versions older than wordpress 2.7. Sadly there are still some people who are using older versions of wordpress, so make your theme suit them all by using this technique.

Here is a simple PHP code that can save you from this problem:
<?php<br /> $mypagelist = wp_list_pages(‘title_li=&depth=-1&echo=0′ );<br /> $mypagelist = eregi_replace(‘(<a [a-zA-Z0-9 /.?_=:"-]*>)’,'\1<span>’,$mypagelist);<br /> $mypagelist = eregi_replace(‘(</a>)’,'</span>\1′,$mypagelist);<br /> echo $mypagelist;<br /> ?>

This code will get the page list from the “wp_list_pages” function and adds the wrapping<span> and </span> tags and prints then on the page. You can use the same technique for functions like:

• wp_list_pages
• wp_list_categories
• wp_list_bookmarks
• wp_list_authors

Please leave your comments and suggestions related to this topic in the comments section.

Font:
Font property has a number of sub properties like:

• font-style: normal
• font-variant: normal
• font-weight: normal
• font-size: inherit
• line-height: normal
• font-family: inherit

You can give values for all these properties just within a single property named “font”. A simple example of it is given here:

span{font:italic bold 16px Arial, Helvetica, sans-serif;}
Here we use implicit specifications of font properties as given in the list above.

Border:
You may have used borders many time, but from now on you are going to use it in short version. Let’s see the available border properties.

• border-width
• border-style
• border-color

There are no default values for border properties, so you have to specify every property to make the border visible. We can see a sample code here:

div{border:#000 2px solid;}
This will create a continuous black border of 2px width. If you wish to use different widths for youe borders you can use the following code:

div{border:#000 2px 4px 3px 4px solid;}

Here we use a shorthand version of specifying widths. We use a clockwise representation of border widths.

Here the “Top border” width is specified first, then “Right border” width, “Bottom border” width followed by “Left border” width. Let’s call this a “CSS Clock” to make it easy to remember.

This type of representation is used everywhere in CSS when it comes to representing properties that has top, right,bottom and left regions.

I am stopping this part right here to give you some break. The third part will be released in next few days.

What is this CSS Shorthand?

Each CSS property has its own name and value. But the technique of grouping similar CSS properties by just setting values to the generalized name. I am sure that you will understand it better at the end of this tutorial.

Why should I use CSS Shorthand?

By using CSS shorthand technique, you actually have the following benefits:

• You reduce the CSS file size which proportionally reduces the load time.
• CSS code will be clean and easy to manage.
• It proves that you are an expert in CSS.

So why are you waiting? Teach me.

Ya, Lets start. I am going to take you through each property which can be minimized. First I will show you the expanded version, then the procedure to minimize it.

Background:
The list of properties available for background and their default values:

• background-color: transparent
• background-image: none
• background-repeat: repeat
• background-position: scroll
• background-attachment: top left

You don’t have to give each property separately, instead we use a single property “background“. Here is an example:
div{background:#000 url(images/picture.jpg) no-repeat center 50% fixed;}
Here the color, image URL, image repeat, position and attachment properties are described in just one line. Even if you leave out any of the properties, the default values are used. If you notice the code, you can see that I have used hexadecimal(hex) value for color. Usually hex values are 6 digits but here I have used a shortened version. You can shorten the digits if they appear in pairs. For example, #666666 can be written as #666, #44BBAA can be written as #4BA but you cannot shorten color values like #693B45 or #EE4423.

I wish to stop this tutorial right here and request you to get some practice in this topic. The next part of this tutorial will contain techniques to reduce other CSS properties. I will update here once the next part is released. Happy coding.

Update: CSS Shorthand – Simplified (Part 2) published.