Section 3.3. ID Selectors: Specific Page Elements


3.3. 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 in Section 3.1, 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 stylinglike a borderto each of them.

  • Use IDs to identify sections that occur only once per page. CSS-based layouts often rely on ID selectors to identify the unique parts of a Web page, like a sidebar or footer. Part 3 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 colorsthe ID's background color wins. (See Section 5.4.3 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 Section 1.2.4) and your Web designer friends may stop talking to you.

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 (Section 3.1). This example provides background color and sizing:

 #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 magiclike 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. First, create an ID for each letter of the alphabet (# R ). When you 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="section1">Section 1</a>in HTML.)




CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net