Advertisement
HTML & CSS

Quick Tip: Create Your Own Simple Reset.css File

by

Far too many novice CSS designers don't realize the importance of creating a "reset.css" file. When you have an environment where each browser has its own "default" styling, you'll often find yourself thumping your skull as you ask yourself, "Why is there a spacing here?" To save yourself some of the headaches that you'll undoubtedly experience, you'll need to create your own simple reset file. The problem with using one of the many currently existing frameworks is that they aren't tailored specifically to you. For example, I never use the deprecated "center" element in my projects. Consequently, I don't need to put it into my default styling. However, others may need to do so - though they would deserve a slap on the wrist...or the buttocks if you're so inclined.

Step 1: Zero Out Your Margins And Padding

By default, the browsers will add margins to many elements. For example, typically there are about six pixels of margins on the body element. As the designer, you should be the one specifying these figures! (Except maybe when it comes to font size - which is a whole other topic to be debated at length.) So let's zero out a bunch of these elements!

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

Step 2: Take Control Of Your Elements

You may have noticed that your elements vary in size from browser to browser. You can change this by setting the default font-size to 100%.

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}

Next, we'll need to define the margins and padding for our heading elements. I'm also going to remove the list-style-type from my list elements. Lastly, I'll set a base font-size for the body element.

body
{
line-height: 1;
font-size: 88%;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

img
{
border: 0;
}

Step 3: Expand

I typically like to include a few common classes that I use in all of my projects. You may or may not choose to use these yourself.

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

Here Is Our Final Simple Reset.css File.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this. */;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

a
{
color: black;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

At least for me, this is all I need to get started with a new website. For your own projects, you should expand upon what I have here so that it best suits you. You should probably specify the margins on more of your commonly used elements, like the paragraph tag.

If you wish to have a 100% reset file, I recommend that you refer to Eric Meyer's popular "Reset CSS" file. Alternatively, you can check out the YUI Reset CSS. See you on Monday!

Related Posts
  • Web Design
    HTML & CSS
    Easier Visual Data in the Browser With Variance ChartsVariance thumb
    Today, we will be diving into Variance Charts; a unique JavaScript based "grammer of graphics" which provides an abstract, declarative markup style to create what would otherwise be fairly complex charts. Read More…
  • Web Design
    Typography
    Getting the Hang of Hanging PunctuationGrand motel text effect
    Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web... until now. We’ll take a look at the value of hanging punctuation and how you can partially implement it using a little JavaScript and a CSS rule which has been around for years.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    CMS
    Uber Aesthetics and ResponsivenessGhost rwd retina
    Welcome to the final part of our Ghost theme design tutorial series! In the previous two parts of this series we worked on the first half of styling our theme and laid the groundwork for responsive behavior. This fifth and final part finalizes our styling and completes the task of making our theme fully responsive.Read More…
  • Web Design
    Typography
    A Web Designer's Typographic BoilerplateB
    I like to use a typography.css in my projects; a separate file which houses all the basic structural typographic styles I'll need. A lot of what's found within it is obvious stuff (heading sizes, for example) but it also contains less obvious things which I don't want to forget. Let's work our way through the checklist..Read More…