XML and IE5, Part 6

by Richard G. Baldwin
baldwin@austin.cc.tx.us
Baldwin's Home Page

Dateline: 2/4/00

Recap from previous weeks: In my previous articles I have been introducing you to the use of Microsoft IE5, as a viewer for XML files.

I promised to discuss the fact that IE5 supports style sheets written in either CSS or XSL. After discussing a number of associated matters, I am finally going to deliver on that promise.

Objective: The primary objective of this series of articles is to show you how to use IE5 to browse XML documents that are supplemented by style sheets. More importantly, the objective is to show you how to create XML files and associated style sheets that can be successfully browsed using IE5.

Leading up to that objective, I have written several articles discussing Cascading Style Sheets (CSS) in general.

Up to this point, I have been concentrating on the use of CSS with HTML (rather than XML), due simply to the ease with which you can experiment with CSS using any modern HTML browser.

At this point, we will begin experimenting with XML and CSS. You will need IE5 (or some other browser that understands XML and CSS) in order to perform these experiments.

The CSS format, -- selector: In the previous articles, I showed you a few things about the CSS format. For example, I showed you how to define a selector, h3, followed by a style definition as shown below.

h3 { font-family: arial; }

Style definition and multiple properties: I explained that the style definition is the combination of a property and its value separated by a colon. I explained that multiple properties might be included in the same style definition by separating them with semicolons as shown below.

h3 { font-family: arial;
font-style: italic;
color: #aa3600 }

Multiple values: I explained that multiple values can be defined for a single property by separating them with commas as shown below, and I explained the behavior of an HTML browser when it encounters multiple values.

h3 { font-family: arial,
helvetica, geneva, sans-serif;
font-style: italic;
color: #aa3600 }

Classes and IDs: I explained that you might define a class or ID with a specific style. Once you define a class or ID, you can attach it to any HTML tag within the document.

In this article, you will see that you can also attach a class or ID to an XML element. This will cause the style to be applied to the element. This makes it possible to apply styles on a more selective basis than is possible when defining styles and associating them directly with specific element names.

I showed you the format for defining classes and IDs and for applying classes and IDs. In this article, you will see that the format applies not only to HTML, but to XML as well.

An example: Finally, I showed you how to write a simple HTML file containing a simple style sheet illustrating all of the above. I showed you some screen shots of my Netscape 4.7 browser using the style sheet to render the HTML file.

In this article, I will convert that HTML file into an XML file. I will use IE5 to render the XML file using the same style sheet that I developed in the earlier article. That will allow us to make a direct comparison between the two approaches before embarking on other issues involving IE5, XML, and CSS.

The style sheet file: In this article, I will separate the style sheet from the XML file and place the style sheet in a separate file. Begin the experiment by using your text editor to create a file named aa020400-a.css containing the style sheet shown below.

h3 { font-family: arial;

font-style: italic;

color: #aa3600 }

P {font: 11pt arial, helvetica, geneva,

sans-serif; line-height: 125%; }

.classDemo { color: green}

#idDemo { color: blue }

Note that this is exactly the same style sheet information that I used in the previous article. However, in that article, the style sheet was embedded in the HTML file. (I could have put it in a separate file and addressed it using a link tag in the HTML file just as well.)

The XML file: Now use your text editor to create a file named aa020400-a.xml containing the following XML text.

<?xml version="1.0"?>

<?xml-stylesheet type="text/css"

href="aa020400-a.css"?>

<html>

<body>

<h3>This is a header of the h3

variety</h3>

<p>This is a paragraph.</p>

<h2>This is an h2 header</h2>

<h3>This is another h3 header</h3>

<p>This is another paragraph.</p>

This is an h2 header modified by

the classDemo class

</h2>

This is a paragraph modified by

the idDemo ID.</p>

</body>

</html>

Looks like an HTML file: “Aha,” you say, “that is an HTML file.” Granted, it does look a lot like an HTML file. In fact, with a couple of exceptions, it looks exactly like the HTML file from the previous article.

However, it really is an XML file for which the element names just happen to be the same as the names of the tags that you recognize from HTML. When I produced the original HTML file, I was careful to make it well-formed so that I could easily convert it directly into an XML file.

Associating style sheets with XML documents: In an earlier article, I told you that you could enable the use of a style sheet with an XML document by specifying the type and location of the style sheet with the style sheet processing instruction (PI).

This is described in the W3C document entitled Associating Style Sheets with XML documents.

Format of style sheet PI: The basic form of the style sheet PI looks like this, where the first attribute specifies the type of style sheet, and the second attribute specifies the location of the style sheet file.

<?xml-stylesheet type="text/xsl" href="mystyle.xsl"?>

Note that I used boldface to highlight the PI in the above XML document, and I have repeated it below for convenience.

This PI specifies the type of style sheet to be text/css, and specifies that the file containing the style sheet can be found in the same directory as the XML file.

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

IE5 uses the PI: When an XML document is loaded into IE5, the browser searches for the PI. If it finds a PI, it downloads the style sheet in addition to the XML document and uses the style sheet to display the XML.

Browse the XML file: If you create the two files described above in the same directory, and load the XML file into IE5, you should see something similar to the following on your browser screen. This is a screen shot produced by loading the XML file into my copy of IE5.

HTML screen shot: For comparison purposes, here is a copy of the screen shot from the previous lesson for the corresponding HTML file.

Comparison of the two screen shots: Although there are many similarities between the two screen shots, they are obviously very different.

That’s a wrap: At this point, I am going to exercise my prerogative as a college professor and tell you that your assignment for next week is to see if you can figure out why they are similar but different.

So, until next week, that’s a wrap.

As I mentioned in the article last week, to see a practical example of the use of style sheets, take a look at the source HTML for this document. What you will see is style-sheet material that was automatically created by my Microsoft Word 2000 WYSIWYG HTML editor.

Coming attractions...

Next week, I plan to discuss some of the differences between the two screen shots, and also to dig a little deeper into the use of CSS with XML and IE5 If you don’t have IE5 installed already, you might want to download and install it.

In subsequent lessons, I will discuss the use of XSL style sheets with XML.

The XML octopus

Trying to wrap your brain around XML is sort of like trying to put an octopus in a bottle. Every time you think you have it under control, a new tentacle shows up. XML has many tentacles, reaching out in all directions. But, that's what makes it fun. As your XML host, I will do my best to lead you to the information that you need to keep the XML octopus under control.

Credits

This HTML page was partially produced using the WYSIWYG features of Microsoft Word 2000. The images on this page were used with permission from the Microsoft Word 97 Clipart Gallery.

About the author

Richard Baldwin is a college professor and private consultant whose primary focus is a combination of Java and XML. In addition to the many platform-independent benefits of Java applications, he believes that a combination of Java and XML will become the primary driving force in the delivery of structured information on the Web.

Richard has participated in numerous consulting projects involving Java, XML, or a combination of the two. He frequently provides onsite Java and/or XML training at the high-tech companies located in and around Austin, Texas. He is the author of Baldwin's Java Programming Tutorials, which has gained a worldwide following among experienced and aspiring Java programmers. He has also published articles on Java Programming in Java Pro magazine.

Richard holds an MSEE degree from Southern Methodist University and has many years of experience in the application of computer technology to real-world problems.

baldwin@austin.cc.tx.us
Baldwin's Home Page

-end-

rev0001091116