Note that in the files available for download, the formatting is changed slightly again:
the property/value pairs and closing curly bracket are both tabbed inward, enabling
rapid vertical scanning of a CSS document??™s selectors.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
12
If you want a make a class specific to a certain element, place the relevant HTML tag
before the period in the CSS rule:
p.warningText {
color: red;
}
If you used this CSS rule with the HTML elements shown previously, the paragraph??™s text
would remain red, but not the heading or span, due to the warningText class now being
exclusively tied to the paragraph selector only.
Usefully, it??™s possible to style an element by using multiple class values. This is done by
listing multiple values in the class attribute, separated by spaces:
The previous example??™s content would be styled as per the rules .warningText and
.hugeText.
ID selectors
ID selectors can be used only once on each web page. In HTML, you apply a unique identifier
to an HTML element with the id attribute:
To style this element in CSS, precede the ID name with a hash mark (#):
p#footer {
padding: 20px;
}
In this case, the footer div would have 20 pixels of padding on all sides.
Essentially, then, classes can be used multiple times on a web page, but IDs cannot.
Typically, IDs are used to define one-off page elements, such as structural divisions,
whereas classes are used to define the style for multiple items.
Pages:
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70