Stylesheets A’ Plenty

I started by first creating 13 different stylesheets. The first one I created was a base stylesheet containing the basic structure of site. The other stylesheets containing color changes to the header, headings, and link colors, were created for every month. I saved each of the monthly stylesheets by month number, so September’s stylesheet was saved as 9.css, June’s was 6.css and December’s was 12.css. You can take a look through the archived entries on this site to see the various styling for each month.

Taking Advantage of WordPress Conditional Tags

WordPress conditional tags are an easy way to tell WordPress to alter various elements within your theme depending on certain conditions. Most early themes for WordPress take advantage of conditional tags to display different content in the sidebar of a page depending on your current location on the site. In order to keep the current month’s look on the front page of my site, but have the individual entries maintain the look of the month it was written I set up a conditional that said if the page is_single() then display the stylesheet of the month it was published. If we are not on a single entry page then display the current month’s stylesheet. Here’s what it looks like:

< ?php if (is_single() ) { ?>
<link rel="stylesheet" type="text/css" href="http://sitename.com/<?php the_time('n'); ?>.css" />
< ?php } else { ?>
<link rel="stylesheet” type="text/css" href="http://sitename.com/<?php echo date('n'); ?>.css" />
< ?php } ?>


PHP

Notice the small bit of PHP within the conditional we set up – <?php echo date('n'); ?>? I replaced the name of the imported CSS file with a short snippet of PHP, which in turn generates a numerical value of one through twelve depending on the month, and appends the *.css file extension. This is why I saved my monthly stylesheets by month number. You can read more about the PHP Date/Time functions and decide what format is best for you.

Options

If you are not using WordPress you can still easily accomplish the same switching of stylesheets with some simple javascript or server side methods. Once you are familiar with some the options of the PHP Date/Time functions you can experiment with changing the look of your site at any interval you like.

View menu example.(Updated 11/4/06)

The effect looks a lot like an iframe, but is not near as messy and is more search engine friendly. To recreate this effect, start by creating a normal div with all of the content you want to scroll within that div. To make the div display a scrollbar you must use the overflow element in the CSS. By simply adding “overflow: auto” to your styles, the div will then scroll when there is an overflow of content. Here is what your style sheet would look like for this div:


#scrollingdiv {
color: #333;
border: 1px solid #DDD;
padding: 5px;
width: 215px;
height: 150px;
overflow: auto;
}


Below are the results using the styles above:

1. Ids Once, Classes a Bunch

Classes can be used as many times as needed within a document, but IDs can only be applied once within a document. IDs are preceded by a pound sign (#). Classes are preceded by period (.). Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.

2. Organize Your Styles

There is nothing more frustrating than searching through lots of unorganized styles trying to find the right one to edit. I like to breakdown all my styles into sections, and even include a table of contents. Other people will alphabetize their styles, while others will indent. These are just a few simple way to organize your styles, and make things a lot easier to find. You’ll have to find which method works best for you.

3. Use Meaningful Names

I always recommend using meaningful names for your layouts.


#id1{
/* Some styling */
}
#id2 {
/* Some styling */
}
#id3 {
/* Some styling */
}


#id1, #id2, and #id3 doesn’t really explain much about the style and can easily confuse you when making changes. The following styles give you a lot better idea of what you are really working with.


#heading {
/* Some styling */
}
#navigation {
/* Some styling */
}
#maincontent {
/* Some styling */
}


4. Case Sensitivity

Element names in selectors are case sensitive. .footerlinks is not the same as .FooterLinks. I recommend always using lowercase for element names in CSS selectors. If you do decide to capitilize element names, make sure you also do so in your HTML.

5. Use Valid Markup and CSS

This may seem like a bit of a no-brainer, but I felt it needed to be mentioned. Check both your markup and CSS with W3C validators.

6. Avoid Overly Specific Names

Your names should relate to your content, not your presentation. While an element name like .redtext may help you find what you are looking for when you first create your site, what happens in 3 months when either you or your client decide to change those to some other color, and you end up with the following?


.redtext {
color:blue;
}


7. Link Styles in the Right Order

When applying CSS to the different states of a link you’ll want to specify them in the order :link :visited :hover :active. Some people choose to remember this order by “LoVe HAte” or “LVHA” for short.

8. Group Your Selectors

When several elements share the same properties you can group these properties to avoid having to specify the same properties several times.


h1, h2, h3, h4 {
font-family: 'Century Gothic', 'Lucida Grande', 'Trebuchet MS', Verdana, Sans-Serif;
}


9. Remove Default Values

The following style removes default padding and margin on all elements, so you can eliminate the need to specify a value for these properties.


* {
margin:0;
padding:0;
}


10. Use Comments to Help Explain Styles

When starting out with CSS you might forget why a style has certain properties. Use can easily add notes to your stylesheet to better explain things, and avoid deleting something you might need.


#footer {
background: #333; /* This controls the color of our footer*/
color:#FFF; /* This controls the color of text in the footer */
margin: 10px 0px 0px; /* Adds a 10px margin to the top */
}


11. Add Closing Tag Comments to Markup

To easily keep track of your divs that have lots of content add a small closing comment after the closing tag.


<div id="wrapper">
<div id="navigation">...</div>
<div id="maincontent">...</div>
<div id="subcontent">...</div>
</div><!--#wrapper closing-->


12. Check Designs in Good Browsers First

I always test my designs first in Safari and Firefox, then move on to the evil mistress that is Internet Explorer. I’ve never understood those that start testing with an inferior browser.

13. Look at Others

See how others created their layouts. Dig through their CSS, look at their markup, but do not steal. If you don’t understand how they created their layout send them a polite email asking for help. You’ll be surprised that most people are willing to help if you go about asking the right way.

14. Save a Basic Stylesheet

Once you have a created and tested a layout you like, save it! You can go back and use the same inital stylesheet again and again. I always recommened saving the structure for 2 column, 3 column, and single column layouts. It will save you a lot time and headaches.

When it comes to designing without tables most folks are learning as they go. You will get frustrated. You will rant, rave, begin to loathe all that is IE, and maybe even give up a few times. The key I’ve found is to take baby steps. Your first steps might be to do away with font tags or use a CSS/table hybrid layout, but as you get more comfortable with CSS you can slowly take steps forward. With each project I learn more and more and seem to change my methods. There are millions of different ways to accomplish CSS layouts. You have to find what works best for you. The sense of reward and pride you will have from learning something new and creating a standards based CSS layout is well worth all the effort.

View menu example.