I was working on a client’s code the other day, and I realized that my approach to using CSS is completely different from the coder who worked on this stuff before me, so I thought I’d post a little blurb here for any web designers out there who are just getting started.

If you’ve used CSS, then you know what a class is. You use a class to assign a visual behavior to an html element.

For example, I could have something like this:

<div class="roundedbox">My, what a pretty rounded box.</div>

Then, in the CSS, you could have something like this:

.roundedbox { 
 -webkit-border: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px; 
 padding:8px;
 background-color:#ccccff;
}

The ending html would display a rounded box, much like this one:

I also added a margin to make it easier to see. But what if you wanted a different colored rounded box? You could create another class:

.roundedredbox { 
 -webkit-border: 10px; 
 -moz-border-radius: 10px; 
 border-radius: 10px; 
 padding:8px; 
 background-color:red; 
 color:white; 
}

But what about if you want another color box? Pretty soon, your css is cluttered up with different kinds of boxes.

Instead, you could define a class like this:

.redbox {
background-color:red;
color:white;
}

And display it with a simple tag that lists the classes:

<div class="roundedbox redbox">Hey, this box is red!</div>

See? It’s flexible, readable, and takes up less space in your CSS file. Now if you want to have some  tiny text (for a copyright or some other such ugly thing), you can add a class called  “tinytext” with “font-size:80%” and apply it wherever you want it. The great thing about this is that you only have to change the tinytext formatting in one place in order to change all your tinytext sections.

My css files typically have a “roundedbox” and a “shadowed” class that I apply as needed, as well as a few others. It works out pretty well.

Want to comment? Hit me up on Threads or Facebook!