Extensive [Commented] CSS

Posted on October 26, 2009 and last modified on October 27th, 2009.

I do a lot of work on sites and one of the biggest hassles I find is that many theme designers make an absolute botch of their CSS files. It only takes a moment to code properly and with some kind of organisation and yet it makes so much difference when you want to make some small changes.

Of course, there is the ongoing argument that white space in your files makes your site load slower, but to be honest, we are talking milliseconds when you are referring to CSS text.

I have opted for a CSS file that is easy to understand and an example of this theme’s CSS is show below:

/*----------------------------------------------------------------------------*/
/* --- SHOWCASE --- */
#showcase {
    border: 1px solid #161616;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding:2px;
    text-align:center;
    width:900px;
    background: #2a2a2a;
}
/*----------------------------------------------------------------------------*/
/* FEATURED ARTICLES --- */

#featurewrapper {
    background: #2a2a2a;
    width:936px;
    margin: 0 auto;
}
h3#featuredtitle {
    margin: 0;
    padding: 0;
    padding: 0 0 6px 11px;
    color: #dddddd;
}
.featurebox {
    background: #2a2a2a;
    float:left;
    padding-right:11px;
    padding-left:11px;
    width: 290px;
    text-align: justify;
}
.featurebox h3 a {
    color: #548D49;
    font-weight: normal;
    letter-spacing: normal;
    text-align: left;
}
.featurebox p img {
    float:left;
    margin-right:6px;
}
.featurebox a {
    color: #F90;
}
.featurebox a:hover {
    color: #FFF;
}
/*----------------------------------------------------------------------------*/
/* --- ARCHIVES PAGE --- */
.archivebox {
    background: #2a2a2a;
    float:left;
    padding-right:0px;
    padding-left:42px;
    width: 270px;
    text-align: justify;
}
.archivebox h3 a {
    color: #548D49;
    font-weight: normal;
    letter-spacing: normal;
    text-align: left;
}
div#archives_wp_cumulus {
    clear:both;
    margin-left: 195px;
}
div#postsbycategory ul li.cattitles a {
    list-style-type: none;
    font-weight: bold;
    text-transform: uppercase;
    color: #44AB39;
    border-bottom: 1px dashed #dddddd;
    margin-right: 31px;
}
div#postsbycategory ul li.cattitles a:visited {
    color: #AB8139;
    list-style-type: none;
}
div#postsbycategory li.posttitles {
    list-style-type: none;
    display: inline;
    padding-left: 20px;
}
/*----------------------------------------------------------------------------*/
/* --- ABOUT PAGE - 3 COLUMNS --- */
#aboutwrapper {
    background: #1F0B0B;
    width:936px;
    margin: 0 auto;
    color: #1F0B0B;
}
#aboutintro {
    margin-bottom: 20px;
    padding: 5px 51px 15px 51px;
    font-size: 150%;
    font-style: italic;
    line-height: 24px;
    text-align: left;
    border-bottom: 1px solid #dddddd;
}
h3#abouttitle {
    margin: 0;
    padding: 0;
    padding: 0 0 6px 11px;
    color: #dddddd;
}
.aboutbox1, .aboutbox2, .aboutbox3 {
    float:left;
    padding-right:12px;
    padding-left:12px;
    width: 270px;
    text-align: left;
}
.aboutbox2 {
    text-align: justify;
}
.aboutbox1 h4, .aboutbox2 h4, .aboutbox3 h4 {
    font-weight: bold;
    letter-spacing: normal;
    text-align: left;
}
.aboutbox1 h4 {
    color: #C06B06;
}
.aboutbox2 h4 {
    color: #065EC0;
}
.aboutbox3 h4 {
    color: #219B41;
}
.aboutbox3 a {
    text-decoration: none;
}
.aboutbox p img {
    float:left;
    margin-right:6px;
}
.aboutbox2 img {
    border: 1px solid #404040;
}
.aboutbox3 ul li {
    list-style-type: none;
}
.aboutbox3 ul li a img, .aboutbox3 ul li a:visited img, .aboutbox3 a img, .aboutbox3 a:visited img {
    border: none;
}
.aboutbox a {
    color: #dddddd;
}
.aboutbox a:hover {
    color: #000000;
}
/*----------------------------------------------------------------------------*/
/***   CONTENT - PAGES and POSTS  ***/
ul.breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size:12px;
}

September ’09

About the author

James has added 29 posts to this site so far...

Founder and co-admin at FreshlyPressed, James also runs and maintains many, many other sites including JamesICT which is very much focussed on WordPress and all of its little idiosyncrasies. He now lives in Brighton, England with his fiancée and writes novels in his spare time. His latest work, 'Procrastination Expectancies' is due out later this year - or maybe the year after that! [more...]