CSS classes and ids

Both classes and ids allow you to group a bunch of style rules into a collection, and then apply those rules to some part of a page.
With a class you can re-use the same collection of style rules, and thereby attain a high degree of consistency.
An id works just like a class, but is meant to be used only once, to uniquely identify some piece of the page (perhaps to be used as an anchor for a link to jump to, or so that some javascript can change it.)

Readings

Castro covers some of this material in a rather different way in

Chapter 9.

Consistency--who needs it?

For these two snapshots, certainly one is more 'scannable':

Is there ever a good reason not to be 'scannable'?

For the Ask.com page....

How are relationships indicated among similar "types" of information (e.g. URLs of the sites found)?
What Web-wide conventions does this page follow?

Using type formatting consistently: CSS classes

Creating a class

A CSS class is a re-usable collection of style rules that can help you:

achieve color and typographic consistency, other kinds of consistency too,
allows you to "change your mind" about your visual design choices at any stage of your web page design.
The name can remind you what the function of the class was.

Here's how you could define a collection of rules to make text have that green appearance that Ask, Google and others to display the address of a search result. Put this definition in your stylesheet, or wherever you define your style rules:

.siteURL {
   color: #green;
   font-weight: bold;
   font-size: x-small;
}
.highlightbox {
   background-color: #fde;
   border: 1px solid #666
}

Note that:

Every class selector starts with "." a period.
The label "siteURL" is completely up to you. You could just as easily name this collection myURLstyle or GoogleishURLstyle

Applying a class

To apply a class to some text, we might use the <span> tag like this...

<p>J. K. Rowling's site is at
<span class="siteURL">www.jkrowling.com</span>. There is...

But the class attribute can also be put in lots of other tags.

<ul class="highlightbox"><li>Don't use a class when....</ul>

Don't use a class when you want, for example, all of the <h2> headlines to look consistent. You should just set a style for the h2 tag instead.
The semantic web: Give your classes names related to their function (e.g. 'URLtext'), not their appearance (e.g. 'greenText'). You may change your mind later about appearances, but function will typically not change.

Multiple classes

You can apply more than one class at a time. For example:

<div class="gradedBackground photoBox">

This allows you to have some classes that are used for positioning and other classes that are used for text formatting, and then mix and match.

Classes (or IDs) in DreamWeaver

Go to Window | CSS Styles to display the window that lets you edit/create classes in DreamWeaver.

You can right-click in the CSS Styles window to create a new style:

After you create the class/ID it will be available from the Properties window to be applied to text.

id, a unique 'class'

The main difference between ids and classes is that ids are meant to be used just once on a page. We might use them for...

a specific location within a document to link to,
to identify an image to be changed when the mouse rolls over it,
positioning a particular layer on the screen.

The following shows how an id is defined and applied:

Defining an id

#mycontentbox {
   margin-left: 100px;
   margin-right: 100px;
   background-color: #fff;
}

Applying an id

<div id="mycontentbox">
.
.
.
</div>