18.2.4- Styling XML

<< 18.2.3- Writing DTDs

Chapter18

18.2.5- XSL >>

Styling XML

So far we have created our first application of XML, a language for exchanging data about books, and we have created an XML document in our books.xml file. This is great for defining data, as our tags clearly explain their content and it is written in plain text, which is easy to transfer. However, if we are putting things up on the Web we want our pages to look good. As our earlier example showed, even in an XML-aware browser, such as IE5, a plain XML file did not look that impressive:

 

This is because the tags that we have proposed for our book example don't say anything about how the tags should appear on the page, whereas HTML tells the browser how the data should look.

 

So, to make it look attractive we must supply another file, a style sheet. In case having to write a style sheet as well sounds like a lot of extra effort, let's just have a look at what it means for us.

Why Use Style Sheets?

Unfortunately, using style sheets means that we have to use a completely separate language, in a separate file, to declare how we want our document to be presented.

 

We can, however, use our good friend Cascading Style Sheets (CSS) to do this (and if you don't know CSS, don't worry; it's very similar to HTML styling directives). In any case HTML 4.0 deprecated many of the style elements in HTML in favor of using CSS. So what are the real advantages of using style sheets?

 

• Improved clarity of the document
• Can help reduce download time, network traffic and server load
• Allow you to change the presentation of several files, just by altering one style sheet
• Allow you to present the same data in different ways for different purposes

 

If we do not have to have a lot of rules, telling us how we should display our document, included in with the data then the core content of the file will be easier to read. It is not cluttered up with styling directives like <font> tags, which are not important to the actual content of, say, our books file.

 

With a style sheet, all of the style rules are kept in one file and the source document simply links to this file. This means that if several pages use the same type of display, which is often the case as we display an ever-increasing amount of data on web pages, we do not need to repeat the style rules in each page. The browser can download the style sheet and cache it on the client. All other pages can then use the same styling rules. This also means that should you need to change the style of your site – perhaps your company changes its corporate colors – then you do not need to laboriously change every file individually by hand, you just change one style sheet and the changes are propagated across the pages. Indeed, on the other hand, it also means that you can use the same data, and display it in different ways for different purposes by applying different style sheets.

Cascading Style Sheets

The Cascading Style Sheets Level 1 specification was released by the W3C in late 1996. It was supported to a large degree in both Netscape Communicator 4 and Internet Explorer 4. Since then a Level 2 specification has been released (May 1998), some of which was incorporated into Internet Explorer 5. Internet Explorer 7 made some major advances in proper CSS 2 support as described at http://msdn2.microsoft.com/en-us/library/Bb250496.aspx where generally speaking FireFox 2 is as good or better than IE7 in most areas of CSS 2 support. Various parts of CSS 3 remain in draft stages and other status with the effective meaning of "not done yet."

 

Cascading Style sheets are already popular with HTML developers for the same reasons that we have just expanded upon here.

How CSS Works

CSS is a rule-based language comprising of two sections:

 

• A pattern matching section, which expresses the association between an element and some action
• An action section, which specifies the action to be taken upon the specified section

 

For CSS, this means that we have to specify an element and then specify how it has to be displayed. So, if we were to develop a cascading style sheet for our books.xml file, we would have to specify a style for each of the elements that contain markup that we want to display.

 

CSS splits up the browser screen into areas that take a tree-like form, as shown in the following diagram. You can think of this much like the tree that Windows Explorer exposes:

 

 

Here we have a page, with several areas. Inside the second area are a block flow object and a number of in-line flow objects. So, using CSS we can specify a style for each of these objects, page, area and flow. Note that the block flow object is taking up the whole line, while the others are on the same line. The one that is taking up the whole line need not contain text or an image that will take up the whole line, it may just be a short title that needs to be displayed in a line of its own.

It is important to decide whether the values are to be displayed in-line or as a block. The difference being that, if they are in-line the next element will be displayed as if it were on the same line as the previous one, whereas if it is displayed as a block, each will be treated separately. We need to make this decision for each object in CSS.

 

While we cannot cover a full reference to CSS here you should find it fairly easy to catch on and, if you need to find out a special implementation, you can always check the specification at http://www.w3.org/style/css/ .

 

Let's try it out and write a style sheet for our books.xml file.

1.    We start by opening up our favorite text editor again we will be saving this file as books.css. Type in the following code:

title {

display:block;

font-family: Arial, Helvetica;

font-weight: bold;

font-size: 20pt;

color: #9370db;

text-align: center;

}

ISBN {

display:block;

font-family: Arial, Helvetica;

font-weight: bold;

font-size: 12pt;

color: #c71585;

text-align: left;

}

 

authors {

display:inline;

font-family: Arial, Helvetica;

font-style: italic;

font-size: 10pt;

color: #9370db;

text-align: left;

}

 

description {

display:block;

font-family: Arial, Helvetica;

font-size: 12pt;

color: #ff1010;

text-align: left;

}

 

2.    Save the file as books.css. We have now finished creating our first style sheet for XML. The only problem is that our books.xml file has no way of telling how it should be associated with this style sheet. So we will have to add a link to this style sheet into our original XML file.

3.    To add the link to the style sheet, open up your books.xml file again, and add the following line between the XML prolog and the opening <books> element.

<?xml version="1.0"?>

<?xml:stylesheet href="books.css" type="text/css" ?>

<books>

 

4.    Open books.xml in your browser and you should see something like this:

How It Works

CSS files do not need a special header, so we went straight on and declared which elements we needed to display. In this case we are just adding styling for the <title>, <ISBN>, <authors>, and <description> elements. So we can add them to the file like so:

 

title {

 

}

ISBN {

 

}

 

authors {

 

}

 

description {

 

}

This specifies the pattern matching section.

 

Having declared the elements that we want to display, we must associate some action with it. So, let's see how to display the content of the <title> element. We want it to be displayed as a block, so within the curly brackets {} we add the directive to display the element as a block:

 

title {

display:block;

}

 

This simply specifies that we want to make the title a block level element. We still need to specify the style the title should be displayed in.

 

 

So, we added a font to display the content of the <title> element. In the screen shot you have just seen the browser is using the Arial font. However, in case the machine using the file does not have Arial, we have allowed it to use Helvetica instead. In addition, we want it to appear in the center of the screen, in a size 20pt, bold font, and in a lilac color. So, we add some more action rules, or style elements. As you can see, these are very similar to those used for HTML.

 

title {

display:block;

font-family: Arial, Helvetica;

font-weight: bold;

font-size: 20pt;

color: #9370db;

text-align: center;

}

 

We can then add some similar rules for the other element content we want to display, for example:

 

authors {

display:inline;

font-family: Arial, Helvetica;

font-style: italic;

font-size: 10pt;

color: #9370db;

text-align: left;

}

 

You can see from the screen shot that the authors, despite being in separate elements in the books.xml file are displayed on the same line.

Finally, we included an extra line in our books.xml file to tell it to use the correct CSS file:

 

<?xml version="1.0"?>

<?xml:stylesheet href="books.css" type="text/css" ?>

<books>

 

The href attribute acts just like it would in HTML, while the type attribute specifies the type of style sheet that is being attached. This is an example of a processing instruction, which you may remember us talking about them earlier in the chapter when we were discussing XML syntax.

 

 

Obviously, there is a lot more to CSS than we can describe here, such as all of the appropriate styling tags. To find our more, check out the specification at http://www.w3.org/style/css/ or pick up a copy of a dedicated book, such as Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition published by Wrox (ISBN 0-470-09697-7).

<< 18.2.3- Writing DTDs

Chapter18

18.2.5- XSL >>