CSS Code Structure

The following is an excerpt of a style sheet currently in use on a client’s site. The rationale behind code structure is as follows:

1. Import any ancillary style sheets
2. Define the site for which this style sheet is coded
3. List out all colors at the top for easy reference
4. Optional: List out widths of primary containers
5. Spacing and indentation of code does matter – readability for other developers
6. Redefine tags first
7. Define primary container (real estate) areas second
8. Under each primary container redefine tags within it
9. Define classes
10. Remember that each rule is applied last – try to avoid over-writing rules

STYLE.CSS

@import url("navigation.css");
/*
MAIN STYLE SHEET FOR YOURDOMAINNAME.COM
#fe5301: orange
#ff5304: orange (2)
#5c7a93: blue for text
#434345: dark grey - drop down menu text
#333: dark grey - search box

background colors:
#444444: dark grey, footer
#ededef: dropdown
#61c2cb: teal
#eee: light grey - search box

DIMENSIONS:
width: 980px
left col: 447px
right col: 530px 

*/
body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:67.5%;
    background-color:#fff;
    background-image:url(images/bgbody2.gif);
    background-repeat:repeat-x;
}
h2 {
    font-weight:normal;
    font-size:1.9em;
    text-transform:uppercase;
    line-height:1.2em;
    margin-bottom:2px;
    font-family: "Times New Roman", Times, serif;
}
h3 {
    font-weight:bold;
    font-size:1.3em;
    margin-bottom:2px;
    line-height:1.2em;
    clear:both;
}
h4 {
    font-weight:bold;
    font-size:1.3em;
    font-style:italic;
    color:#333;
}
p,  dd, dt, td { font-size:1.1em; }
p { text-align:justify; }
li { font-size:1.1em; }
li ul { font-size:1em; }
a { color:#ff5304; text-decoration:none; }
a:hover { text-decoration:underline; }
/* CONTAINERS */
#totalcontainer {
    width: 980px;
    margin: 0 auto;
    position:relative;
}
#logo {
    width:980px;
    height:136px;position:relative;
    margin-top:12px;
}
#topnav { /* See project 7 folder for details */
    height:37px;
}
/* HOME PAGE */
#leftColumn {
    width: 447px;
    float:left;
    border-left:3px solid #fff;
    margin-top:0;
}
#rightColumn {
    width:530px;
    float:left;
    background-image:url(images/bgrightcolumn.gif);
    background-repeat:repeat-x;
}
body:last-child:not(:root:root) #rightColumn { /* to handle safari */
    margin-top:-1px;
}
#headlineColumn {
    width:330px;
    float:left;
}
/* END HOME PAGE */
#mainContent { /* For all internal pages */
    background-image:url(images/bgrightcolumn.gif);
    background-repeat:repeat-x;
    float:left;
    min-height:500px;
    padding-bottom:20px;
}
#mainContent a {
    color: #5c7a93;
    text-decoration:underline;
}
#article {
    width:699px;
    float:left;
    border-left:3px solid #fff;
    padding-left:24px;
    padding-right:54px;
}
#imageGallery {
    width:846px;
    float:left;
    border-left:3px solid #fff;
    border-right:3px solid #fff;
    padding-left:24px;
    padding-right:24px;
}
#imageGalleryPosts {
    width:699px;
    float:left;
}
.imgAlignLeft {
    float:left;
    margin-right:21px;
    margin-bottom:25px;
}
#article img, #imageGallery img, #imageGalleryPosts img {
    padding: 2px;
    background-color:#fff;
    border: 1px solid #ccc;
    display:block;
    margin: 4px auto 10px auto;
}
/* SEARCH */
#searchBox {
    border-bottom:3px solid #fff;
    padding-bottom:6px;
    padding-left:16px;
    padding-top:4px;
    margin: 0 auto;
}
#searchBox p {
    font-size:.9em;
    font-weight:bold;
    text-transform:uppercase;
    color:#333;
    margin-bottom:0;
}
#searchBox form input.textfield {
    border: 1px solid #cccccc;
    font-size: 1em;
    width:160px;
    background-color:#eee;
}
#searchBox  form input.goButton2 {
    background: none;
    background-image:url(images/arrow_orange.gif);
    background-repeat:no-repeat;
    background-position:right 6px;
    color:#fe5301;
    text-align:right;
    border:none;
    width:160px;
    font-size:.9em;
    padding-right:10px;
}
/* FOOTER */
#footer {
    background-color:#444444;
    height:41px;
    clear:both;
    margin-top:20px;
    width:100%;
}
#footer ul { margin:0 0 0 -38px; list-style-type:none;  text-align:center; padding-top:12px;}
#footer li { display:inline; border-right: 1px solid #ff5304; margin:0; }
#footer li a {color: #ff5304; text-decoration:none; padding: 0 10px;  }
#footer li a:hover { text-decoration:underline; }
#footer li.last { border:none; }
/* CLASSES */
.right2 { border-right:2px solid #fff;}
.right3 { border-right:3px solid #fff;}
.author {
    font-size: 1.02em;
    text-transform:uppercase;
    margin:4px 0 0 0;
}
.postedDate { font-size:1em;    margin:0; }
.clearit { clear:both; }

Return to Examples page

All photographs taken on location by A. E. Shroeder

TIP