ptg 564 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.8 The ID Selector and the ID Attribute The ID Selector. The ID selector is another way to create a style that is independent of a specific HTML tag. By using the ID selector, you can choose the style for the element by assigning it a unique ID. The name of the ID selector is always preceded by a hash mark (also called a pound sign, #). The declaration block, consisting of properties and values, follows the ID selector and is enclosed in curly braces. <ul class="square"> <li>circle</li> <li>square</li> <li>triangle</li> </ul> <ul class="none"> <li>Thanks</li> <li>Tack</li> <li>Gracias</li> </ul> </body> </html> EXPLANATION 1 A CSS class is defined for a list with different styles. 2 This is an HTML list item using the “disc” class. The output shown in Figure 14.17. Figure 14.17 Using a CSS class to create different styles for lists. EXAMPLE 14.16 (CONTINUED) From the Library of WoweBook.Com ptg 14.8 The ID Selector and the ID Attribute 565 To apply an ID to an HTML tag, use the id attribute. The attribute will be assigned the same name given to the ID selector; so, to apply an ID selector to a <p> tag, you would stipulate <p id=name> where name is the name of the ID selector (see Example 14.17). The id Attribute. When JavaScript enters the picture, the id attribute is used to iden- tify each element as a unique object so that it can be manipulated in a JavaScript pro- gram. The id should be unique for an element and not used more than once on a page. If you need to use the style more than once for multiple elements, it would be better to use the class selector instead. The ID selector can be used with a class selector of the same name, as #big, .big { }. FORMAT #IDselector { declaration ; } EXAMPLE #menu1 { font-family: arial; font-size: big; color: blue; } EXAMPLE 14.17 <html> <head><title>ID's</title> 1 <style type="text/css"> 2 p{ font-family:arial,sans-serif,helvetica; font-style:bold; font-size:18 } 3 #block { /* The ID selector */ color: red; text-decoration:underline; } </style> </head> <body > 4 <p>When making my point, I will get quite red and underline what I say!!</p> 5 <p id="block">This text is red and underlined!!</P> 6 <p>and now I am somewhat appeased. </body> </html> EXPLANATION 1 This is the start of a style sheet; it is placed between the <head></head> tags in the document. Continues From the Library of WoweBook.Com ptg 566 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.9 Overriding or Adding a Style with the <span> Tag The <span></span> tags are used if you want to change or add styles to only a selected portion of text (see Table 14.11). By doing so, you can create an inline style that will be embedded within another element and apply only to that portion of the content. In this way you can add or override a style to an element for which a style has already been defined. Carriage returns and breaks in the text will not occur with these tags. 2 The style of the paragraph element is defined. This style will take effect anywhere in the document where the <p> tag is used. Note that point sizes may be different on different browsers. Pixels will give you more accuracy. 3 The ID selector is called block and must be preceded by a hash mark. It can be used by any HTML element to produce red, underlined text. ID selectors should only be used once on a page to serve as a unique ID for the element. 4 A paragraph containing text will be displayed according to the style defined in the style sheet on line 2. 5 By adding the ID called block, the style for this paragraph will be changed to red, underlined text. 6 The <p> tag will revert to the style defined on line 2. See Figure 14.18. Figure 14.18 Using the ID selector in style sheets. Table 14.11 Attributes of the HTML span Tag Attribute Definition class Sets a class for a specific element or elements. id Used to apply settings to specific HTML elements. style Used to apply style settings for the specific element included in the span tags. title Used to give specific elements a title that might appear as a tooltip when the mouse is held over the element. EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 14.9 Overriding or Adding a Style with the <span> Tag 567 14.9.1 The <span> Tag and the style Attribute In Example 14.18, the paragraph style has been defined in a CSS. But later in the body of the document, the <span> tag is used to override the font size and to add margins to the text. EXAMPLE 14.18 <html> <head><title>Margins</title></head> <style type="text/css"> 1 body { margin:10%; border-width: 10px; border-style:solid; border-color: white; padding:5px;} 2 p { color=black; font-size: 22pt; margin-left:10; margin-right:10; padding:5px; border-style:groove; border-color:white; background-color:cyan;} </style> <body bgcolor=blue> <p> 3 <span style="margin-left:10%;font-size:26pt;">The Three Little Bears</span> 4 </p> <p> Once upon a time there were three little bears, Mama bear, Papa bear, and Baby bear. They lived very happily in the deep woods. </p> <p>And then there was Goldilocks!</p> </body> </html> EXPLANATION 1 The style rule for the body element is defined. It will have a margin distance in- creased by 10% on all sides and a solid, white border with a padding of 5 pixels between the margin and the border. Margin borders will differ in appearance de- pending on your browser. 2 The style rule for the paragraph defines black text of a 22-point font, with both right and left margins of 10 pixels, contained within a grooved, white border, against a cyan background. Continues From the Library of WoweBook.Com ptg 568 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.9.2 The <span> Tag and the class Attribute The <span> tag provides no visual change by itself. It allows you to change or modify the appearance of a selected portion of a document within the tags based on a CSS class rule. Example 14.19 highlights specific portions of text between the <span></span> tags. 3 The <span> tag defines a left margin increased by 10% relative to this paragraph, and changes the font size to 26 points. The only part of the document to be affect- ed is the paragraph in which the <span></span> tags are enclosed. The text The Three Little Bears will be displayed according to this style. 4 The <span> tags have no effect on this paragraph. The style reverts to the rule in the style sheet. See Figure 14.19. Figure 14.19 The <span> tag only affects a specific portion of the text. EXAMPLE 14.19 <html> <head> <style type="text/css"> 1 span.highlight { background-color:yellow } </style> </head> <body> EXPLANATION From the Library of WoweBook.Com ptg 14.9 Overriding or Adding a Style with the <span> Tag 569 14.9.3 Inheritance and Contextual Selectors Virtually all selectors that are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the “body” will also be applied to text in a paragraph. Contextual selectors have an inheritance basis. For example, if a <b> tag is nested within a <p> tag, then the <b> tag takes on the characteristics assigned to its parent. If the <p> is green, then the bold text will also be green. If a bullet list <ul> has <li> tags nested within it, the bullets take on the characteristics of its parent. If the ul element is red, then all the bullets and the accompanying text will be red. <p> 2 <span class="highlight">This is a text.</span> Highlighting text is a nice idea.<br>Whenever you apply a span style to this paragraph, you'll see what happens. 3 <span class="highlight">This is the highlighted text.</span> </p> </body> </html> EXPLANATION 1 This is a dependent class selector rule. The class highlight can only be applied to <span> </span> tags. 2 The class attribute is assigned the name of a class called “highlight”. The class will be in effect for only the portion of text between the <span></span> tags. The back- ground color of the text is changed to yellow as shown in Figure 14.20. 3 The text between the <span></span> tags will be highlighted based on the class rule. Figure 14.20 Highlighting text between <span></span> tags using the class attribute. EXAMPLE 14.19 (CONTINUED) From the Library of WoweBook.Com ptg 570 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXAMPLE 14.20 <html> <head><title>Contextual Selector</title> <style type="text/css"> 1 table td { color: blue; /* Table cells will take this style */ font-size: 18pt; font-family: verdana; } </style> </head> <body bgcolor="silver"> <div align="center"> <h1><em>The Three Bears</em></h1> <table cellspacing="20" cellpadding="20%" border="3"> <tr> 2 <td>Mama Bear</td> </tr> <tr> 3 <td>Papa Bear</td> </tr> <tr> 4 <td>Baby Bear</td> </tr> </table> </div> </body> </html> EXPLANATION 1 A rule is defined for a table cell. The table’s data will be blue, the font size 18 points, and the font family, Verdana. Whenever you create a table, each of the table cells, defined by the <td> tag, will have this style. 2–4 The table data in these cells will take on the style described in line 1. The output is shown in Figure 14.21. From the Library of WoweBook.Com ptg 14.9 Overriding or Adding a Style with the <span> Tag 571 When you create a contextual selector, the last element in the selector list is the one that is affected by the style when it is used in context of the elements preceding it. For example, if you have a selector list: table td em { color: blue ;}, then the em element, the last in the list, will be affected by the style only when it is inside a table cell at which point the table cell will be contain blue italic text. This doesn’t define the style for the <td> tag, only the <em> tag if it is used in the context of <td>; as in <td><em>. See Example 14.21 . Figure 14.21 A table with stylized cells. EXAMPLE 14.21 <html> <head><title>Contextual Selector</title> <style type="text/css"> 1 table td em { color: blue; /* Table cells take this style */ font-size: 18pt; font-family: verdana; } </style> </head> <body bgcolor=silver> <div align="center"> 2 <h1><em>The Three Bears</em></h1> <table cellspacing="20" cellpadding="20%" border="3"> <tr> 3 <td><em>Mama Bear</em></td> </tr> <tr> 4 <td>Papa Bear</td> </tr> <tr> Continues From the Library of WoweBook.Com ptg 572 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.10 Positioning Elements and Layers One of the most important features of CSS is the ability to position objects on a page, to size them, and to make them either visible or invisible. This feature makes it possible to 5 <td>Baby Bear</td> </tr> </table> </div> </body> </html> EXPLANATION 1 When a table is defined, the data cells will take on this style only if the <em> tag is used within the cell. See line 3. 2 The <em> tag used within this <h1> tag is not affected by the contextual selector because it is not within a table cell; that is, it is out of context. 3 The <em> tag is embedded within a <td> tag. The table’s data will follow the style defined on line 1; it is in context. 4 This table cell is not using the <em> tag, so will not be affected by the style rule on line 1. It can only be affected if in context. 5 This table cell will not be affected by the style rule either because it doesn’t use the <em> tag. See Figure 14.22. Figure 14.22 A table cell is defined by the contextual selector. EXAMPLE 14.21 (CONTINUED) From the Library of WoweBook.Com . ptg 564 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.8 The ID Selector and the ID Attribute The ID Selector the ID selector and is enclosed in curly braces. <ul class="square"> <li>circle</li> <li>square</li> <li>triangle</li> </ul> <ul. 14.17). The id Attribute. When JavaScript enters the picture, the id attribute is used to iden- tify each element as a unique object so that it can be manipulated in a JavaScript pro- gram. The id