Loading ...

CSS Reset - What is it? | CodeAsp.Net

CSS Reset - What is it?

 /5
0 (0votes)

Since the fine line between CSS/HTML coders and ASP.NET developer is becoming thinner everyday, I like to encourage all ASP.NET developers to become familiar with CSS.

As you may know (or may not know) the major browsers (IE, Firefox, Safari) all use different HTML/CSS rendering engines. And because of this, they all interpret HTML and CSS a little differently.

Now, the primary goal of a CSS Reset is to reduce or eliminate browser rendering inconsistencies. It's used to set HTML elements to a specific baseline, giving you a consistancy of HTML rendering across the major web browsers.

Why would "I" need this?

Because, as web designers/developers, we want to ensure that our websites work for everyone and maintain their look and feel across browsers. But, for many projects, we can't possibly test every single browser version of every single platform.

What does it look like?

A common CSS Reset looks like this:

* { margin: 0; padding: 0; }

html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, code, 
del, dfn, em, img, q, dl, dt, dd, ol, ul, 
li, fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td 
{margin:0;padding:0;border:0;font-weight:inherit;
font-style:inherit;font-size:100%;font-family:inherit;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, 
q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

Where do I put this hodgepodge of code?

What you'll want to do is -- copy and paste this into the beginning of your CSS file. You'll want to make sure that this appears before any other CSS styles. Why? Remember, this sets all of the HTML elements to a baseline from which you'll work.

Now, some people may say that there are down-falls to this.

Let me explain...

When you "reset" the styles to a baseline, this means that your HTML tags will have zero margin, zero padding...your UL and OL lists will no longer have bullets, headings will no longer be sized by default, along with many other changes.

Using a CSS Reset is going to make you declare every HTML tag you use and is going to require you to explicitly style it in your CSS file. So...yea...upfront, it's going to cause more CSS coding for you...but you will have more control over the rendering and how your pages appear in different browsers.

In the next post, I'll show you some tricks to overcome all of this "upfront" CSS styling.

Read Part 2 - CSS typography styles

Thanks for reading.

Comments (no comments yet)

Top Posts