Whenever I begin slicing up a new website design to turn it into a template, one of the first things I do is to implement a reset stylesheet. The ideal reset stylesheet will essentially turn off all of the proprietary default CSS properties that browsers impose on various HTML elements. At the very least, padding and margins need to be reset, as each of the major browsers tend to implement those in completely different manners.
The first reset stylesheet I heard of (and quite possibly the first reset stylesheet created) came from Eric Meyer. He has discussed the concept of reset stylesheets at length on his blog, and provided multiple examples of reset sheets.
My favorite place to go for reset styles, however, is the Yahoo! Developer Network. Yahoo! provides a really well-built reset stylesheet on its content delivery network (CDN), making it easy to implement and giving you a higher probability that the stylesheet has already been cached on the user’s computer than you would have if you hosted your own.
The Yahoo! reset stylesheet does a really good job of resetting the margins and padding for all elements to 0 and eliminating the default styles for lists and more. I highly recommend adding Yahoo!’s reset stylesheet to any new designs you are developing; allowing you to start basically from scratch when you begin adding your own style definitions.
After implementing the reset stylesheet, though, it’s very important to remember that all of the default styles have been reset, including some things that many of us tend to take for granted; such as <strong> and <em>, bullet styles for unordered lists, incrementing numbers for ordered lists, etc.
Post Your Comment