CMT3315 Lab 09 - CSS & XPath

Today's post answers questions related to Cascading Style Sheets (CSS) and XPath.
You can download the complete lab questions from here.

Quick Questions

1. Suppose that a CSS file is used to determine how an XML document will appear when viewed in a browser. Suppose that the CSS file contains two rules, one dictating that a particular piece of text will appear in bold type, the other dictating that it will not. What will happen?

If there are conflicting rules in a CSS file, the one that comes below the other in the CSS document will have precedence and will be applied. For instance, consider the following XML and CSS files:

  <?xml version="1.0"?>
  <?xml-stylesheet type="text/css" href="lab09-css1.css"?>
  <?book>
   <title>Rainbow Six</title>
   <author>Tom Clancy</author>
  </book> 
 

  /* Lab09-css1.css */
  book   {margin:10px; font-weight:normal;}
  title  {display:block; font-weight:bold; color: red;}
  author {display:block;}
  title  {font-weight:normal;}
 

Figure 1 shows the result of applying the stylesheet to the XML document. As specified in the first rule (line 3), the book title is red but is not bold because the second rule (line 5) which sets the font-weight to normal takes precedence.

Figure 1

2. An XML document contains the sentence "The grand old Duke of York, he had 10000 men." Would XPath be able to extract the piece of data "10000" from such a document?

Assuming that the text in question is in the following XML document:

  <?xml version="1.0"?>
  <book>
   <title>The Duke of York</title>
   <summary>The grand old Duke of York, he had 10000 men.</summary>
  </book> 
 

The following XPath query would extract "10000" from the "summary" element's text:

  substring(/book/summary/text(),36,5)
   
 

Longer Questions

The answers to the longer questions are given below. Please refer to the Lab 09 handout for the questions themselves.

1a. Adding the following line to the prolog of our XML document will associate "stylesheet01.css" to it:

  <?xml-stylesheet type="text/css" href="stylesheet01.css"?> 
 

1b. The listing to stylesheet01.css is given below. Figure 2 shows how the XML document appears in a browser after applying this stylesheet.

 /*stylesheet01.css*/

  chemElements {display: table;
                margin:10px;
                  font-family: Calibri, Arial, Helvetica, Sans-Serif;
                 font-size:10pt;
                 border-collapse: collapse;
                  color: #666666;}

  tableHead, element {display: table-row;}

  anum, name, symbol, mp, bp,
  anumHead, nameHead, symbolHead, mptHead, bptHead {
   display: table-cell; 
   border:solid 1px #494949; 
   padding:0px 4px 0px 4px;}

  tableHead {display: table-row;
             background-color: #555555;
              color: #B0AFAF;
              height: 30px;
               line-height: 30px;}

  element {display: table-row;} 

  element:nth-child(odd) {background-color:#F7F7F7;}

  name   {font-weight: bold; color: #d2580d}

  symbol {text-align:center}

  mp, bp {text-align:right}
 

Using the "display" CSS property we can render the XML document as an HTML table. The root element will be our table, so its display property is set to "table". The "tableHead" and "element" elements are our rows, so their display property is set to "table-row". The display property of the rest of the elements is set to "table-cell". The rest of the CSS is fairly straight-forward, mainly setting rules for typeface, colours, borders and spacing. Of note is line 27, where the CSS 3 ":nth-child" pseudo class is being used to specify that every odd "element" row should have a light grey background. This produces the alternating row effect seen in Figure 1 below.

Figure 2 - Stylesheet applied to chemElements2.xml

2. Provide XPath expressions which will do the following:

a) Select all the elements subordinate to the root node.

  /musicList/*
  
 

b) Select all track elements that have a total attribute with a value of 5.

  //tracks[@total = 5]  
  
 

c) Select all elements that contain the word "Penderecki" in their title.

  <!-- cd elements whose title contains "Penderecki"-->
  //cd[contains(title,"Penderecki")]
  
  <!-- title elements that contain "Penderecki" in their text" -->
  //title[contains(.,"Penderecki")]
  
 

d) Select any elements that have titles with greater than 11 characters.

  <!-- cd elements whose title is longer than 11 characters-->
  //cd[string-length(title) > 11]
  
  <!-- title elements where their text is longer than 11 characters" -->
  //title[string-length(.) > 11]
  
 

e) Select all the siblings of the first cd element

  //cd[1]/*