| Like the class selector, the ID selector can be used to create unique styles that are independent of any particular HTML tag. Thus, they can be assigned to any HTML tag. Figures 2.17 and 2.18 show the general syntax of ID selector rules. Figure 2.17. The general syntax for an ID selector rule. 
Figure 2.18. The general syntax for the dependent ID selector rule. 
IDs are used in HTML for layout to help establish the structure of your page, identifying unique elements in the code. IDs are also the cornerstone of dynamic HTML (DHTML), in that they allow JavaScript functions to identify a unique object on the screen. This means that unlike a class, an ID can be used only once on a page to define a single element as an object. This object then can be manipulated using JavaScript. In this example (Figure 2.19), I've set up several IDs to structure the page into several different componentscontent, header, copy, and drop boxeach surrounded with a red border. Figure 2.19. Each of the IDs used to create a discreet object on the page has a red box around it, which gets darker the further the box is nested. 
Elements or Objects? There is often a lot of confusion over the terms element and object when discussing Web pages. Simply stated, an element is created by open and close markup tags. For example, <p>...</p> and all of the content between these two tags (even other tags) form an element. Any tags within the element are referred to as child elements, and the surrounding tags are the parent element. An object, on the other hand, is created when an element is given a unique ID that allows the browser to access that element's properties. See "Understanding an Element's Box" in Chapter 6 for more details on elements and "DOM: The Road Map to Your Web Page" in Chapter 12, for more details on objects. |
To define an ID selector: | | 1. | #content {...}
ID rules always start with a number sign (#) and then the name of the ID (Code 2.10). The name can be a word or any set of letters or numbers you choose, with the following caveats:
Use only letters and numbers. Hyphens and underscores can be used, but with caution. Some earlier browsers (notably Netscape 4) reject them. The first character cannot be a number. Don't use spaces.
Code 2.10. Although ID selectors are seemingly similar to Class selectors, you generally should not use a single ID selector more than once per page to help create the structure of your content.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Defining ID's to Identify and Object</title> <style type="text/css" media="screen"> body { font: 1.2em Georgia, 'Times New Roman', times, serif; color: #000000; background-color: #fff; margin: 8px; } #content { position: relative; top: 20px; left: 165px; width: 480px; padding: 4px; border: 3px solid #fcc; } #header { margin: 4px; border: 3px solid #f99; } div#copy { margin: 4px; border: 3px solid #f66; line-height: 1.5; } #dropBox { width: 208px; font: bold smaller Arial, Helvetica, sans-serif; padding: 4px; margin: 4px; border: 3px solid #f33; float: right; } </style> </head> <body> <div > <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>Chapter IV<br /> <span >The Rabbit Sends in a Little Bill</span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice12a.gif" height="236" width="200" alt="Alice" /> She suddenly spread out her hand, and made a snatch in the air. </div> <p>It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something...</p> </div></div> </body></html>
|
CSS rules can be defined within the style tags in the head of your document (see "Adding Styles to a Web Page" earlier in this chapter) or in an external CSS file that is then imported or linked to the HTML document (see "Adding Styles to a Web Site" earlier in this chapter).
| 2. | position:relative;
Within the curly brackets, type your style declaration(s) to be assigned to this IDformatted as property: valueusing a semicolon (;) and separating individual declarations in the list. You can also add one or more line breaks, spaces, or tabs after a declaration without interfering with the code to make it more readable.
| 3. | div#copy {...}
You can also create dependent IDs, which use the declarations of the ID only when applied to a particular HTML tag.
copy is a dependent ID and will only be used if it is applied to the div tag.
In the same document, you can create different versions of the ID (using the same name) for different tags. However, including multiple instances of the same ID in the same HTML document is not recommended, since this will interfere with the DOM.
| | | 4. | <div >...</a>
An ID will not work until it is applied to an individual HTML tag within a document. Add the id attribute to the HTML tag of your choice, with the name of the ID as its value.
Notice, though, that although the number sign (#) is used to define an ID selector, it is not included for referencing the ID in the HTML tag.
|
 Tips
Notice that although dropBox was a class in the previous section, I'm using it as an ID in this example and both seem to have about the same effect. Again, the main purpose of IDs will be for defining discrete objects on the page. While there is no rule against using the same name for both a class and ID, I would try to avoid this, since it will inevitably lead to confusion. You can mix an ID with a class and/or inline rules within an HTML tag (see "Adding Styles to an HTML Tag" and the previous section, "Defining Classes for Any Tag"). Although I showed you in this section how to set up a style rule for an ID, you don't have to set up a style rule to add an ID to a tag and use it as an object with DHTML. The difference between IDs and classes will become apparent after you've learned more about using CSS positioning and after you've used IDs to create CSS layers. IDs are used to give each element on the screen a unique name and identity. This is why an ID is used only once, for one element in a document, to make it an object that can be manipulated with JavaScript.
|
