|
In this section we'll discuss each of the possible selector types listed
in the previous section. This is the part of a style
that comes before the curly braces, and doesn't happen at all in in-line
styles.
HTML Element Names
Just about any HTML tag can appear as an element name. The exceptions
are <head> and the tags that can only appear in the head section,
<frameset>, <frame>, and possibly a few others.
An HTML element whose name appears in the selector of a style will be
rendered according to that style everywhere in the document. You don't
have to do anything more to the HTML tag to make this work.
Classes
Classes allow us to define a style that can be applied to any HTML element
(with the exception of those excluded from being selector element names).
A UA recognizes a name as a class when we put a dot in front of it.
Here's an example of a class used as a selector name and applied to HTML
tags:
| Code View |
<html>
<head>
<style type="text/css">
.redletter {color: red;}
</style>
</head>
<body>
<h3 class="redletter">
This is a special red-letter title</h3>
<p class="redletter">
This paragraph is special enough to have red letters, too!</p>
</body>
</html>
|
| Browser View |
This is a special red-letter title
This paragraph is special enough to have red letters,
too!
|
IDs
IDs are very much like classes, except that an ID is supposed to occur
only once in a document. An ID also has higher priority than a class,
if the two happen to be in conflict. Here's a brief example:
| Code View |
<html>
<head>
<style type="text/css">
#para1 {font-weight: bold;}
</style>
</head>
<body>
<p ID=para1>This paragraph should be in bold type because of its ID.</p>
<p>This paragraph will be in normal type.</p>
</body>
</html>
|
| Browser View |
|
This paragraph should be in bold type because of its ID.
This paragraph will be in normal type.
|
Pseudo-classes
Pseudo-classes are used to modify how links appear. There are four commonly
used pseudo-classes:
- :link is the initial appearance of links;
- :hover is what the link does when a user holds the pointer
over it;
- :active is when the link has just been clicked;
- :visited is after you've returned from a link.
These are always used with a in front of them, since
they apply only to Anchor <a ...> tags.
Note: Older browsers don't support all the pseudo-classes equally
- in particular hover was rarely supported before browser
version 6.
| Code View |
<html>
<head>
<style type="text/css">
a:link {color:#000000; text-decoration:underline;}
a:visited {color:#660066; text-decoration:underline;}
a:hover {color:#660099; text-decoration:underline;
background-color: #FFFFFF}
a:active {color:#ff0000; text-decoration:underline;}
</style>
</head>
<body>
<a href="http://www.wccnet.edu">Wcc Home Page</a>
</body>
</html>
|
| Browser View |
| WCC Home Page |
Pseudo-elements
Two pseudo-elements were introduced with CSS1 to help designers make
Web pages look more like printed books. They are:
- :first-letter of a block
- :first-line of a block
These are used with the selector for the type of element for which you
want special treatment.
Note: pseudo-elements are poorly supported in most browsers.
| Code View |
<html>
<head>
<style type="text/css">
section:first-line {color: green;}
section:first-letter {color: #999900; font-size: 200%;}
</style>
</head>
<body>
<section>Luckily at the last moment peace was made, and no battle
took place, so the Bat came to the Birds and wished to join in the
rejoicings, but they all turned against him and he had to fly away.
He then went to the Beasts, but soon had to beat a retreat, or else
they would have torn him to pieces.</section>
</body>
</html>
|
| Browser View |
| Luckily at the last moment peace was made,
and no battle took place, so the Bat came to the Birds and wished
to join in the rejoicings, but they all turned against him and he
had to fly away. He then went to the Beasts, but soon had to beat
a retreat, or else they would have torn him to pieces. |
|
Overview 
