Today's post answers questions related to Cascading Style Sheets (CSS) and XML.
You can download the complete lab questions from
here.
Quick Questions
Q1. You have a set of legal documents. Each has four sections: the title, the case, the background, and the judgement, in that order. Each has been made into an XML document by inserting a prolog and suitable tags. You want to write a CSS file that will display these documents using a suitable browser.
- Can you write the CSS file in such a way that it will display the title, then the judgement, then the background, then the case?
- Can you write the CSS file in such a way that it will display just the title, and the judgement?
- If the CSS file is called legalWrit.css, what processing instruction should you put in the prolog of the XML document(s)?
1a) Ideally, elements in an XML document should be listed in the order in which they are to be displayed since web browsers render the elements in sequence. However, using CSS absolute positioning one could set the position of the elements as required. For example, suppose the following are our XML and CSS files:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="legalWrit.css"?>
<legaldoc>
<title>Case Title</title>
<case>Case Text</case>
<background>Case Background</background>
<judgement>Case Judgement</judgement>
</legaldoc>
title {color:red; display:block;}
case {color:black; display:block;}
background {color:black; display:block;}
judgement {color:black; display:block;}
Figure 1 shows how the XML document would be displayed.
 |
| Figure 1 |
CSS cannot be used to change the order of elements within an XML document. However there are ways to play around with how and where elements can be displayed. For instance, to change the display position of an element, we set the "position" CSS property to "absolute" and specify its top left coordinate as follows:
title {color:red; position: absolute; top: 0px; left: 10px; display: block;}
case {color:black; position: absolute; top: 60px; left: 10px; display: block;}
background {color:black; position: absolute; top: 40px; left: 10px; display: block;}
judgement {color:black; position: absolute; top: 20px; left: 10px; display: block;}
Figure 2 shows the effect of using absolute positioning to re-arrange the display order of the XML elements.
 |
| Figure 2 - Using absolute positioning |
It must be said however that although absolute positioning can be used in simple cases such as this, it is nothing more than a work-around. It is far more desirable to structure the document in the required sequence in the first place.
1b) To hide unwanted elements we set the value of their "display" property to to "none":
title {color:red; position: absolute; top: 0px; left: 10px; display: block;}
case {color:black; position: absolute; top: 60px; left: 10px; display: none;}
background {color:black; position: absolute; top: 40px; left: 10px; display: none;}
judgement {color:black; position: absolute; top: 20px; left: 10px; display: block;}
1c) Adding the following line to the prolog of the XML document specifies that it should be styled using "legalWrit.css":
<?xml-stylesheet type="text/css" href="legalWrit.css"?>
Q2. What's the difference between a URI and a URL?
The difference between URIs (Uniform Resource Identifiers) and URLs (Uniform Resource Locators) is very subtle so much so that the terms are sometimes used interchangeably. A URI is a string of characters that identifies an abstract or physical resource on the network. URIs provide a method for identifying resources that is both simple and extensible. In fact a URI can be extended to become a locator or a name or both. URLs are the "locator" subset of URIs that identifiy the location of a physical resource on the network and also define how that resource can be accessed. This means that all URLs are URIs but not all URIs are URLs. I remember coming across the following analogy on the Internet: "All humans are mammals but not all mammals are human". Similarly URIs that are names are called URNs (Uniform Resource Names) and are designed to provide a universally unique name to a resource that is meant to be persistent even after that resource no longer exists.
Q3. Why does the XML language allow namespaces?
Given that in XML you need to make up your own element names, chances are that element names might clash some time down the line. In other words, you may end up using the same element name for different purposes or come across the same element name in an XML document written by someone else. This is especially true for large complex documents where the chances of having clashing element names becomes even greater. Duplicate element names that mean different things will obviously create confusion when processing the XML document.
Namespaces were introduced specifically to resolve this issue. They are collections of unique element names that logically belong together. In XML, a namespace is nothing more than a URI. Choosing one that belongs to you ensures that the namespace is unique to you and being a URI, it doesn't even have to point anywhere! Let's say we wanted to add a namespace to the XML document specified in Question 1 above and choose "http://www.WZLawyers.com/legal" as our namespace URI. We add the namespace declaration in the start tag of our root element:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="legalWrit.css"?>
<lg:legaldoc xmlns:lg="http://www.wzlawyers.com/legal">
<lg:title>Case Title</lg:title>
<lg:case>Case Text</lg:case>
<lg:background>Case Background</lg:background>
<lg:judgement>Case Judgement</lg:judgement>
</lg:legaldoc>
Line 3 specifies that the XML namespace prefix "lg" refers to our namespace URI. This prefix is then used in each element name to create what is known as a qualified name (e.g "lg:title"). Qualified names ensure that element names in our namespace will not clash with elements of the same name in other namespaces.
Longer Questions
Please refer to the
Lab handout to see the questions' full text.
Answer to Question 1
Using "display:block;" ensures that each element is rendered on a different line when then XML is viewed through the browser.
Answer to Question 2
2a) The following CSS will style the document as required. A "display:block" property was added to the chapter title and poem lines to make the text more readable.
/*stylesheet4.css*/
chapter {font-family: Palatino, "Times New Roman", Sans-Serif;
font-size: 12pt;
background-color: #FCFBC4;
margin-left: 1em;}
chapterHead {font-size: 24pt;
font-weight: bold;
font-style: italic;
color: blue;
display: block;}
poem {font-style: italic;
display:block;
margin-left: 1em;}
line {display: block;}
The requirements specified that the chapter title and text should be indented from the left margin by 1em, while the poem lines should be indented by 2ems. However, looking closely at the CSS above, you will notice that neither the "chapterHead" nor the "line" elements have a left margin specified. On the other hand, the "chapter" and "poem" elements each have a 1 em left margin. The reason for this is simple. Since the "chapter" element contains the rest of the elements, indenting the "chapter" element by 1 em automatically indents the rest. Furthermore, since the "poem" element is already indented by 1 em, we only need add a further 1 em to make it 2 ems indented from the left margin.
2b) Here's how the document looks when styled using the above stylesheet:
 |
| Figure 3 - XML Styled with stylesheet4.css |
2c The following stylesheet is a revised version of the one in 2a above. Here, the "chapter" element is given a margin of 1 em on all sides and the text has been justified. This will give the document a cleaner look, removing the jaggedness seen on the right hand side of the document (see Figure3). The chapter title has been given a bottom margin of 10 pixels and the poem has been centered on the page by setting its left and right margin to "auto". Finally, "indexRef" elements have been given a green color to make them stand out from the rest of the document.
/* stylesheet4revised.css */
chapter {font-family: Palatino, "Times New Roman", Sans-Serif;
font-size: 12pt;
background-color: #FCFBC4;
margin: 1em;
text-align: justify;}
chapterHead {font-size: 24pt;
font-weight: bold;
font-style: italic;
color: blue;
display: block;
margin-bottom:10px;}
poem {font-style: italic;
display: block;
margin-left:auto;
margin-right: auto;
margin-top:20px;
margin-bottom: 20px;
text-align: center;}
line {display: block;}
indexRef {color: green}
Here's how the document looks when styled using "stylesheet4revised.css"
 |
| Figure 4 - XML styled with stylesheet4revised.css |
Subscribe to email feed
