ID Selectors: Specific Page Elements

CSS reserves the ID selector for identifying a unique part of a page, like a banner, navigation bar, or the main content area. Just like a class selector, you create an ID by giving it a name in CSS, and then you apply it by adding the ID to your page's HTML code. So what's the difference? As explained in the box on Styling Groups of Tags, ID selectors have some specific uses in JavaScript-based or very lengthy web pages. Otherwise, compelling reasons to use IDs over classes are few.

When deciding whether to use a class or an ID, follow these rules of thumb:

• To use a style several times on a page, you must use classes. For example, when you have more than one photo on your page, use a class selector to apply styling—like a border—to each <img> tag you wish to style.

• Use IDs to identify sections that occur only once per page. CSS-based layouts often use ID selectors to identify the unique parts of a web page, like a sidebar or footer. Part III shows you how to use this technique.

• Consider using an ID selector to sidestep style conflicts, since web browsers give ID selectors priority over class selectors. For example, when a browser encounters two styles that apply to the same tag but specify different background colors, the ID's background color wins. (See Inherited Styles Accumulate for more on this topic.)

Note

Although you should apply only a single ID to a single HTML tag, a browser won't blow up or set off alarm bells if you apply the same ID to two or more tags on the same page. In fact, most browsers will apply the CSS from an ID style correctly in this case. However, your HTML won't validate (see The Importance of the Doctype), and your web designer friends may stop talking to you.

GEM IN THE ROUGH: Divs and Spans

Chapter 1 introduced you to <div> and <span>, two generic HTML tags that you can bend to your CSS wishes. When there's no HTML tag that exactly delineates where you want to put a class or ID style you've created, use a <div> or <span> to fill in the gaps.

The div tag identifies a logical division of the page, like a banner, navigation bar, sidebar, or footer. You can also use it to surround any element that takes up a chunk of the page, including headings, bulleted lists, or paragraphs. (Programmer types call these block-level elements because they form a complete "block" of content, with line breaks before and after them.) The <div> tag works just like a paragraph tag: Type the opening <div>, add some text, a photo, or some other content inside it, and then end it with the closing </div>.

The div tag has the unique ability to contain several block-level elements, making it a great way to group tags that are logically related such as the logo and navigation bar in a page's banner or a series of news stories that compose a sidebar. Once grouped in this way, you can apply specific formatting to just the tags inside the particular div or move the entire div-tagged chunk of content into a particular area, such as the right side of the browser window (CSS can help you control the visual layout of your pages in this manner, as described in Part III of this book).

For example, say you added a photo to a web page; the photo also has a caption that accompanies it. You could wrap a <div> tag (with a class applied to it) around the photo and the caption to group both elements together:

<div class="photo">
<img src="holidays.jpg"
 alt="Penguins getting frisky"/>
<p>Mom, dad and me on our yearly trip
 to Antarctica.</p>
</div>

Depending on what you put in the declaration block, the .photo class can add a decorative border, background color, and so on to both photo and caption. Part III of this book shows you even more powerful ways to use <div> tags—including nested divs.

A <span> tag, on the other hand, lets you apply a class or ID style to just part of a tag. You can place <span> tags around individual words and phrases (often called inline elements) within paragraphs to format them independently. Here, a class called .companyName styles the inline elements "CosmoFarmer.com," "Disney," and "ESPN":

<p>Welcome to <span class="companyName">
CosmoFarmer.com</span>, the parent
company of such well-known corporations
as <span class="companyName"> Disney
</span> and <span class="companyName">
ESPN </span>...well, not really.</p>

Should you decide to use an ID selector, creating one is easy. Just as a period indicates the name of a class selector, a pound or hash symbol identifies an ID style. Otherwise, follow the exact same naming rules used for classes (Class Selectors: Pinpoint Control). This example provides a background color and a width and height for the element:

#banner {
  background: #CC0000;
  height: 300px;
  width: 720px;
}

Applying IDs in HTML is similar to applying classes but uses a different attribute named, logically enough, id. For example, to indicate that the last paragraph of a page is that page's one and only copyright notice, you can create an ID style named #copyright and add it to that paragraph's tag:

<p id="copyright">

Note

As with class styles, you use the # symbol only when naming the style in the style sheet. You leave the # off when using the ID's name as part of an HTML tag: <div id="banner">.

POWER USERS' CLINIC: Proper IDs

ID selectors have a few powers that class selectors lack. These benefits actually have nothing to do with CSS, so you may never need an ID. But if you're curious:

• JavaScript programming utilizes ID selectors to locate and manipulate parts of a page. For example, programmers often apply an ID to a form element like a text box for collecting a visitor's name. The ID lets JavaScript access that form element and work its magic—like making sure the field isn't empty when the visitor clicks Submit.

• IDs also let you link to a specific part of a page, making long web pages quicker to navigate. If you have an alphabetic glossary of terms, then you can use an ID selector to create links to the letters of the alphabet. When your visitors click "R," they jump immediately to all the "R" words on the page. You don't actually need to create any CSS for this—it works purely with HTML. First, add an ID attribute to the spot on the page you wish to link to. For example, in a glossary you can add an h2 tag with a letter from the alphabet followed by the glossary listings—perhaps in a definition list or a series of paragraphs. Just add an appropriate ID to each of those h2 tags: <h2 id="R">R</h2>. To create the link in HTML, add the pound symbol and the ID name to the end of the URL, followed by the ID name—index.html#R. This link points directly to an element with the ID of #R on the page index.html. (When used this way, the ID behaves just like a named anchor—<a name="R">R</a>—in HTML.)