My top CSS tips

In CSS there is usually more than way to skin a cat. Some people use certain methods, some use others. If you a way of styling that works, whose to say it is wrong. Do not let people tell you are doing it wrong.

I originally created this page as my top 10 tips but still continues top grow on a weekly basis. This post is not a tutorial page, more of a reference for those CSS coders who may be between the beginner and intermediate stage.

Add some consistency

Reset all your core elements to use the same set of basic rules, as some elements show different amounts of padding/margin by default in different browsers, i.e.

div, p, ul, li {margin: 0, padding: 0;}

Types of element

The main two types of styling elements are block level elements and inline elements. The main difference between a block element and inline elements are that block level elements will take up all the space within their parent element until instructed otherwise through CSS. And remember you can change the display type using your CSS.

The big difference between padding and margin

Remember that when dealing with elements. Margin is outside the element and padding is inside the element.

Use single Lines in your style sheet

Write your CSS in single lines, it may look prettier when you write your code, but when you have 300 hundred defintions, it can be extremely infuriating to scroll through your page with all those code blocks.

Browser specific CSS

You can override styles for different browsers by browser and version, check here for a really good list that gives you code examples for numerous

Overriding styles

Make use of !important when you are struggling with you need to override a style, here is an example:

color: #FF0000 !important;

Important Shorthand techniques

Use shorthand techniques when you can. For example, let's take a look at margin (you can substitute padding here if you want to):

Margin-top: 10px;
Margin-right: 5px;
Margin-bottom: 15px
Margin-left: 4px;

Can be written like this:

Margin: 10px 5px 15px 4px;
Top, right, bottom, left

You may also use another shorthand technique for margin/padding when the top/bottom and left/right use the same values:

Margin: 10px 5px;

Or if you want to apply the same value to each side you can use:

Margin: 10px;

The need for negativity

Using negative margins can in some cases be beneficial when you want to position an element just once when you don't want to change the larger majority of elements.

Generic classes

If you think that you will be adding similar styles to a number of different spans, like color. Create a generic class that adds those colours, i.e. if you know that you will be using multiple validation areas then this may be beneficial

Using multiple classes

You can only assign one ID per element however you can apply multiple classes to an element and is suprisingly easy to do, you just separate the class names using a space. Combining classes can save you repeating definitions and save you time in the long run, for example:

<div id="elementID" class="class1 class 2 class3 class4">My Element</div>

Bullet Points Images

If you want to use an image on a bullet point, you have more control over the image if you do the following. Set the list-style-type to none an add a background-image attribute. The main reason being that you have more control over the background than the normal bullet image as you can use background-position to make sure it looks perfect.

Install the Firebug Add-on for Firefox

This will save you a tonne of time as you can (amongst other things) edit your CSS/HTML on the fly which you allows you to test and try your changes before applying them to your style sheet. There are developer tools for Chrome and IE, but in my opinion neither of them come anywhere near as close to Firebug!