HTML and CSS Reference
In-Depth Information
Element Selectors
The most basic of all selectors is the element selector (you may have heard them called tag
selectors ). It is simply the name of an (X)HTML element, and—not surprisingly—it selects all
of those elements in the document. Let's look again at the previous example:
h1 {
color: blue;
h2 {
color: green;
We've used h1 and h2 as selectors. These are element selectors that select h1 and h2 elements
within the (X)HTML document, respectively. Each rule indicates that the declarations in the
declaration block should be applied to the selected element. So, in the previous example, all h1
elements in the page would be blue and all h2 elements would be green. Simple enough, right?
Note Although this topic is about using CSS to style (X)HTML documents, CSS can be used for other
types of documents as well (notably XML). Therefore, it's entirely possible that you will run across element
selectors that are not valid (X)HTML elements.
Class Selectors
So far we've been assigning styles exclusively to (X)HTML elements, using element selectors.
But there are several other types of selectors, and the class and ID selectors may be next in line
as far as usefulness. Modern markup (as discussed in Chapter 1) often involves the assigning
of classes and IDs to elements. Consider the following:
<h1 class="warning">Be careful!</h1>
<p class="warning">Every 108 minutes, the button
must be pushed. Do not attempt to use the computer
for anything other than pushing the button.</p>
Here, we've specified a class of warning to both the h1 element and the p (paragraph) element.
This gives us a hook on which we can hang styles that is independent of the element type. In
CSS, class selectors are indicated by a class name preceded by a period ( . ); for example:
.warning {
color: red;
font-weight: bold;
This CSS will apply the styles noted in the declaration (a red, bold font) to all elements that
have the class name warning . In our markup, both the h1 and the p elements would become
red and bold. We can join an element selector with a class selector like this:
Search WWH ::

Custom Search