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;
- }
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%;
- }
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;
- }
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: rightright;
- padding: .5em 0 .5em .5em;
- }
.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: rightright;
- padding: .5em 0 .5em .5em;
- }
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
discuss this topic to forum
