Goals

Examine the most commonly used CSS properties. Later, we'll see how they are applied to selected elements.

Notes

Here are samples of CSS rules:

h1 {
    color: red;
    font-weight: bold;
}

.upset {
    color: #FF0000;
    font-weight: bold;
}    

The stuff before the braces is a selector. It says what to apply the rule to. The first one says to change all h1 elements. The second one says to change everything with a class of upset.

The stuff inside the braces are the properties that are to be changed. These are the things we care about on this page. Each one has the form name: value;. Let's look at some of the most common types of properties.

First, open this page, and copy the code into Aptana, so you can mess with it. Aptana already knows the valid CSS property names, so it can help you avoid spelling errors.

Fonts

The paragraph test1 has a lot of font properties. Change the color, size, family, alignment, and whatever else you want.

The Box Model

The paragraph test2 will help you grok the box model. Have a look at this tutorial on the box model (you can ignore the stuff on browser incompatibilities). Mess about with padding, borders, margins, and such.

Layout

The paragraph test3 and test4 let you mess with layout, the positioning of boxes on the page. Layout is how menus get to the left, footers the the bottom, and so on.

Test3 uses the float property to move an element to the right edge of the page. Test4 uses absolute positioning. It lets you set the position of an element anywhere on the page you want, down to the pixel level.

Layout is fairly complicated. There are many tutorials on the Web, like this one.

Often, I find it easier to use templates other people have created. For example, suppose I wanted a page with a header on the top, a left nav bar, content, and then a footer, like this:

I might use a template from Dynamic Drive, and modify it to suit my needs.

One problem with this approach is that it can sometimes be difficult to understand the template's designer's work. That makes it harder to change. So:

1. Keep it simple. Just a few blocks on the page.
2. Plan carefully. Layout your page on paper first. Identify the different parts of the page.
3. Look at several template collections, before deciding on the CSS template you want.

Remember:

• Simple is good.
• Easy is good.
• Free is good.

 

Exercises

Exercise 1.

Why include multiple names in the font-family property?

Exercise 2.

The color code #660000 is a dark red/browny color. Why?

Exercise 3.

Find a Firefox extension that will easily let you pick colors from a Web page.

Exercise 4.

Pick a layout from the collection at Dynamic Drive. Change your dog and cat site to use it.