Boot Camp

Web Authoring Boot Camp
nized by other designers and the W3C as being a once-used item, and will be edited that
way. Remember, other designers may need to see/adapt your style sheets.
Class/ID Coverage
Full Coverage: If you want a property to work throughout a site, you can set it as a Class
or ID. For instance, .red {color:red;} turns all text red that you classify as red – whether
paragraph, header, lists, etc.
Specific Coverage: If you want to affect only a specific selector, such as all text in a specific
table cell, you would list the selector, then the class or id: td.red {color:red;} This
means that every time you create a new table data cell , the texxt inside will be red.
Here is a more complex example, where an ID has been created called catlinks in order
to style a specific type of link on a web page. The catlinks ID can use both selectors and
pseudo classes.
#catLinks h5 {text-align: left; font-weight: bold;}
#catLinks li a:link {color:#666; text-decoration: none; font-weight: bold;}
#catLinks li a:hover {color:#202020; text-decoration: none; font-weight: bold;
}
#catLinks li a:visited {color:#333; text-decoration: none; font-weight: bold;}
#catLinks li a:focus, a:active {color:#666; text-decoration: none; font-weight:
bold;}
Combination Coverage: You can combine multiple classes inside one element:
.gray {color:#666;}
.intense {font-weight:bold;}
Gray bold text here
Pseudo Classes
A pseudo-class is similar to a class in CSS, but it’s not specified explicitly in the markup,
like body, paragraph, and table elements are. Some pseudo-classes are also dynamic, and
are applied as a result of user interaction with the document (like a form).
A pseudo-class starts with a colon (:). No whitespace may appear between a type selector
or universal selector and the colon, nor can whitespace appear after the colon.
208