Override inline CSS styles

It would be fantastic if we were to be able to hand code our own HTML for each and every project the way that we wanted to. But a lot of times we have to deal with old tangled unsemantic HTML. The worst is when code has inline styles which makes it harder to change.

<span id="old"><span style="font:arial; font-size:8px;">Some text</span></span>

Having to deal with this ugly mess can be frustrating and sometimes it's best to just fix it as quickly as possible and move on especially if the website is in a really old system that will be replaced soon. There are basically two ways to deal with such circumstances;

The first is to use javascript and traversing the dom to the appropriate element. Once the element is found, we can change all its styles. The disadvantage of this technique is that if a user has javascript turned off, they will still see the old styles. The advantage is that we can use more advanced selectors such as first child, only child or even adjacent children which is impossible with CSS alone.

The second solution is to use the !important attribute for our CSS styles. For example

#old div { font-size:12px !important; }

The !important attribute will override all inline CSS styles.