Using CSS Reset & Base Font Size to Help with Cross Browser Issues
Posted by:
Alan on June 10th, 2011
In Website Development
Just recently I was think of a time when I discussed CSS with some clients and how they seemed to be very interested in how I used the “Reset CSS” and a “Base Font-Size” as the first step in “Website Design”.
I first heard of these ideas when I read the book “Handcrafted CSS” and how they can be used to reset your styles to a starting point. People who do web design know that not all browsers use the same base for many html tags ( Such as h1 tags which are set to 32px in “Safari” and 24pt in “IE7” ). Resetting many of the html tags at the start of your “Style Sheet” will help with many headaches later on.
Also you can add “resets” of your own , such as if you want all your “H” tags not to be “Bold” you can set them to font-weight to be “normal” at the start , but if later on you want one to be “Bold” you can set it just for that particular one.
And the other thing I do at the start is to set the “Base” font-size. I like to work with “em’s” as it makes it more flexible. So I set the font-size in the the “body” to 62.5% ( the base font-size of most browsers is 16px so 62.5% of 16px is 10px ) making 1em = 10px. This will also effect the size of elements, margin and padding, so a “Div” that you want to be 300px wide and with a margin of 10px would be set to width:30em; margin: 1em. And putting “html { font-size:16px; }” will make sure that the users browser’s font will be set at 16px at the start.
So in closing using the “CSS Reset” before you start on your “Website” is a good way to clear up “Cross Browser” issues and have a “Starting Point” to work from. I also want to mention that the use of “Reset CSS” is a personal perference and there are some who are against it and some who would work without it, while how they are used and where they go is also a choice.
So with that a text copy of of the one I am currently using is here, and I like to put it at the top of my single “CSS” file ( this is to cut down on the number of css file i use to help with the “Page-speed” ). I hope this helps everyone.
