Ian Swenson .com

CSS Syntax

Oh no! Not the dreaded CSS! Have no fear, ladies and gents. I’m here to take the mystery out of Cascading Style Sheets.

CSS is a simple way to style web sites. Believe me, if you had any experience with the old-school table and frame layouts of the late ’90s, you will be happy as a cat after an 18-hour nap once you get a taste of CSS.

A quick sampling:

1
2
3

span {
     color: red;
     }

With this, every span we used would make the <span>text turn red</span>. Let me dissect the example more.

Before the opening bracket comes the element you want modified, the selector. This can be any html element, or more commonly an id or class (we’ll get to those soon). In this case we are modifying every occurance of a span element.

We then use opening and closing brackets ({ })to contain the properties. Within those brackets we can have as many properties as we want. We could change the color, the font, the font size, and more; all within the brackets.

In our example, the only property I used was the color property followed by a colon. The color property only changes text colors, there are other properties for other colorable selectors. The value we set for the color here was red followed by a semicolon. Every property and value are separated by a colon and ended by a semicolon.

Now, you can use the text description of a color here, but most likely red, blue and the like aren’t going to cut it for you. CSS also understands RGB hexidecimal. This would be #000000 (black) through #FFFFFF (white). Try visiting this color chart if you know nothing of which I speak here. You can also use abbreviated colors, one digit for R, G, and B and it’ll duplicate it for the other. So if you want a lime green — like #00FF00 — you could use #0F0 and it’ll fill in the rest.

One last little note here. Spacing is not terribly important in CSS, so the following three examples all mean the same thing:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* Example One */
 
span {
     color: #C00;
     font-size: 12pt;
     }
 
/* Example Two */
 
span { color: #C00; font-size: 12pt; }
 
/* Example Three */
 
span{color:#C00;font-size:12pt;}

Space your CSS the way you like to, just as I said about HTML above. If you take a glance at my style sheet, you’ll see I prefer the third method. But that’s only after many years of fiddling with it. Your mileage may vary.

The Box Model

The box model is one of the tougher parts of web design to initially wrap your brain around. I’ll try to go gentle on you. This is the box model:

Any HTML box item (say a div or a paragraph) has its own margin, border, and padding. The margin is the distance between this box and the next or previous element. The border is self-explanatory (if it’s not, how did you make it this far in the tutorial?). The padding is the distance between the border and the content.

You can specify any or all of these properties for the top, right, bottom, and/or left of your box. Here’s an odd example to help illustrate this:

1
2
3
4
5
6
7

div {
     margin-top: 10px;
     border-left-color: #000;
     border-left-width: 2px;
     border-left-style: solid;
     padding-left: 10px;
     }

Now, this is a strange example, but it shows you how you can make sure that this div is 10 pixels under the previous element, it has a two pixel-wide black left-hand border, and the content (usually text) is 10 pixels away from that border.

Another couple notes. First, in CSS you need to denote the unit of measurement whenever it can be in question. Pixels (px), Em-dash widths (em), and Points (pt) are the most common. Thus if you want 10 pixel margin, don’t just say margin-top: 10; make sure you specify pixels with margin-top: 10px; The one exception is for zero — that doesn’t need units.

Second, there are many shortcuts in CSS. Margin, border, and padding all have big, time-saving shortcuts. Instead of saying:

1
2
3
4
5
6

div {
     margin-top: 1em;
     margin-right: 1em;
     margin-bottom: 1em;
     margin-left: 1em;
     }

Use:

1
2
3

div {
     margin: 1em;
     }

With any of the aforementioned properties, if one value is provided, it will use it for all four directions. If two values are provided (margin: 1em 2em;), it will use the first one for top and bottom, the second for left and right. If three are provided (margin: 1em 0 2em;), it will use the first for top, second for left and right, third for bottom. And if four are provided it will use them in the order of: top, right, bottom, and left (use the word TReBLe as a mnemonic device).

For the border property you can simply provide the width, style and color in one declaration:

1
2
3

div {
     border: 2px solid #000;
     }