In this situation, it??™s sensible
to define a default rule for each element using an element selector, and then create an
WORKING WITH TYPE
87
3
override for the portion of the page that requires different text by using a contextual
selector.
For example, imagine a typical web page that has a sidebar that??™s marked up as a div with
an id value of sidebar. You might use a different paragraph font in the sidebar, to differentiate
the text, like so:
p {
font: 1.2em/1.5 Verdana, Arial, sans-serif;
margin-bottom: 1em;
}
#sidebar p {
font: 1.2em/1.5 Arial, sans-serif;
}
The other occasion where alternatives are required is when creating one-off styles to override
an existing style. In such cases, you can define a class in the CSS and then use a class
attribute to apply it to an element. Should you only want a portion of some text to take on
the style, you can surround the selection with a span element and apply the class to that
instead.
For example, if you wanted to create some ???warning??? text, you could use the following
CSS:
.warningText {
color: #ff0000;
font-size: 120%;
}
This can then be applied as follows:
This paragraph takes on the styles defined in
?? the warningText class
Only this portion of this
?? paragraph takes on the warningText class styles.
Avoid overusing span elements, though. Text works best when it??™s consistent across the
page.
Pages:
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163