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.
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.
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
3. in basic.css , use the .intro class selector to create the following style rule:
.intro {
text-transform: uppercase;
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;
save the style sheet, and reload basic.html into a browser. This time, only the
paragraph is in uppercase (see Figure 2-8 ).
Search WWH ::

Custom Search