XML and IE5, Part 4

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

Dateline: 1/21/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 have shown you a couple of examples involving the use of the default tree style provided by IE5. I also showed you how to create a very simple style sheet and cause it to control the display of an HTML file in your browser. I promised to discuss the fact that IE5 supports style sheets written in either CSS or XSL.

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.

Leading up to that objective, the previous article and this one as well discuss Cascading Style Sheets (CSS).

At this point, I am 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.

When I start showing you how to experiment with XML and CSS, you will need to be using IE5.

A previous example: In the previous article, I showed you how to use the following simple style sheet to control the rendering of h3 headers and paragraphs in an HTML document. I also showed that this style sheet didn’t have any effect on the other elements in the document, such as h2 headers.

<STYLE type="text/css">

</STYLE>

Time for some technical details: The time has come to start providing an explanation of the above style sheet, and style sheets in general.

According to one author,

“Style sheets ... are groups of styles, which in turn are groups of properties that define how an HTML element appears in a Web browser”

Where are style sheets defined? You can define the styles either within the document or in an external file. As I indicated in an earlier article, the external file can be defined in an XML document as a URL.

One of the advantages of defining the style sheet as a separate file is that the same style sheet can be used to control the style of many different files. This makes it easy to control the look and feel of all the files on an entire site, for example.

Why cascading style sheets? More than one style sheet can be used on the same document. If you define conflicting styles for the same element, the one most recently encountered controls the rendering. Click here to learn more about this aspect of CSS.

How do style sheets work? Suppose you want to define a style for all h3 elements in a document (as in the following excerpt from a style sheet).

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

The selector: This begins our discussion of the format of the style sheet. In this case, h3 is known as the selector.

Style definition: The selector is followed by a style definition. The style definition defines the style for that selector. So, once the style shown above is applied to the document, every h3 element in the document will be rendered in the font, style, and color shown (unless overridden by a different closer style as discussed here).

List of fonts: You may have noticed that the style excerpt shown above differs from the one shown earlier, which lists several different fonts separated by commas. That earlier format allows the browser to have several different font options. If the first font listed is not available, an attempt will be made to use the second one, etc.

Style definition format: As you can see, the style definition is enclosed in a pair of curly braces {}, and the overall format becomes pretty intuitive. Once you learn about all the things that can be included in the style definition, you will be well on your way.

I don’t mean to indicate by this that CSS is an easy topic to learn. There are many issues involved, and someone who really knows how to use style sheets can accomplish some remarkable presentation formats.

CSS reference table: A reference table that illustrates some of the complexity associated with style sheets can be found at this URL.

Not an in-depth study: As I mentioned in an earlier article, this is not intended to be an in-depth study of CSS. Rather, the purpose is to teach you just enough about them that you can create your own style sheets for use with XML documents.

That’s a wrap for this week: I’m going to wrap it up for this week and leave you to ponder on these things. Until next week ...

Coming attractions...

Next week, I will probably provide some 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.

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-

rev0001090619