Resetting the Browser with CSS
Published: 11 Aug 2008 In: How to's
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.
Related posts:
- Getting to Grips with CSS
- Most Popular Browser, Screen Size
- Browser Statistics for 2008
- Creating Your own WordPress Plug-in and Widget
- Improving your On-page SEO
Related posts brought to you by Yet Another Related Posts Plugin.
- Tags: CSS, css tips, how to, web site design
Comment Form
About Us
Siam Communications has been helping people with websites since 1998. We have offices in Hong Kong and Bangkok, Thailand offering a variety of low cost web services.
Categories
- Applications (4)
- Blog Ranking (3)
- Business Opportunities (1)
- Domain Names (3)
- General (11)
- How to's (10)
- Marketing Guides (1)
- Premium Websites (1)
- Security (3)
- SEO (15)
- Social Networks (2)
- Uncategorized (2)
- Web Tools (8)
- Website Design (17)
- Online Magazine (6)
- WordPress (5)
- Writing (1)
- admin: I'm often amazed when a reader is so sure of themselves that they take shots at facts and make attem [...]
- Anonymous: 28% fee increase to 12.8 million Thai Baht ($384 million) over the original 10 million Thai Baht sta [...]
- Gracie Hayes: identity theft is rampant both in online and offline settings. better be careful-~' [...]
- Advertising: Needs A Non-Threatening, Appealing Offer | Affiliate Internet Marketing Tips: [...] Adding a Contact Us Form to WordPress | Siam Communications Web … [...] [...]
- Adding a Contact Us Form to WordPress | Siam Communications Web Services & Tools: [...] added to simplify many of the common tasks a blogger needs to deal with. Previously, we dealt [...]
- Adding a Simple Contact Us Form to WordPress
- Immediate Ranking on Page One of Google Search Results
- Thailand’s NTC makes Fourth Attempt at 3G Bidding Rules
- New Version of WordPress Refreshing
- How Usable is Your Website?
- Twitter changing the way they handle Links
- Google’s Caffeine: Search Results 50% Faster
- Misunderstanding Bangkok
- Protecting Your Online Identity
- Search Engine Ranking and Domain Names
2 Responses to Resetting the Browser with CSS
Martin Malden
August 12th, 2008 at 8:59 pm
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.
links for 2008-08-12 [delicious.com] « WealthyDragon
August 13th, 2008 at 8:00 am
[...] Resetting the Browser with CSS Excellent tip for setting your CSS parameters for your entire site. This will save me hours of work! (tags: css css-parameters making-a-website-render-consistently-in-different-browsers designing-websites-with-css) No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]