Advanced CSS – Using A Reset.css File To Gain Complete Control
It took me about a year to feel as though I completely owned cascading style sheets. For a language (yes, it IS a language) with simple syntax, CSS optimization techniques can take quite a while to learn. Formulating your style sheets to do exactly what you want starts with a good foundation, which is why I eventually started using a reset.css file.
Why a reset.css file? Simple -- control. I don't want any formatting on my websites that I didn't specify. Here's my base reset.css file with some quick points following the code:
/* all media */
/* global */
* { margin:0; padding:0; }
body { background:#fff; padding:15px 0 30px 0; font:11px arial, helvetica, sans-serif; }
/* tags */
h1 { padding:0 0 15px 0; }
h2 { padding:5px 0 0 0; }
label,select { cursor:pointer; }
li { line-height:15px; margin:5px 0 0 0; }
ol, ul { padding:0 0 10px 35px; }
p { line-height:15px; padding:0 0 10px 0; }
textarea,input { font:11px arial, helvetica, sans-serif; padding:2px; }
/* custom */
.clear { clear:both; }
.input { border:1px solid #ccc; padding:2px; }
.page-break,.print-only { display:none; }
.point { cursor:pointer; }
/* links */
a { color:inherit; }
a:link, a:visited { color:#00f; text-decoration:underline; }
a:hover, a:active { color:#00f; text-decoration:none; }
a img { border:0; }
/* print media */
@media print
{
/* global */
body { color:#000; font-size:9pt; }
/* layout */
#wrap { width:600px; }
/* custom */
.print-only { display:block; }
.page-break { page-break-before:always; }
/* links */
a { text-decoration:underline; color:#999; }
}
Global Settings
There are some settings that you can set globally so you might as well do so. Be wary, however, of what you put in the "*" setting as opposed "body" setting. For example, setting the font-size property in the '*' selector will change the font-size of the '<b>' tag -- you will only want the bold tag to change the font-weight to bold, not change the font size. Place the global font-size in the <body> tag.
No Margin & Padding
Microsoft Internet Explorer and Firefox use a very different set of rules for margin and padding and I'd much rather not take the chance that margin look different in either browser.
Screen & Print Together
Putting my basic print needs in the reset.css file saves a request to the server, no good reason besides that.
What are your thoughts? Do you use a reset.css file? What differs between your CSS and mine?
Yahoo’s reset.css file does this job so much better. Take a look at it!
* {} is evil !
Maybe. * is global, and works in all browsers. The problem with the Yahoo reset.css file is that it’s too bloated and causes for unnecessary download time.
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
You are not a CSS guru. You’ll read what you wrote as an opening for this article in about a year and feel like a complete idiot, trust me.
@trench: I’m disappointed by your “comment.” I’m well aware of who Eric Meyer is, his credentials, his website, and his reset.css file. I simply don’t subscribe to all of his theories. And to quote him in the article you mentioned:
“that this is not a case of “everyone must use these styles in a certain way without alteration
I agree with David’s idea of ‘creating your own defaults’. While I am an admirer of Eric’s work you should never so blindly just take other people’s recommendations for gospel, but build your own ideas off it. That’s the nature of the community.
However, the fact that *{} is bad is not a recommendation — that’s a bloody order! ;)
Trench… Grow up man! What’s the matter with you? If you disagree with him, fine. But try and convey that point as an adult would.
I don’t like Yahoo’s file either, for much the same reasons. It’s waaaaay too big.
The interesting thing about reset files stems from your statement above “I don’t want any formatting on my websites that I didn’t specify”. It may sound Zen, but that means the reset file *is* formatting, so it’s not really a “reset” file, is it?
I’m not arguing against the basic idea, just writing about a refinement of sorts to the idea. Instead of starting with a reset file and then creating the site layout in a blank CSS file, I start with a “reset” file and edit it to create the layout for the site.
The long-term effects of that approach are that I maintain a layout file that I can reuse if I go to build another site with the same or similar layout, and a “blank” file (the original reset file) for when I start to build a layout unlike others I’ve done. It’s no more arduous than maintaining a reset file and a separate layout file, yet it results in one less http request, and the elimination of redundancies (setting a rule for a selector, then changing the rule for the selector) cuts down on the “weight” of the CSS file as well.
I think this works better; I know it works better for me. Make up your own mind for your own projects.
I too use a reset similar to this.
The only difference is that I use font % sizes rather than fixed pixel sizes. It allows for easier accessibility updates IMHO.
@Trench – Go and read a book called “How to Win Friends and Influence People”. It’s pretty famous. Maybe in a year when you’ve read that, you’ll look back at your forum post here and feel like a complete idiot, “trust me”.
Hey David,
We don’t use the code below because it strips down the buttons that appear on forms, etc. There is no CSS value to set them back to the browsers defaults.
* { margin: 0; padding: 0; }
HOWEVER, if you style your own buttons there is no reason not to use this method.
I hope what I said was accurate, I’m not completely sure if they’ve updated this or not.
#wrap { width:600px; }
Wouldnt it be better to specify 100% width on the wrap? This way people with different page sizes will get full width. (Example: printing landscape)
@Brad: Only if the customer doesn’t want a fixed with website.
I highly agree with using a CSS reset file for layouts, it has taken a lot of hassle out of web design for me.
Obviously they are not going to work right out of the box for everyone, so choose one, and build on it carrying it over from design to design “evolving” it into something that really works for you.
the world does not revolve around eric meyer, nor did he invent the world or css. he is my nemesis.
Thanks a lot friends.Good posts.
I have started looking at CSS frameworks and reset style sheets lately, and I have come to a basic conclusion.
Why reset? Set instead. Simply put, replace your reset style sheet with one that SETs all the basic styles to the defaults you would like to start from instead. You still get a good baseline across browsers by setting all your styles to a standard format. I just don’t see the point of doing something to force me to specifically undo it later. I would much rather start with a style sheet that has a reasonable starting point that overrides the differences between browsers while at the same time making elements appear as I would expect them to everywhere.
So how about we see the death of the reset style sheet and the birth of frameworks with set style sheets. I think I will work on creating my own set.css in the near future.
dear Mr. David Walsh;
I was in an attempt of gathering several style resetting opinions of different people so I could compare them with mine and create some variety in resetting my styles; such a search would have -of course- included Eric Meyer’s Reset CSS, Yahoo! UI ‘s Reset CSS, your as well as the one I had been using for a while.
I found your styling is not “zeroing all the CSS” but it’s a great asset for starting a new XHTML web page by turning the fundamental aspects of web page to some “ready-to-paint” color books – almost similar to be having your favorite text editor to start new documents with the basic HTML mark-up ready for you, rather than sitting on a blank page.
The reason for responding here is not those verses of mine; although you haven’t deserved any less – very well designed web site with the endeavor many people would appreciate – just like me. But not everybody ..
seeing those comments here on top of the pile I think I should a few words about what you did. And in case you are being accused of not being a guru, let me tell you I am a guru, but the praises goes to effort not the titles. Great web site, good efforts, keep going :)
And the big oaf.. yes I conqur with David Walsh – CSS can be described as a language with its own structural rules and even dialects that you believe or you’re sure you understand * I am unsure about it.
regards and best wishes
John C. Reid, the reset file doesn’t have to be set in stone. I started of with Eric Meyers reset file, and have slowly built it up to include the default styles that I have wanted across all the websites that I develop. The point is that it is an great starting point to level the playing field.
Thank you David,
Your my savior. I stumbled upon those obscure Safari settings. Safari’s default hyperlink settings are really a pain. Thanks to your reset settings I’m able to set my own preferences.
I’ll adjust the settings if I run into problems.
I agree with not just plugging in Meyer’s reset. It’s better to make your own and understand the code you’re using. Otherwise you’ll never learn. Good post and css examples.
Brad, using 100% width could possibly cause a site presentation issues – (OS resolution issues ) ..
Nice posts …
Defintely agree that it’s good to have some kind of CSS Reset with every project. I usually start with the Meyer reset and change it up as required. :-)
Hi David,
Very nice website. Clean design and cool color theme. I loved it. :)
I am learning CSS while doing it, so relatively new. I have a question about reset.css. Why do you need it? I read you stated that “I don’t want any formatting on my websites that I didn’t specify.” Makes sense, but my css is already doing that for me. Why do I want my website to download 2 css files, when work can be done with one?
Thanks,
Prajakta
All demo files are available through the download link directly below the post.