explodingboy

I often receive emails from people asking what steps to take to learn CSS and how to create CSS based layouts. I usually respond by suggesting a few books and offer up a few hints of my own. The following tips are what I have found work best for me. They may seem very basic to some, but can be very valuable to others.

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.