HTML and CSS Reference
In-Depth Information
■
There is no space between the type selector and the period. if you add a space, it becomes a descendant
selector:
p .intro
selects elements with the
intro
class that are nested inside paragraphs.
Note
Classes can be applied to multiple elements, so using
p.intro
targets only paragraphs that have the
intro
class. Any other elements with the same class are ignored, as the following exercise demonstrates.
exerCiSe: targeting ClaSS SeleCtOrS
This exercise shows how a class can be applied to different types of elements.
1.
Continue working with
basic.html
and
basic.css
from the previous exercises.
Alternatively, use
basic 03.html
and
css/basic 03.css
in the
end
folder.
2. in
basic.html
, add
class="intro"
to the opening
<li>
tag of the first item in the
unordered list like this:
<li class="intro"><a href="#">Introducing CSS the Language of Web
Design</a></li>
3. in
basic.css
, use the
.intro
class selector to create the following style rule:
.intro {
text-transform: uppercase;
}
4.
save both files, and load
basic.html
into a browser. The style rule has turned the
text in both elements with the
intro
class into uppercase, as Figure
2-7
shows.
Figure 2-7.
The class style affects both the list item and the paragraph
5. Amend the selector to apply only to paragraphs with the
intro
class:
p
.intro {
text-transform: uppercase;
}
6.
save the style sheet, and reload
basic.html
into a browser. This time, only the
paragraph is in uppercase (see Figure
2-8
).
