CSS CLASSES

Unlike the div, the cool thing about classes is that you can reuse them.

class is proceeded by the . (period)

div is proceeded by the # (pound)

Example of how the HTML and CSS are coded:

Sooooo, your HTML will look like this (example from this page)

<p class="emphasis"> Unlike the div, the cool thing about classes is that you can reuse them</p>

Annnnnddd, your CSS will look like this (example from this page's external CSS style sheet)

.emphasis {
font-style: italic;
font-weight: bold;
}

You can mix-and-match classes

Now you can combine borders and background colors by specifying multiple classes. The class names may occur in any order and must be separated by whitespace.

source code below: http://catcode.com/csstips/classes.html

The CSS class looks like this (put in your external sheet)

.bordered { border: dotted 2px black; width: 200px; margin: 6px 3px 6px 3px; padding: 4px; }

.info { background-color: #ffccff; }

.feature { background-color: #ccffcc; }

.warning { background-color: #ffffcc; }

.coolness { background-color: #ccccff; }

The HTML looks like this:

<div class="bordered feature"> This is an energy-saving radio. </div>

<div class="bordered warning"> Do not operate this radio under water. </div>

<div class="coolness bordered"> This radio has a USB port for Internet connectivity. </div>