The ability to reuse blocks of code is a blessing and a time saver to programmers everywhere. Web sites are too distinctive to allow you to do very much of this, right? Wrong. You can build a CSS framework to give you the flexibility you need, and use the time you save for the parts of your project that matter most. This five-part series shows you how.
Building a Simple CSS Framework - Creating a simple reset style sheet (Page 2 of 4 )
The first step involved in creating this CSS framework will consist of coding a reset style sheet that permits you to assign a default style to the most common elements of a web document. This process will require styling the body and HTML headers of the document in question, along with a few other typical selectors, such as paragraphs, links, lists and forms.
But undoubtedly, the way that this reset CSS file can be created will be much better understood if you look at its initial signature, which is listed below:
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h2{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h3{
font: bold 14pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h4{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h5{
font: bold 11pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h6{
font: bold 10pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
p{
font: normal 9pt Verdana, Arial, Helvetica, sans-serif;
Definitely, the manner that I created the above reset CSS file isn’t rocket science, right? As you can see, I simply assigned some default styles for the most common selectors of a web document, such as the body section and all of the headers, paragraphs and unordered lists, and finally the pertinent links.
In addition, it’s worthwhile to notice that I created a “hidden” class. As you may guess, it comes in handy for initially hiding any web page element that will be displayed via JavaScript.
All right, at this point I demonstrated how easy it is to construct a simple reset style sheet, which actually is the first building block of this basic CSS framework. This file offers pretty good functionality, since it allows you to assign default styles to certain selectors of a web document in a completely independent way.
Therefore, the next step that I’m going to take regarding the development of this CSS framework will be defining another style sheet that allows you to build a liquid web page layout.
Want to learn how this new CSS file will be created? Then click on the link that appears below and keep reading.
Style Sheets 
/ 9 
HTML5 Boilerplate Introduction
