CSS stands for cascading style sheets. The purpose of CSS - to remove style definitions from the rest of your website code. This is more than an optional step for neat freaks. Correct CSS use saves project costs and development time, makes your website designs more consistent, and allows you to re-brand or tweak your entire website with far fewer changes.

CSS is essentially the "new school" way of sprucing up a website design. It replaces archaic tag-specific parameters such as the table bgcolor attribute or the "b" tag, and also replaces the use of the more universal "style" attribute.

The new-school way of using CSS for website design is to define what are called classes. The class attribute can be added to nearly every tag in the HTML specification, and it's extremely powerful and flexible. It makes your HTML source shorter, which is good for SEO. It provides fallback capabilities, which is good for universal compatibility.

In short, CSS is the only way to go.

More Elegant Code Through CSS

Let's say your website has a normal paragraph style for its content block, and two alternative styles for paragraphs you want to have 'stand out' for various reasons. Let's say the two alternatives are a warning, and a pro tip.

The style definitions for each of these three website design elements will each be about a full line of text, give or take a few words.

What makes more sense when it comes time to maintain a website design: having that style definition copied verbatim into every block where it's being used... or applying a nice short name to each style definition, and referring back to that single definition only by name?

Obviously, the more elegant solution is simply to use the power of a custom-named label. That custom-named label is the CSS class that you create for use in your website design project.

Easier Website Design Maintenance

It doesn't just look better, though. Let's say you need to change the color of that warning text; it's just a tiny shade too bright. Instead of #FF3838, you decide it should be #DE2020. It's a minor change, but after careful comparison, it proves to work better for your site's design.

Now, let's say the present design's source code didn't use CSS classes to implement that block. Instead, the color code #FF3838 appears a whopping 700+ times in your site's code. Someone is about to spend two full days in search and replace hell.

If the site had used CSS to implement that warning style, they'd make the change in one place, in one file, and be done with modifying the design element throughout the whole site in about 10 seconds time.

Just how much do web designers make per hour again? ;-)

Faster Website Design Expansion

Similarly, perhaps you need to tone down some of those warnings. Maybe they aren't red flags, maybe they're just helpful hints. You decide that a number of the paragraphs previously denoted as "warnings" are now "advice" paragraphs.

Although this now involves going through and hand-editing each paragraph in the entire website's design to use the new style, it still saves you a bit of time, while keeping the code elegant, through the use of CSS.

On a different note, let's say you're adding a new feature block with a slightly complex style definition. It's a drop-and-go situation, but the design isn't finalized. Once again, using CSS to make this site-wide design change will go quicker with the definition of a new CSS class.

Easier Cross-Compatibility Through CSS

And finally, there's the question of cross-compatibility. It's hard to believe, but even today, the major players in the web browser industry haven't come together with a pact to unify how sites are rendered, or which style definitions will do what.

Neither of the two dominant browsers are innocent in this case, but at least today, things are much better than they were before the era of CSS web design solutions.

The answer tends to be a CSS class definition that can be a whopping four or five lines of full-width text, just to define the style for a single element. Believe us when we say, we're glad we don't have to copy and paste all five lines of that every time we implement such a style into a design.