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.
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
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;
}
Step:2 Reset typographic styles:
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}
em
{
font-style: italic;
}
strong
{
font-weight: bold;
}
Step:3 Reset unordered lists:
ul, ol
{
list-style-type: none;
}
Step:4 Get rid of borders::
img, fieldset
{
border:0;
}
Here Is Our Final Simple Reset.css File.
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;
}
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.
Promote Us
Related Articles:
if you enjoyed reading this article, please check out other related articles below:
Loading...
Andrew Champsays on : November 2nd, 2009 at 2:30 pm Said:
Looks good, thanks for sharing!
Dream Websays on : November 3rd, 2009 at 10:10 am Said:
How to reset CSS…
Excelente articulo de la mano de Developer´s Paradise que nos enseña una de las tantas tecnicas que tenemos para resetear los estilos que vienen por defecto en los navegadores.
Esto nos viene bien a todos porque asi podremos empezar a trabajar desde…
Techshot Imaginesays on : November 3rd, 2009 at 10:11 am Said:
That’s an interesting read…
You have simpliefied the process to the basic units….nice read..
regards
Techshot Imagine´s last blog ..Techshot -Sports & Entertainment
Design Informersays on : November 3rd, 2009 at 11:11 pm Said:
Good job on the reset.css
I use something similar to this.
Design Informer´s last blog ..How to Mix Faces in Adobe Photoshop
oplsays on : November 11th, 2009 at 4:01 am Said:
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!
Reset CSS « Viker Websays on : March 18th, 2010 at 1:12 am Said:
[...] Via Developer´s Paradise , nos muestra una de tantas formas de resetear [...]