Posts Filed Under ‘Definition of CSS’
How to Write a CSS Rule
So if you’ve read “What is this CSS thing, anyway?” (which I’d recommend doing), you have a basic understanding as to what CSS is on a theoretical level. And I’m sure you’re a better person for it. But what about the practical details? How do you actually put together a CSS rule that will style your HTML? Read on, dear friend. Read on.
The styntax of CSS is extremely simple to understand.
The syntax of CSS is extremely simple to understand. A CSS file is essentially a list of rules. And each of those rules is comprised of two basic parts: a selector and one or more declarations. Each declaration also consists of two parts: a property and a value. In the end, every rule ends up looking like this:
selector {
property: value;
property: value;
…
property: value;
}
Easy, right? You lead off with your selector, open up a curly brace to contain all your declarations, give a property, followed by a colon, followed by one or more values that you want attributed to that property, and then end the declaration with a semicolon to signal you’re done. Then you close the whole thing with a closing curly brace and move on to your next selector. You don’t even have to format your text the way I have above: the spaces are purely to make it easier for we humans to read. Your HTML page would do just fine if all your rules were on the same line. I wish my grocery list were this straightforward.
That’s all there is to know about the syntax of CSS. The rest is largely learning how selectors work, figuring out which properties to use, and learning which values create which results. I’ll offer a few pointers below.
Selectors: These can be page elements (like ‘strong’ for the <strong> tag), IDs, classes, and even pseudo-elements or any combination of these (watch for an article explaining how to use IDs and classes in the near future). This means that selectors can get a little complex at times:
div.message p#alert strong a:hover {
color: red;
}
But all this rule is saying is that if there is a div with a class of “message,” containing a paragraph with an ID of “alert,” containing a strong tag, containing an anchor tag that is being hovered over (the cursor is over the link), then that link should be red. Once you understand the basic principles behind reading a CSS selector, rules like this become very easy to create.
Declarations: Unlike the infinite variety possible in selectors, there are a finite number of properties and values, which are determined by the World Wide Web Consortium (W3C) as part of the CSS Specification. In “Understanding the CSS Box Model,” we covered the properties of border, background, padding, width, and margin. To see a full list of CSS properties, values, and how they interact, check out this excellent list of printable PDF cheat sheets.
What is this CSS thing, anyway?
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.
![[your ad here] Become a Sponsor! Click here to learn more.](/img/your-ad-here.gif "Click here for more information.")