How to override styles and use of !important

You've probably been in the situation where you've styled an element (or multiple elements), and then needed to override these styles. Maybe you created a form and applied a class to all of your text fields, but needed one field to be slightly different. You go back and create a class for that special element, then realise your new styles aren't appearing; they're somehow clashing with the styles from your original class.

Position is the key

The key to overriding styles is the position of the overriding styles within your stylesheet. The styles underneath always take precedence. If your overriding styles are above your original styles, they will not take effect. Here's an example:

Example

CSS Code:

        
       	.classExOne {
         	padding:4px;
            color:purple;
            font-weight:bold;
		}
		.classExTwo {
			color:red;
		}
        

In the example above, any element with classExOne and classExTwo applied to it will have a padding of 4px, a font-weight of bold and a colour of red. It will not have a colour of purple, because the colour declaration in classExTwo overrides the colour declaration in classExOne.

However, there are instances where the above will not work. If your original class is applied using the id selector, no matter the position of the overriding class, its styles will not be applied because the id selector takes priority over all other selectors. If you have two id selectors, on the other-hand, this will work: the bottom rule-set will override the top.

Here's an example to illustrate the issue with overriding styles applied using the id selector:

Example

CSS Code:

   
        #myCoolForm {
        	background:red;
        	font-weight:bold;
        } 
        .admin {
        	background:blue;
        	border:1px solid orange;
        }
        

These styles are applied to a form called myCoolForm. Despite our admin class being positioned underneath our myCoolForm styles, the background colour change in admin does not take effect.

So, how do we get past this? Read on, my friends!

A working example

Here's an example taken from my admin navigation. The following styles colour all admin links black, with the exception of the page we're currently on, whose corresponding link is coloured red.

Example

CSS Code:

    #admin-users .users a, #admin-permissions .permissions a, #admin-groups, #admin #comments  {
    	font-weight:bold;
    	color:black;
    	text-decoration:none;
    }
    .add .add-user a, .list .list-users a, .add .add-group a, .list .group-list a, 
    .add .add-permission a, .list .permission-list a, .add .add-comment a, .list .comment-list a {
    	font-weight:bold;
    	color:red;
    	text-decoration:none;
    }
    

But wait...preview this in a browser and you'll find that the bottom styles aren't taking effect. That's because we're missing one crucial element...

The solution - using !important

In the above example, the colour red for our "on" links (the bottom styles), will not be applied because it clashes with the color:black in the styles above (which use the id selector). We get round this by enlisting in the help of a nifty CSS keyword called !important which we place on our "on" links.

Example of !important

CSS Code:

   
    .myStyle {
    	color:silver !important;
    }
    

!important goes after your CSS rule, but before the semi-colon.

Any CSS rule that has !important attached to it, will take priority over all other styles that target the same element. When we're using styles that can't be overridden simply by positioning new rule-sets underneath them - like in our id example above - we turn to !important. Just a side note, !important can be spelled with both a lowercase and uppercase i.

Example

CSS Code:

    #admin-users .users a, #admin-permissions .permissions a, #admin-groups, #admin #comments  {
    	font-weight:bold;
    	color:black;
    	text-decoration:none;
    }
    .add .add-user a, .list .list-users a, .add .add-group a, .list .group-list a, 
    .add .add-permission a, .list .permission-list a, .add .add-comment a, .list .comment-list a {
    	font-weight:bold;
    	color:red !important;
    	text-decoration:none;
    }

The Result

The color:red has !important applied to it, and the link that corresponds to the page we're on is now coloured red.

Conclusion

If you append a CSS rule with !important that rule will negate any other rules applied to the same element. !important takes priority. Although !important can look messy (especially if you're using Dreamweaver which colours it bright red so it really stands out) it's useful and serves a purpose.