Master style sheets are a big time-saver when you code websites for a living, they also help ensure that you cover all the bases when it comes to styling the less used and often overlook elements. A properly designed style sheet can even reduce the time it take to perform maintenance and updates!
But there is! Today I have chosen to put my personal master style sheet in the public domain.
The CSS is laid out in such a way that there is a place for any additions you might need to make to it, this helps keep your code uniform across projects. I always try to lay out my CSS so that each selector is in an order that matches the way the HTML source appears. For example: the selector for #body is always first and the selector for #footer would be the last in the styling for IDs section.
Have an idea that you think should be added to this style sheet? Contact me!
@charset "UTF-8";
/*
Master Style Sheet developed by Aaron Gough
http://www.aarongough.com
*/
/************************************************
Styling for Standard Elements
*************************************************/
body, html{
border: 0;
padding: 0;
margin: 0;
}
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
h1, h2, h3, h4, h5{
margin: 0;
padding: 0;
font-weight: bold;
}
img{
border: 0;
}
h1{
font-size: 18px;
}
h2{
font-size: 16px;
}
h3{
font-size: 14px;
}
h4{
font-size: 12px;
}
h5{
font-size: 12px;
}
p{
}
ul{
}
/************************************************
Custom Styling for Specific IDs
*************************************************/
#container{
width: 990px;
margin: 0 auto;
}
/************************************************
Global Classes
*************************************************/
/* for any block-level elements */
.clear{
clear: both;
}
.float_left{
float: left;
}
.float_right{
float: right;
}
/* for text */
.align_left{
text-align: left;
}
.align_right{
text-align: right;
}
.align_center{
text-align: center;
}
.align_justify{
text-align: justify;
}
.bold{
font-weight: bold;
}
.italic{
font-style: italic;
}
.underline{
text-decoration: underline;
}
/* for images */
.img_left{
float: left;
display: inline;
margin: 4px 10px 4px 0;
}
.img_right{
float: right;
display: inline;
margin: 4px 0 4px 10px;
}
/* for lists */
.nopadding{
padding: 0;
}
.noindent{
margin-left: 0;
padding-left: 0;
}
.nobullet{
list-style: none;
list-style-image: none;
}
/************************************************
Custom Classes
*************************************************/