Cascading Style Sheets (CSS) control what your website looks like. Think of the colors and layout of your pages as your site's electrical system and your site's CSS page is kind of the fuse box that controls it all.  If you make one change to one line of CSS, it can change every single page of your site.

Even more than with HTML, a lot of CSS coding is based on plain old English, so it's relatively simple to learn and use.

First Rule of CSS

A style sheet is a fancy way of saying rules.  That's all a stylesheet is: a list of rules for how a website looks.

You use CSS shorthand to designate what you want a particular area of your site to look like, spelling out such things as font color, border, background image, etc.  The part of your pages you want to control is called the selector.  A selector can be pretty much anything: a table, a paragraph, even the whole body of the page.  You can make the rules for all tables or just for certain ones. After identifying which selector you want to adjust, you can choose which properties (such as background, border, etc.) in that area you want to define, then assign a value to the property (such as a color value of red, or a width of 3 pixels.)

There are rules about how CSS is written. CSS can be typed in one long line of coding and it will still work, but it's a lot simpler to read (and troubleshoot!) if you write in the following format:

The above puts it into the simplest form, though it's the basis for all the CSS currently in use.  The selector comes first; then an opening bracket; then what property will be affected (such as color or size), followed by a colon: then specify which color, size, etc.; then a semicolon; then a closing bracket.  If more than one detail will be covered for a given area - such as color and size - just add another line beneath the first "property: value", following the same format.

To put that into a real life example, you could decide you want all tables on your website to be surrounded by a 3 pixel wide red border, with 5 pixels of padding inside so the text doesn't touch the border.  You'd write it like this:

Even without knowing the first thing about code, it makes perfect sense.  The above example tells you the overall rule applies to tables; it says outright you want a solid 3-pixel red border.  It says to insert 5 pixels of padding. The only set of rules that don't come naturally are the punctuation rules in the CSS sentence.  Your selector comes first, outside the brackets; then the opening brackets; then the property, followed by a colon (two dots, in case you're not sure!) then the color or other value; then a semicolon (the one with a dot and a comma); then either another line of information or the closing bracket.

That's the basis of all CSS, believe it or not.

CSS Basics, Part Deaux

Suppose you want only some of your tables to have the red border?  How do you tell your website where it's okay to use the rule and when to ignore it?

That's where the class option comes into play. Your html would be written <table class="abc"> for all tables where you want red borders.  You don't actually have to use "abc"; you can name the class "rumplestilskin" or "tumbleweeds".  It's only important that you add the class into your HTML coding for every table where you want the rule to apply.

At that point, a website gets into a conversation with a stylesheet.  After all, you don't want all your tables to have a red border - just the ones in the abc class.

So how does the stylesheet narrow things down?

For all class rules, just type out your selector and add a dot, then abc, like this:

Then for all tables where you want the rule to apply, write it as <table class="abc">. Voila! Red borders. just where you want them and nowhere else.

Coming soon: how to save and link your CSS stylesheet to a page.