5 CSS Tips for Website Design

Please tip generously!

Every now and then it’s always useful in website design to share a few of the smaller things that make life that little bit easier. Here’s five little tips to ease your CSS worries.

Each and every one of us picks up helpful and practical ways of doing things in your day to day web design life, so i’d like to share with you, few snippets of my experience.

Don’t over use classes

Avoid over-using classes to style common tags, by breaking sections of your site into div id’s and styling tags that sit within this div.

for example…

 #news-column h2 {font-weight:bold;}

Bullet points using background images

Instead of using list-style-image, you could use a non-repeating background on the li, and use padding to declare the required gap. This also means that further lines of text within that particular list item, will also adopt the same padding, giving a nice neat finish. However using this technique, you’ll still have to use the following to remove the default list image.

List-style-type:none;

Absolute positioning

The simple rule of absolute positioning is that the container div must be position:relative, and the div or element inside should be position:absolute; You then just set the co-ordinates of this accordingly to position your element relative to it’s parent div.

Reset your CSS

Using a basic reset operation before you begin, can avoid you having to reset individual elements further down the line. Different browsers interpret default padding and margins, which could be avoided by simply adding the following code to the top of your stylesheet

* {padding:0; margin:0;}

Use shorthand CSS

Keeping your CSS conside, has benefits of keeping the file size down, but more importantly speed up your coding and boost your efficiency.
Combining items such as…

#box p {margin-top:5px; margin-right:10px; margin-bottom:5px margin-left:10px; }

into…

#box p {margin:5px 10px 5px 10px; }

or even…

#box p {margin:5px 10px; }