So far, the five_Cs class selector we created in the gems1.css style sheet docu- ment could be applied to any element in the gems1.xml document. All we have to do is select an element and insert the CLASS=” ” attribute specifica- tion in its start tag. As a variation on class selectors, we could create a class that applies to only specified elements. Here is the generic syntax that we would insert into the CSS file: elementname.classname {propertyname1: value propertynamen: value} Previously, placing the period (.) at the beginning of the name of the selector class made it possible to apply the class to all elements. Here, placing a period between a specific element name and the class name ensures that the class will apply to only that element. Let’s look at an example. In the small Space Gems diamond list, let’s say that we want to modify the appearance of the names of the gems (that is, Cullinan and Dark) so that, even though they keep their existing display style, they appear gold on a magenta background. Follow these steps: 1. Start with the original gems1.css style sheet document. In addition to the existing <name> element selector, add another selector with the following class definition: name.royal_emph {display: block; font-weight: bold; text-align: center; color: gold; background-color: magenta} The resulting style sheet document should resemble the modified gems1.css document in Figure 7.5. 2. To apply the class definition to the names of the diamonds, go to the gems1.xml file and modify the name elements as follows: <name CLASS=”royal.emph”>Cullinan</name> <name CLASS=”royal.emph”>Dark</name> 3. Finally, to ensure that the gems1.xml document is valid, declare the new CLASS attribute in the diamonds1.dtd DTD document. Insert the following attribute declaration into that document: <!ATTLIST name CLASS CDATA #IMPLIED > Grouping Selectors by Pseudo-Classes Like pseudo-elements, pseudo-classes classify elements on characteristics that cannot be deduced from the document tree; pseudo-classes, like pseudo- elements, don’t appear in the logical data structure of a document. The excep- tion is :first-child, which can be deduced from the document tree. As we 258 Chapter 7 422541 Ch07.qxd 6/19/03 10:11 AM Page 258 demonstrate in this section, pseudo-classes can be dynamic; they can acquire or lose a style even as a user interacts with the data. Pseudo-classes enable us to customize selectors. Following is the generic syntax for defining pseudo-classes. (Note that pseudo-class names are not case-sensitive.) selectorname:pseudo-classname {propertyname1: value propertynamen: value} Pseudo-classes are allowed anywhere in selectors, whereas pseudo- elements may only appear after the subject of the selector. Table 7.3 lists and explains the pseudo-classes available with the CSS language. Like pseudo- elements, pseudo-classes are case-insensitive. Figure 7.5 Selector class: gems1.css before and after. /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; font-weight: bold} name.royal_emph {display: block; font-weight: bold; text-align: center; color: gold; background-color: magenta} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } XML and Cascading Style Sheets 259 422541 Ch07.qxd 6/19/03 10:11 AM Page 259 Table 7.3 Available Pseudo-Classes PSEUDO-CLASS EXPLANATION active Adds a specified style to a selected hyperlink. hover Adds a specified style to a hyperlink when the mouse pointer is placed over it. focus Adds a specified style while an element has the focus (that is, while it is accepting keyboard or other forms of text input). link Adds a specified style to an unvisited hyperlink. visited Adds a specified style to an already visited hyperlink. first-child Adds a specified style to an element that is the first child element of a specified parent element. lang Enables the author to specify a language to be used in a specified element. A common use for pseudo-classes is changing the hyperlink color depend- ing on its status, for example, after it has been clicked. The list of gems in gems1.xml includes a link to the Space Gems home page on the Web. The fol- lowing procedure demonstrates how we can change its color: 1. Modify the gems1.css style sheet document by altering the <link> element style rule declaration to link {display: inline; text-decoration: underline; cursor: hand} 2. Beneath the declaration, insert link:link {color: #00FF00} /* hyperlink is green until selected */ link:hover {color: #FF0000} /* hyperlink turns red when the mouse pointer is moved over it */ LINK:visited {color: #FFFFFF} /* visited hyperlink turns black */ These changes are illustrated in the modified document in Figure 7.6. Combining Pseudo-Classes with Other CSS Classes We can combine pseudo-classes with other CSS classes. The generic syntax is as follows: elementname.classname:pseudo-class {propertynames: values } Placing a period between the element name and the class name ensures that the combination class/pseudo-class applies to only that element. 260 Chapter 7 422541 Ch07.qxd 6/19/03 10:11 AM Page 260 Figure 7.6 Pseudo-classes: gems1.css before and after. Combining classes and pseudo-classes can save steps. Consider, for exam- ple, a document with many links. We can design the document so that we change the visited status property for all the links at one time without having to access individual data documents. Let’s create a pseudo-class called VISITED in the style sheet document and specify an appropriate attribute in each hyperlink element start tag in the data document. That attribute ensures that the <link> element observes the modi- fied VISITED display behavior: 1. In the gems1.css file, in addition to the existing link selector, add another selector with the following combined pseudo-class/class definition: link.VISITED:visited {color: #FFD70O; background-color: black} The modified gems1.css document in Figure 7.7 illustrates this addition. /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; text-decoration: underline; cursor: hand} link:link {color: #00FF00} /* hyperlink is green until selected */ link:hover {color: #FF0000} /* hyperlink turns red when the mouse pointer is moved over it */ link:visited {color: #FFFFFF} /* visited hyperlink turns black */ XML and Cascading Style Sheets 261 422541 Ch07.qxd 6/19/03 10:11 AM Page 261 Figure 7.7 Classes combined with pseudo-classes: gems1.css before and after. Here, the class name is VISITED and the pseudo-class name used is also visited. After the hyperlink has been used, its color turns gold (#FFD7000). 2. Now let’s apply the new class definition to the hyperlink. In the gems1.xml document, we’ll modify the <link> element to read as follows: <link CLASS=”VISITED” xml:type=”simple” href=”http://localhost/SpaceGems” onClick=”location.href=’http://localhost/SpaceGems’”> home page </link> 3. Finally, to ensure that the gems1.xml document will still be valid, we declare the new CLASS attribute for the element <link> in the dia- monds1.dtd DTD document. Insert the following into that document: <!ATTLIST link CLASS CDATA #IMPLIED > /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } link.VISITED:visited {color: #FFD70O; background-color: black} 262 Chapter 7 422541 Ch07.qxd 6/19/03 10:11 AM Page 262 After making this change, if we want to change the visited status color on any element with the CLASS=VISITED attribute in its start tag again, we have to alter only the color code in the gems1.css document. We won’t have to visit the individual documents, as long as they remain affiliated with the gems1.css document. Grouping Selectors by the ID Attribute You may have seen the ID (or the XHTML/XML version referred to as id) attribute before. Properly used, id can be helpful to XML developers in many situations. Following is the general syntax for changing the display style for a specific element: elementname#IDvalue {propertyname1: value propertynamen: value} Let’s change the color of the font and the background for the name of the first diamond (Cullinan) in the gems1.xml document. Here is how to do it: 1. In the original gems1.css document, alter the existing <name> element style rule to: name {display: block; text-align: center} 2. Then add the following new rule: name#first {color: black; background-color: yellow} The change and addition are shown in the modified gems1.css docu- ment in Figure 7.8. 3. Apply the new id attribute to the first diamond. Go to the original gems1.xml document and modify the first <name> element to read as follows: <diamonds> <name id=”first”>Cullinan</name> 4. To ensure that the gems1.xml document will still be valid, we declare the new CLASS attribute for the element <name> in the diamonds.dtd DTD document. Insert the following into that document: <!ATTLIST name id CDATA #IMPLIED > XML and Cascading Style Sheets 263 422541 Ch07.qxd 6/19/03 10:11 AM Page 263 Figure 7.8 id attribute selector: gems1.css before and after. Inserting Images as Backgrounds Page developers sometimes insert images as backgrounds to text and other ele- ments, or as discrete elements on their own. We’ll look at both techniques here. Here is the generic syntax for inserting a background image style rule into a CSS style document: nameOfElement {imagePropertyName_01: value imagePropertyName_n: value } We can specify that the image appear behind the root element or behind individual elements. Table 7.4 lists the available image property names and their values; their names alone were listed previously in Table 7.1. /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; text-align: center} name#first {color: black; background-color: yellow} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } 264 Chapter 7 422541 Ch07.qxd 6/19/03 10:11 AM Page 264 Table 7.4 Available Image Property Names IMAGE PROPERTY NAME EXPLANATION background A shorthand property for setting the individual background properties (background-color, background-image, background-repeat, background-attachment and/or background- position) in the same declaration in the style sheet. background-attachment Values may be fixed or scroll. The background image stays in the same place, or scrolls as the end user scrolls through the document. background-color Sets the background color of an element. Values are a color value or the keyword transparent, which lets the underlying colors shine through. background-image Specifies the background image of an element. Value is the URI of the image or none. When specifying a background image, specify a background color that will be used if and when the image is unavailable. When the image is available, it is rendered on top of the background color. The color is visible in the transparent parts of the image. background-position Specifies the initial position of the image, if it is used. Values are x and y coordinates in percentages (0 %, 100 %, and so on) to specify the location of the image’s upper left corner. background-repeat Specifies whether an image, if specified, is repeated (also called tiled), and how. Values are repeat, no-repeat, repeat-x (repeat in the horizontal direction), or repeat-y (repeat in the vertical direction). If we want to insert a background logo indicating that the Web page is in compliance with CSS1 and CSS2 standards, in the gems1.xml page, we add the following to the gems1.css style sheet document: diamonds {font-family: Arial,Helvetica,sans-serif; font-size: 12pt; background-image: url (diam_logo_02.tif); background-repeat: no-repeat; background-position: 0% 0% } The modified gems1.css document in Figure 7.9 illustrates these modifications. XML and Cascading Style Sheets 265 422541 Ch07.qxd 6/19/03 10:11 AM Page 265 Figure 7.9 Images as background: gems1.css before and after. Inserting Images as Discrete Elements If we want to insert an image by itself, we create a dedicated element for it in the XML document. In the style sheet document, we specify the image as the background to that dedicated element. Because we are building another back- ground image, the syntax we use in the style sheet document is the same as in the previous example. Here is an example of the procedure: 1. To add a discrete image to the list of diamonds, begin by nesting a <diam_pix01> element within the <diamonds> element in the gems1.xml document: <diamonds> <diam_pix01> </diam_pix01> <gem> /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,sans-serif; font-size: 12pt; background-image: url(diam_logo_02.tif); background-repeat: no-repeat; background-position: 0% 0% } gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } 266 Chapter 7 422541 Ch07.qxd 6/19/03 10:11 AM Page 266 <name>Cullinan</name> </gem> </diamonds> 2. We alter the gems1.css document by adding the following style rule: diam_pix01 {background: url (diam_logo_01.tif) no-repeat 0% 0%; height: 50 px; width: 100 px; float: left} This change is illustrated in the modified gems1.css document in Figure 7.10. We deliberately changed the image syntax in the discrete element example. The syntax is a shorthand treatment that is permissible, provided the values are entered in that order only. Figure 7.10 Images as elements: gems1.css before and after. /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,Sans-serif; font-size: 12pt } gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } /* Chapter 7, XML & Cascading Style Sheets - Example Style Sheet */ /* filename:gems1.css */ diamonds {font-family: Arial,Helvetica,sans-serif; font-size: 12pt} diam_pix01 {background: url (diam_logo_01.tif) no-repeat 0% 0%; height: 50 px; width: 100 px; float: left} gem {display: block; text-align: left} name {display: block; font-weight: bold} carat,color,clarity,cut,cost {display: list-item; list-style: disc inside; font-size: 10pt; list-style-type: disc; text-indent: 50 } link {display: inline; color: #0000FF; text-decoration: underline; cursor: hand } XML and Cascading Style Sheets 267 422541 Ch07.qxd 6/19/03 10:11 AM Page 267 [...]... Declare an XLink Namespace Before we can create linking elements, we have to insert a declaration of the specific XLink namespace Minimally, the XLink namespace declaration must be within the designated linking element’s start tag However, we suggest that the namespace declaration be included in the root data instance element of the document Here is an example of such a declaration: . coding as you see fit using the chapter material as a reference. 12. Save any subsequent changes to the gems1 .xml file. Lab 7.3: Inserting a Link into an XML File That Has a DTD In this lab,. underline; cursor: hand } XML and Cascading Style Sheets 259 42 254 1 Ch07.qxd 6/19/03 10:11 AM Page 259 Table 7.3 Available Pseudo-Classes PSEUDO-CLASS EXPLANATION active Adds a specified style to a selected. 10pt; list-style-type: disc; margin: 0.5cm } 3. Finally, we insert a 25- pixel indentation to the Space Gems home page link by modifying the original link style rule to look like this: link {display: inline; color: