Resetting Your Designs

Just in case you don’t know, a default reset stylesheet is a .css file that you use in your HTML documents, and “resetting your designs” is a term and technique that allows you to control the design. The file has CSS rules that effectively neutralize a browser’s default rendering of HTML elements and positioning. It sets all margins and padding to 0 and removes text decoration, size, and weight from HTML tags that normally have these by default, like the header tags (h1 – h6), em, and strong.

Resetting Your Designs

To use a reset stylesheet, you link it in your header like any other stylesheet. The reset stylesheet removes the browser’s defaults, so you don’t have to worry about them.

Set your font faces and spacing however you like. The idea behind this extra work is that when a browser is reset to this zeroed-out state, you can specify exactly what you want your elements to look like, and practically all browsers will have an easier time rendering your design as you intended it rather than how the browser’s defaults want to display it.

Resetting Your Designs for CSS

Then, when you’re writing your own CSS, you can choose exactly how each element is to look. You can turn the bold text back on for the headers, and set the exact amount of padding you want, for example.

Your HTML document becomes a blank canvas and you can work with whatever CSS you wish.

Reset stylesheet advantages
1. Resetting greatly helps a designer build designs that look most similar (sometimes, identical) cross-browsers.

2. Because a reset will “zero out” a browser’s formatting of your HTML, you get total control in your own CSS to declare exactly what you want, without the worry of whether or not a specific browser is going to tamper with your design.

3. Reset stylesheets can be modified to suit your tastes. A reset doesn’t always have to zero out absolutely everything. Maybe you’re comfortable with how the different browsers handle some things, or maybe you have a different idea for what the baseline for most of your projects should be.

4. You can modify a reset stylesheet to suit your needs and create a uniformity amongst your work that is unique to you.

5. An experienced designer who resets can save time. It’s true that learning to use a reset stylesheet can take some time to get used to, but once you’ve learned the ins and outs of your reset, and have your own modifications that you’ve built over time, you can pop in your reset and modifications into a design and just start designing.

Reset stylesheet disadvantages
1. The “clean slate” effect takes some getting used to. This adds a bit of a learning curve to your web design, which you’re probably already nice and familiar with. Most likely, you’ve built up your methods and workflow over time, and something as drastic as a reset stylesheet can slow you down again.

2. Because resetting takes everything down to basics, you have to re-add things that you might think should just be included, like bold text in headers. You’ll also need to pay special attention to where exactly you want all your design elements to appear, and how. Things you used to let the browser take care of, you now have to code for. This leaves you writing more CSS than you probably want to, or even need to. Of course, you can start with your own preset CSS as part of your reset.

3. Even through, the reset still doesn’t guarantee that your designs will look identical in various browsers. In fact, in some extreme cases, your design may end up looking no different across browsers than if you hadn’t used a reset stylesheet. They work best with what are called “Grade-A” browsers, and some parts of the reset don’t affect browsers not on this list. Granted, the Grade A list is the list of browsers we all design for primarily, anyway.

What do I think?

When it comes to resetting my own web design, I fall somewhere in the middle of this debate. It is a very powerful tool that can useful in some circumstances. It’s good to know about and I used to use it more than I do now. In order to keep up with the demands of production, web designers use templates instead of their own coding, WordPress instead of splicing together various functions and forms, and clients are choosing pre-designed concepts from their professions, organizations, or their own Internet searches which already have CSS written.