When I’m coding a layout I like to start with a ready made CSS file that contains some code to make the actual coding of the layout easier. In this guide I’ll go through what I use and explain why. You should at least be familiar with CSS to properly understand this guide.

First of all I’m going to talk about how the actual CSS code is laid out. There isn’t really a right or wrong way to do this, its simply personal preference, use what comes easiest to you.

I like to use:

The first thing you will notice is that on the selector I tabbed in, this is a tip I picked up from a thread on TalkFreelance and it comes in really useful when your searching for a specific class. The other thing you might notice is the closing bracket is on the same line as the last selector, this simply helps save some space, and in my opinion makes the whole thing easier to read.

Next is to group similar selectors on the same line, for example:

Again this just helps to neaten the stylesheet up and makes it easier to search later on.

When I’m creating complex layouts using lots of CSS I often find it easier to split the CSS into multiple stylesheets, for me its helps keep things organised and makes specific things easier to find later on. For example, I might make a separate stylesheet for my link styles, I then simply import it by adding this code at the top of my main stylesheet:

Next we’ll move onto the code I use as a base point for all of my layouts.

As you probably already know, all browsers like to render things differently, this can prove to be a real pain when it comes to making a layout that looks the same in all browsers. To make this a little bit easier its always a good idea to make sure the browser isn’t adding its own code to parts of the page. To do this I simply use code like:

This code will make sure that there is no padding or margin on the page before you start.

It’s a good idea to do this for virtually everything you add to your page, just to make sure your browser isn’t adding anything itself. So for example you could also use:

There’s nothing to stop you adding padding or margins to individual paragraphs by applying a class or ID to them. Similarly if you needed a 10px top margin on your html you could simply change the code to:

The next thing is images, I don’t know about you but I hate the way browsers put a blue border around any hyperlinked image on my page. Well there’s one easy way to get rid of them all at once, simply add:

Into your CSS stylesheet, this will remove all borders from all images on your page, again if you want a border of some sort on any one of your images, there’s nothing to stop you adding a class or ID to it.

The final essential bit of code in my CSS file is to do with floating divs, on some of my layouts I use a lot of them and that can lead to a hell of a lot of clearing divs. To get round this I use a class called clear which looks like:

I can then add:

To my layout whenever I need to clear some floating divs, this often saves a lot of time and code!

If you enjoyed this guide please consider signing up for my RSS Feed. You can sign up for my RSS Feed here!

Thanks for reading!