Combining IDs with Multiple Classes

Classes are especially useful when you wish to have control over a number of elements. Consider
the following drinks list, the source code for which is available in the drinks.html file:
<ul id="drinks">
<li class="alcohol">Beer</li>
<li class="alcohol">Spirits</li>
<li class="mixer">Cola</li>
<li class="mixer">Lemonade</li>
<li class="hot">Tea</li>
<li class="hot">Coffee</li>
</ul>
Note first that the unordered list (<ul>) is given a unique ID. Thus, id="drinks" will not be
used again on the page at any time, allowing that particular list to be styled uniquely. Note also
that Beer and Spirits are within list elements defined with class="alcohol", Cola and Lemonade
are within list elements defined with class="mixer", and finally Tea and Coffee are defined in
list elements with class="hot". This allows each drinks group to be treated individually.
The CSS declares that the default text for that list will be red, so any list items without a
class attribute will default to red text:
/* Drinks list styling */
ul#drinks {
color:#F00;
}
Next, the classes for each drink type are defined with unique shades of gray for font color:
/* Define alcohol color */
.alcohol {
color:#333;
}
/* Define mixer color */
.mixer {
color:#999;
}
/* Define hot drinks color */
.hot {
color:#CCC;
}
The result sees the list of items move through shades of gray (defined by the classes).
Any further drinks added to the list can be assigned to a particular drinks group, such as
<li class="alcohol">Wine</li>. Thus a logical color key is established using simple CSS classes.


**■Tip Before adding a class to an element, be sure that the element needs it. Too often web designers
overuse classes when the (X)HTML is already providing more than enough hooks for the CSS. Make sure that
the element cannot be targeted using a descendant selector or other method before opting for a class. This
will help keep your code lean and make future redesigning much easier.

Combining IDs with Selectors

Existing or new IDs can be combined with selectors in the style sheet to add further control. In
the following example, the base CSS defines all h2 headings as dark gray and 16 pixels in size:
/* Basic heading style */
h2 {
color:#333;
font-size:16px;
}

That is fine for most uses of <h2>, but let’s say the main <h2> on your page (the title of
an article) needs to be emphasized with a different color. This calls for a new rule where the
selector is defined in the form element#name:
/* Adjust the color of h2 when used as a title */
h2#title {
color:#F00;
}
Here the new rule will override the default <h2> color (color: #333;) with red (color: #F00;)
whenever an <h2> is identified with id="title" in the (X)HTML. The new rule does not redefine
font-size, so that will be carried over and unchanged. Simply add the unique identifier to
the page:
<h2 id="title">Title Of My Article</h2>
Remember that title is a unique identifier, so it cannot be used again within that template.
Any other instances of <h2> on the page will be rendered with the default styling.

IDs in Css

An ID can only be used once per page, and is a unique identifier to an element. Typically, an
ID is used for any unique page element such as the header, main navigation, footer, or other
key part of the user interface.

Applying an ID
The most common way to apply an ID is to reference it in the (X)HTML using the id="name"
attribute immediately after the opening tag within an element. In this case, our two IDs are
named highlight and default, respectively, and are applied to two paragraphs:
<p id="highlight">This paragraph has red text.</p>
<p id="default">This paragraph has dark gray text.</p>
The corresponding CSS uses the hash (#) character to denote the rule is a unique ID. The
hash is combined with the ID name to start the rule, followed by the property declarations:
/* Define highlighted text */
#highlight {
color:#F00;
}
/* Define default text */
#default {
color:#333;
}