rules for naming ID selectors as I gave you for class selectors, including the matter of
case sen sitivity.
Maria: Excuse me, but I can’t see any difference between a class and an ID selector.
Professor: There’s actually only a tiny difference, which is conceptual rather than
functional. You know, the class HTML attribute is used to characterize a group of
elements that share some common qualities. On the other han d, th e id attribute is
used to identify a n e le ment within an HTML document uniquely. Co nsequently, you
cannot have more than one element w ith the same ID in a document. You will use
classes on more general elements like sidenotes or captions. ID s, on the other hand,
are more appropriate for things like a page header, footer, or main menu, wh ic h are
supposed to be u nique o n a page. If it’s too much for you, you can just as well forget
IDs for now and only use classes. Anyhow, later in our course we w ill return to IDs.
Maria: It makes sense.
4.4 Grouping Selectors
Professor: Good. We can continue, then. Using classes is a practical way to style
more ele ments at the same time. Yet, there are examples where this approac h would
be somehow awkward. Consider, for example, that you want all six heading elements
to appear in italics and in blue. Constructing a class for that purpose would mean that
you would have to apply a class attribute to every heading element on your w ebsite.
Instead, yo u can simply group more selectors in a CSS rule by separating them with a
comma:
h1, h2, h3, h4, h5, h6 {
font-style: italic;
color: blue;
}
Mike: That’s nice. What if I wanted some of them a little different? For example, if
I wanted <h1> and <h2> to be italic and blue and also underlined, and the other four
just italic and blue? I guess in that case I would still have to write a separate rule for
the <h1> and <h2> headings.
Professor: That’s right. But only for the part that’s different. In addition to the above
rule you would just have to write this short rule:
h1, h2 {
text-decoration: underline;
}
And you can even override some properties already declared in a group. For example,
you can change the color of the <h6> element from blue to gray:
4.4. Gro uping Selectors 57
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.