|
June 17, 1998
 |
 |
Putting Style Sheets in Perspective
Selectors
|
There are four different kinds of selectors that you can
use to add style to your web pages.
- Type Selectors
- Descendant Selectors
- Attribute Selectors
- External Selectors
- Pseudo-Classes
- Pseudo-Elements
Type Selectors are the simplist to use in that they are taken
from the name of the HTML elements with which you are already
familiar.
Sometimes it happens that you've given two elements the same
value and then find that you have to include one within the
other. You can change this one instance by creating a
Descendant Selector which is a combination of the two. In
effect, what you are saying is "give all instances of EM
that are included in H3 the background value of yellow".
H3 { color: blue }
EM { color: blue }
H3 EM { background: yellow}
|
Important Statement
|
<H3><EM>Important</EM> Statement</H3>
|
Attribute Selectors
There are two types of Attribute Selector,
CLASS and
ID.
CLASS
Selectors are preceded by a dot (.); ID Selectors are preceded
by a hash mark (#). The flag characters, (the dot and
hash mark) signal the type of selector to follow.
<STYLE TYPE="text/css">
.forest { color: green }
.danger { color: red }
#control { color: blue }
</STYLE>
|
green things
fire hazards
more green things
more fire hazards
- things that burn
- things that don't burn
water
|
<P class="forest">green things
<P class="danger">fire hazards
</P>
<EM class="forest">more green things</EM>
<BR>
<EM class="danger">more fire hazards</EM>
<UL>
<LI class="danger">things that burn
<LI class="forest">things that don't burn
</UL>
<P id="control"> water </P>
|
Naming Classes
|
You might decide that your web pages should have some sort of
emphasised introductory paragraph, say an abstract. You think
at first that they should use italic font, so you call the new
class 'italic'. Later you discover that italic font is hard to
read on some platforms so you settle on giving abstracts a
normal font on a background color of light yellow. Thanks to
style sheets, you only have one place to change, and all
occurrences of 'italic' class will now render as you intend -
but the all web pages still say 'class=italic' - very confusing!
Much better is to name the class 'abstract', reflecting the
purpose rather than the implementation.
|
<STYLE TYPE="text/css">
.forest { color: green }
.danger { color: red }
</STYLE>
|
test forest
test danger
no style
test forest
italic
|
<P class="forest">test forest
<P class="danger">test danger
<P> no style
<P class="forest">test forest
<BR>
<EM class="danger">italic</EM>
|
The CLASS Selector begins with the flag character, followed
by the 'class name' of your choice. It is better to choose
class names according to their purpose rather than a name
that describes their color or style. For example, if you
were to 'mark' every instance of danger signals in
an article about forest fires with a class selector of .red,
but later decided to change the style to bolded text you
would have to remember that danger signals were red. It
would be better to name the selector danger to make it easier
to remember at some date in the distant future.
The value of the ID attribute may not be repeated anywhere
within the document. If you have an ID value of
"#control { color: blue }" you may not use it to define two
different elements.
<P id="control"> water </P>
<EM id="control"> chemicals </EM>
The above would not be allowed. A different ID would need to be
assigned for each element.
#control { color: blue }
#control2 { color: blue }
|
water
chemicals
|
<P id="control"> water</P>
<EM id="control2">chemicals</EM>
|
External Selectors:
Pseudo-Classes and Pseudo-Elements
Pseudo-classes and Pseudo-elements allow for formatting
effects that don't correspond to regular HTML tags or
attributes, e.g. the first line or letter of a paragraph, or
visited links.
Pseudo-classes
The
A
(anchor) element is the only one that currently
uses pseudo-classes. You're probably familiar with this
concept from specifying link colors within the
BODY element.
<BODY link = "blue"
vlink = "purple"
alink = "red"
>
|
<STYLE TYPE="text/css">
A:link { color: blue }
A:visited { color: purple }
A:hover { color: green }
A:active { color: red }
</STYLE>
|
Pseudo-elements
Currently there are only two pseudo-elements, neither
of which are widely supported.
P:first-line { font-style: italic }
P:first-letter { font-size: 24pt }
|
|---|
first-line properties:
|
first-letter properties:
|
|
|
|
Additional Resources:
CSS Rules
Putting Style Sheets in Perspective: Table of Contents
Methods of Combining The Style Sheet With HTML
|
