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.

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.