When writing your CSS, it is possible to write neater, more readable code by making use of CSS shortcuts. A shortcut is a feature of CSS that allows the developer to specify a number of related properties on a single line rather than specify them all separately. Lets look at the following example:


.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
}


The code above is perfectly valid and will work fine, but we can save time and make the code much neater using the following code:


.header {
padding:5px 10px 5px 10px;
}


Using the code above we can specify all of the padding for the header div on one line. It works by applying the first attribute (5px) to the top padding of the div. The second (10px) applies to the right side padding, the 3rd (5px) attribute means the padding on the bottom of the div, and the forth (10px) attribute means the left side padding. The padding is always applied in this order.

It is possible to shorten this code even further using the following code:


.header {
padding:5px 10px;
}


This works by taking the first (5px) attribute to mean the top and bottom, or vertical padding, and the second (10px) attribute to mean the horizontal padding (left and right).

The exact same principles can be used to declare the margin of your divs, so what could have looked like this:


.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
}

Can now look much neater, and is obviously much quicker to write using the following:


.header {
padding:5px 10px;
margin:5px 10px;
}


Background properties

One of my favorite CSS shortcuts is the background property shortcut. This is how a typical CSS file could look without shortcuts:


.header {
background-image:url(images/image.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#fff;
}


However, with some nifty CSS it could look like this:


.header {
background: #fff url(images/image.jpg) repeat-x top;
}


The above code is much quicker and more manageable. Take note though, that all of the properties must be provided when using the background shortcut. If I missed off the colour specification at the beginning for example, the code would not work.

Font shortcuts

Another very useful shortcut is the font shortcut. The code below can be shorted considerably:


body {
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 0.8em;
line-height: 1.2em;
}


Here is the shortcut:


body {
font: bold 0.8em/1.2em verdana, sans-serif;
}


It is important to write the shortcut in the same order as above so that web browsers don’t get confused!

Borders

This is my favorite shortcut of all. This saves me a great deal of time when I am developing web sites because whenever I have a problem with a layout or an element, the first thing I do is put a border around it so that I can see its dimensions and work out what’s going on.

Here is some typical code:


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


This can be shorted to the following:


.header {
border:1px solid #000;
}


Then, whenever you are not sure why an element is not behaving properly, just use the border shortcut above to debug your code and see what the dimensions of the element are.

Conclusion

As you can see, you can make your code much shorter and neater using the CSS shortcuts outlined here. Once you get into the habit of using them, I guarantee that you will wonder why you ever did it differently in the past!

One of the most common layouts on the web is a fixed width site that stretches to the bottom of the page, with a footer sitting at the bottom. If the content of the page stretches past the bottom, the site container needs to stretch with it. If the content does not fill the page, the footer needs to remain at the bottom. With a table based layout, this would be a simple task, but who wants to use tables for layout? With some nifty CSS tricks we can accomplish this very well using CSS alone and once you know how its done, you will use it over and over again.

Centering the Layout

The first thing we need to do is centre the layout. We will create a site that is 800px wide in this example, centered in our browser. To do this we need the following code:

body {
margin:0px;
padding:0px;
text-align:center;
}


.container {
width:800px;
text-align:left;
margin:auto;
}


The text-align:center command in the body tag is needed to centre our .container div. We then need to align the text back to the left in our container and apply margin:auto to move the container div into the centre of the page.

Achieving 100% height

Making your site stretch to 100% height is slightly more complicated. Due to difference in the way browsers render css we will need to use a nifty CSS hack to achieve what we want. Here is what our code will look like with the next set of declarations added:

html, body {
margin:0px;
padding:0px;
text-align:center;
height:100%;
}


.container {
width:800px;
text-align:left;
margin:auto;
min-height:100%;
}


* html {.container:height:100%;}


In the first block of code we have added ‘html’ to the body section. This is because we need the body to stretch to 100% of the height of its containing element, which is the html, so we too have set this to 100% height.

In the container, we have added ‘min-height:100%’ which tells all browsers apart from Internet Explorer 6 and below that 100% is the minimum height, and if the content expands beyond this, the container will automatically expand with it. As Internet Explorer 6 and below do not understand this command, we need to pass a value of height:100% to these browsers only, as they treat height:100% to mean the same as min-height, therefore allowing the container to expand. We do this with the universal selector hack.

Adding the footer

We now have a 100% height, centred layout and its time to add the footer. Here is the next bit of code we need to add:

.container {
width:800px;
text-align:left;
margin:auto;
min-height:100%;
position:relative;
}



.footer {
position:absolute;
bottom:0px;
height:150px;
}


.clearfooter {
clear:both;
height:170px;
}

The first thing we have done here is add position:relative to the container. This allows us to position the footer absolutely within it. We want it to sit on the bottom of the page so we have added the bottom:0px to achieve this.

Unfortunately, by positioning the footer absolutely, we have taken the footer out of the flow of the document and therefore, any content will disappear behind the footer. To fix this we add a .clearfooter section which sits behind the footer and fixes this problem.

The HTML

Here is the basic layout that needs to be added to your HTML document:

<div class="container">


<p>
Add your header and menu as required
<p>


<div class="clearfooter">
</div>


<div class="footer">
Footer contents here
</div>


</div>


Wrap Up

All the code you need for this very effective layout is provided here. To see how it all slots together and to see a real world example, you may download this template so you can see how you can expand the code used here.

One of the most important and also misunderstood of all CSS topics is positioning. Using CSS, you can declare 3 different kinds of position. These are:

• Static
• Relative
• Absolute

Static

Static positioning is the default position of an element on the page. If you did not declare any other kind of position then it would be static. An element with a static position will be part of the normal flow of the document, meaning that it will come after any preceding elements and other static elements will flow around it.

Static elements can not be moved using commands such as left:20px because this would mean the normal flow of the document would be altered. Static elements can be moved using margin command however.

Relative

This is the most misunderstood of the 3 positioning commands. Relative positioning is moving an element in relation to its default position. The element can be moved using left, right, top and bottom commands and you could make elements overlap each other if you wished. One thing to remember is that the space which the element occupied before it was moved will still behave as if the element was still there. This is because when you move an element using relative positioning, the actual document flow is only altered by appearance, it is not physically changed.

Absolute

Absolute positioning is something that is sometimes overused by those new to CSS. Many people are amazed by its ability to place elements anywhere on the screen but it is easy to get in trouble by using it incorrectly.

An absolutely positioned element is one that is taken out of the flow of the document and positioned at precise co-ordinates on the page. Top, left, right and bottom commands are used to specify the co-ordinates (eg left:20px;).

Absolutely positioned elements are positioned relative to the top left of the viewport unless they are contained within another element that has a position: relative, or position; absolute. In this case the element will appear in the specified position within its parent element.