What is this CSS thing, anyway?

Published November 13, 2007 by CSS Newbies.

So you’ve been hanging around the web gurus long enough to know that “CSS” is something big and important in the web design world. You might even know that it has something to do with making pages pretty, or more Web 2.0, or something like that. And that’s true (to an extent). But what does CSS really mean?

CSS is an acronym that stands for Cascading Style Sheet. Not as illuminating as you hoped? Well, let’s break that definition down into its important parts:

“Style sheets have been around for longer than the web.”

CSS is a Style Sheet. This is a useful starting point, because style sheets have been around for longer than the web. Back in the golden days of the business world, a style sheet was quite literally a sheet (or more often a document) which described, in excruciating detail, how documents created by a particular company should look. Style sheets dictated the typefaces used in press releases, the specific colors used in the masthead, the placement of the logo, and every other element you could imagine (and many you can’t imagine). It was a way of maintaining consistency across a wide range of documents created by any number of writers. Though the production of the individual documents was disparate, they created a consistent, cohesive whole.

Style Sheets in the web sense of the word serve the same purpose. CSS exists in a document (or series of documents) for the purpose of creating consistency across any number of web pages. Using CSS, you can say something like, “I want all of my paragraphs to be indented half an inch. And be set in 14 point double-spaced Comic Sans. With a lime-green background.” I’d rather you didn’t do those things, but the point is that the potential is there. You set up those rules in your CSS, and viola! All of your paragraphs can instantly look the same across your entire web site, no matter how many pages might exist. This is a powerful tool.

CSS Cascades. This is a trickier concept to master, because there isn’t an equivalent from the days of Business Yore. Not that any self-respecting CEO wouldn’t have given his mother’s right arm for such a feature… but sadly, it’s something that computers are naturally very good at and humans… well, not so much.

So what does cascading mean, exactly? Let’s say you’ve set a very simple rule that says all paragraphs should be double-spaced. Simple enough. But now you take that paragraph, and you put it inside of a table cell, which is inside of a table, which is on a completely different page. Guess you have to write a new rule, huh? Nope! The Cascade part of CSS means that your general rules (paragraphs should do such-and-such) cascade through every document you’ve linked to the style sheet, changing every possible tag it can.

But what happens if you didn’t want your paragraphs inside of tables to look the same as all the other paragraphs? No problem. Just make a slightly more specific rule regarding that particular usage and suddenly all paragraphs within all tables are behaving differently. That is powerful functionality.

So to summarize, CSS is a powerful tool with some powerful functionality. It allows you to create a single style sheet, and from that document implement seamless brand consistency across any number of documents. And that functionality has hidden benefits, too. Let’s say you’ve got a web site running CSS, and suddenly it hits you: Comic Sans was not the best typeface choice for your legal documents. All you have to do is make one change in one document, and that potentially devastating problem just evaporates.

Which brings us to our third important component: CSS is something that helps you sleep better at night.

5 Responses

  1. Pingback: New to CSS? New to CSSnewbie? Start Here! - CSSnewbie

  2. Pingback: The Year In Review: 2008

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>