XML and IE5, Part 3

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

Dateline: 1/14/00

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

I showed you a couple of examples involving the use of the default tree style provided by IE5, and promised to discuss the fact that IE5 supports style sheets written in either CSS or XSL.

Some preparation will be useful: Before getting into the details of IE5 and XML documents having style sheets written in CSS, it will be useful to provide some basic information about CSS. Therefore, this article, and perhaps the next one as well, will provide basic information about how to write style sheets in CSS.

CSS is a very broad topic: This will not be an exhaustive discussion of CSS. Rather, it will only scratch the surface. Hopefully, it will give you the basic information that you will need to understand the use of CSS and XML with IE5.

An example: I like to start discussions of this sort by providing an example, even if you may not yet be prepared to understand the example. That will give you a feel as to where thing are going.

Please open the document referred to by this link in a separate browser window. If you compare that document with this one, you will note that it is rendered on your browser screen with a style that is considerably different from this one.

Rendering is controlled by a CSS: Although the use of style sheets is optional in HTML, the rendering style of that document (and this one as well) is being controlled by a Cascading Style Sheet (CSS).

The style sheet for that document is the simpler of the two, which is why I elected to highlight it here. If you view the source for that document, you will see that it contains the following style sheet:

What does this all mean? Actually, I’m not going to attempt to explain everything in the above style sheet. However, in this article and the next, I will attempt to provide you with enough information that you can decipher much of the meaning of the above style sheet as well as style sheets that you may encounter being used with XML documents. I will also refer you to some locations on the web where you can learn more about CSS.

Concentrate on HTML initially: In these initial articles on CSS, I will concentrate on the use of CSS with HTML. That way, you will be able to experiment with the examples that I provide regardless of which modern browser you are using. Later, I will provide some examples using CSS with XML. At that point, you will need to be running IE5 to experiment with the examples.

A much simpler example: Next, we will take look at a much simpler example. Use your text editor to create a simple HTML file containing the following text and open that file in your browser.

<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>
</body>
</html>

Open the file in your browser: When you open this HTML file in your browser, the appearance should be based on the default rendering provided by your browser. For example, here is a screen shot (reduced in size) showing how this file appears on my computer using Netscape 4.7.

Modify your HTML file: Now modify your HTML file so that it contains the stylesheet text shown below (without the boldface, of course).

<html>
<HEAD>
<STYLE type="text/css">

</STYLE>
</HEAD>
<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>
</body>
</html>

What are the differences? The stylesheet text that I added is highlighted in boldface. I added the CSS style sheet at the top.

Now open the modified file in your browser. You should see a significant change in the rendering of this simple HTML file (assuming that you are using a modern browser that supports style sheets).

How is it rendered? The following screen shot shows how this file is rendered in my Netscape 4.7 browser.

All h3 headers are different: As you can see, both of the h3 headers are now rendered in Italics in a color that is somewhere between brown and red (I chose the color components pretty much at random in the style sheet). Also, the typeface used to render the h3 headers is considerably different from the default typeface shown earlier.

All paragraphs are also different: The typeface used to render both of the paragraphs is also considerably different from the default typeface shown in the earlier screen shot.

The h2 headers are unchanged: However, the new h2 header is rendered in the default style, because a rendering specification for h2 headers was not included in the style sheet. The style sheet provided rendering specifications only for h3 headers and paragraphs.

That’s a wap: Quoting that famous wabbit hunter and his pro basketball sidekick who make TV commercials for a long-distance carrier, “That’s a wap” for this week.

I’m going to leave you to ponder all of this until next week.

Coming attractions...

Next week, I will provide additional details on the construction of a style sheet. In subsequent lessons, I will discuss the use of style sheets with XML and IE5 to cause the display format to be something other than the default tree format shown in earlier articles.

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.

rev0001082221

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-