How to Create Your Own Simple Reset.css File

Most of the novice CSS designers don’t realize the importance of creating a “reset.css” file. Different browsers process code differently. What may look perfect in Firefox, may be off in Internet Explorer. There are many CSS Resets all over the internet that help combat browser problems. The major problem with using one of the many currently existing frameworks is that they aren’t tailored specifically to you.


How to Create Your Own Simple Reset.css File

Now its time to creat your own custom reset file. In this tutorial you will find How to Create Your Own Simple Reset.css File for your next website project. I hope you will enjoy this tutorial.

Step: 1 Remove margin and padding elements

[code lang="css"]
html, body, div, span, h1, h2, h3, h4, h5, h6, blockquote, pre, em, 
font, img, small, strong, sub, sup, ul, ol, li, dl, dt, dd, fieldset, form, 
label, legend, tr, th, td, input, select,textarea  
[/code]

[code lang="css"]
{
margin:0; padding:0;  border:0; outline:0;
}
[/code]

Step:2 Reset typographic styles:

[code lang="css"]
h1, h2, h3, h4, h5, h6
{
 font-size: 100%;
}
em
{
font-style: italic;
}
strong
{
font-weight: bold;
}
[/code]

Step:3 Reset unordered lists:

[code lang="css"]
ul, ol
{
list-style-type: none;
}
[/code]

Step:4 Get rid of borders::

[code lang="css"]
img, fieldset
{
border:0;
}
[/code]

Here Is Our Final Simple Reset.css File.

[code lang="css"]
html, body, div, span, h1, h2, h3, h4, h5, h6, blockquote, pre, em,
font, img, small, strong, sub, sup, ul, ol, li, dl, dt, dd, fieldset, form, 
label, legend, tr, th, td, input, select,textarea
{
margin:0; padding:0;  border:0; outline:0;
}

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

em
{
font-style: italic;
}

strong
{
font-weight: bold;
}

ul, ol
{
list-style: none;
}

img, fieldset
{
border:0;
}

a  
{  
color: #333333;  
text-decoration: none;  
}  
  
a:hover  
{  
text-decoration: underline;  
}  
[/code]

Conclusion

These are just some of the tips that help me to write better code. I hope that tutorial will also help you to write better and clean code. Apply these Tips to your current and next projects, and you will surely appreciate the efforts.

If You Think that tutorial can be more better , Please share with us. Comment us

if you would like to receive more tutorial from us, please consider subscribing to our feed by RSS or by email.

6 thoughts on “How to Create Your Own Simple Reset.css File

  1. Pingback: Dream Web

  2. opl

    You can safely add in Step 4 “a img { border: 0; }”

    And why on earth in this comment field is the captcha situated below the form button when JS is disabled? Great source of error and frustration!

  3. Pingback: Reset CSS « Viker Web

Leave a Reply

Your email address will not be published. Required fields are marked *