One of the most frustrating aspects of web site design is when a web page insists on displaying in a way that you know is contrary to what you have specified. In order to help avoid these moments, it is always good to start out with a few commands at the beginning of your style sheet that resets the browser to give you better control over the way a web page is displayed.
The code below can be pasted at the beginning of your style sheet (CSS file) to give you this control.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
textarea,p,blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }
html {font-size: 62.5%;}These commands remove line spacing, padding and margins from all of the most popular HTML tags and define the font as ‘normal’ (i.e. - no bold, italics, etc.). Additionally, Headings are reset to remove additional line spacing and reset the size of the text to a normal size. This also includes a line for formatting quotations in your web pages.
The last line resets the browser font size to about 10 pixels.This is a good font size to start with, as you can then use em units in a more understandable manner for specifying the font sizes for your headers and paragraphs. For example, to have the paragraph tags display at 12 pixels and header 1 tags at 20 pixels, you would specify later in your CSS files the following statements:
p {font-size: 1.2em;}
h1 {font-size: 2em;}You can now continue to add your own desired characteristics through out your CSS file for each HTML element as you wish, without having to worry about the default setting imposed upon you by a browser.
Dude, you’re back..!
This is exactly the type of thing I’ve been looking for - it will save me hours with setting up my stylesheets for future sites - thanks!
Cheers,
Martin.