Cascading Style Rules to Make Your Life Easier

CSS lets you style things as you like, if you know the secret

CSS Simple Styles

One of the most frustrating things about Web design is testing in the multitude of browsers used on the Internet. This would be easy if all browsers worked the same, or didn’t have unintended bugs that crept into their rendering engines. You could design a site the way you liked, and that would be that. But its not that easy.

The Problem

Browsers handle styles in different ways. There are many documented “bugs” or just different interpretations of the rules. Browsers also have built in styles for html elements like paragraphs (<p>) and headers (<h3>) which are not even close to being the same. These built in styles cause frustration at the highest levels. You design a site in Internet Explorer, then find out the spacing is all wrong in FireFox and things don’t line up. Each element style could be corrected separately, or you could just get close and call it good. But there’s a different option.

The Beginning of the Solution

One way to eliminate some of the problems with stylesheets is to strip off all the browser default padding and margin styles. This is done with a single style command as follows:

* {padding: 0; margin: 0}

The asterisk (*) is the wildcard for “everything”. So this command says “Everything will have zero padding and zero margin”. Seems straight forward, right? Now all the paragraphs, headers, form elements, etc. have no padding or margin styling at all. This actually creates the necessity for extra style commands, which we’ll talk about later.

You now have a page where all the lines run together, the headers aren’t indented, etc., etc. Headers are still bold and the font size is larger than the text in paragraphs so not all the styles are gone, just padding and margins. If you want to clean things up even more though, you could add some more to this command like this:

* {padding: 0; margin: 0; font-weight: normal; font-size: 1em; font-style: normal}

This command now says “Everything will have zero padding, zero margin, the font-weight will be normal (not bold), all the letters will have the size of 1em and nothing will be italic”. This will make all the text on the page look the same. There will be no bold and larger headers, no indents and no spacing between paragraphs. (Most of us don’t want to go this far, we still want headers bold, and larger than paragraph text, but if need be…)

So why would a person do this? So they could write their own styles. Now that all the styles are gone, they are also all the same. Different default styles have now been eliminated. Now when you add styles to your page elements, they’ll be honored by all browsers, which is the key.

So now comes the job of defining your styles. This can be easy or difficult, depending on your specific theme requirements, and there are still browser specific bugs to deal with, but add this command to the top of your stylesheet and one thing is for sure, you won’t be writing specific rules just to defeat the default browser styles.

Bonus Tip: Images

You know that annoying colored border around images that are links? Defeat it like this:

img {border: none; outline: none}

You’ll have to add borders where you want them manually, but there won’t be any more blue and purple borders around your linked images, unless you want them!

View Comments

Leave a Reply