In this article I want to show what I do after I included a reset.css.
But for those of you who didn't read my article on the css box model. Hereunder a short introduction on the reset.css. As you may or may not know, all browsers are different. Not only by name but also in the way they apply default css box properties. For example. It could very well be that firefox gives a p-element a margin-bottom of 5px while IE might give it 6px. This is extremely frustration if you are unaware of this and try to make a nice cross browser website that looks pretty much the same in every browser.
A very easy way to solve this, is to reset all properties and start with a clean slate. The best way of doing this is to use a reset.css. This will literally reset everything so you might want to adjust it in time to your needs. For instance a p-element ( <p>some text</p> ) will no longer have a margin at the top and the bottom. So you need to set those yourself. Same is for h1, h2, h3 elements. This sounds like a lot of work but it's nothing compared to time you will waste on debugging for cross-browser compatibility without a reset.css. The best reset.css I worked with is: meyer's reset.css
Now because of the cascading effect you need to put that reset.css above the other style sheet. That way you first reset all properties and than apply your own style instead of the other way around. which hopefully makes sense.
<link href="http://yourdomain.com/reset.css" rel="stylesheet" type="text/css">
<link href="http://yourdomain.com/styles.css" rel="stylesheet" type="text/css">
I got the reset.css, but now what?
Well now you will probably think "what the hack just happened....this will take years to style"
No worries there are some great tools to help you out. One I use pretty often is this one. It's a html elements test page. Just insert it to your website and you are ready to style all elements in an organised way.
Hopefully the above was useful to you, if so leave a comment.
Cssfreakie
No comments:
Post a Comment