XML and IE5, Part 5

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

Dateline: 1/28/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.

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, several articles are being written to discuss Cascading Style Sheets (CSS) in general.

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.

The CSS format: Let’s take a closer look at the CSS format. In general, the format consists of one or more selectors followed by style definitions as shown below.

h3 { font-family: arial; }

The selector: In this case, h3 is the selector. (h3 is an HTML tag, but other types of selectors are allowed as well.) This style will cause subsequent h3 elements to be rendered in the arial font-family.

Properties and values: The style definition is the combination of a property and its value separated by a colon. (Properties are the characteristics an element can have--such as font type, font size, or color -- while values are specific traits those properties can have--such as Arial, 24-point, or red.)

Multiple properties: Multiple properties can 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: Multiple values can be defined for a single property by separating them by commas as shown below.

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

Behavior for multiple values: This style offers the browser several values to choose from. In this case, the browser will go down the list until it finds a typeface that it recognizes. The first item in the list, arial, is the preferred typeface. The second item in the list, helvetica, is an alternate typeface in case the user’s system doesn’t support arial. The third item, sans-serif, is a generic style of font rather than a specific one. This is usually recommended as a last alternative because most systems have at least one typeface in that generic family.

If the browser is unable to find a match to anything in the list, it will use its default value.

Classes and IDs: You can 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. This will apply the style to the element bounded by that particular tag. This makes it possible to apply styles on a more selective basis than is possible when defining styles and associating them directly with specific tags.

Class format: You define a class by giving it a name that always begins with a period. Then you add a standard style definition consisting of properties and values inside a pair of curly braces.

ID format: The format for defining an ID is the same as for defining a class, except that you replace the period with a # character. I won’t attempt to go into the subtle differences between classes and IDs. Rather, I will simply refer you to another source for further study if you are interested.

Using classes and IDs: I’m going to wrap this article up by illustrating the use of classes and IDs. You can experiment with classes and IDs if you are using a modern browser that supports CSS.

Create a simple HTML file containing the following HTML text. This is an update to a simple HTML file discussed in a previous lesson. The new material in the file, which illustrates the use of classes and IDs, is highlighted in boldface.

<html>

<HEAD>

<STYLE type="text/css">

<!--

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 }

-->

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

<h2 class="classDemo">This is an h2 header modified by the classDemo class</h2>

<p id="idDemo">This is a paragraph modified by the idDemo ID.</p>

</body>

</html>

Definition of the class and the ID: The style sheet in this simple HTML file defines one class and one ID as shown below.

.classDemo { color: green}

#idDemo { color: blue }

The style for the class specifies that any element associated with the class will be rendered in the color green.

The style for the ID specifies that any element associated with the ID will be rendered in the color blue.

Application of the class and ID: The HTML applies the class to one h2 element as shown below. It also applies the ID to one paragraph element as shown below.

<h2 class="classDemo">This is an h2 header modified by the classDemo class</h2>

<p id="idDemo">This is a paragraph modified by the idDemo ID.</p>

Screenshot: A screenshot of my Netscape 4.7 browser when this HTML file is loaded is shown below.

Discussion of screenshot: Everything except the green and blue material at the end was discussed in an earlier article. For purposes of this article, the most important part of the screen shot is the green h2 header and the blue paragraph.

The green and blue rendering was produced by defining and applying the classDemo class and the idDemo ID. This selectively modified the rendering of the header and paragraph to which they were applied without changing the rendering of the other h2 header and the other paragraphs.

View the source: If these articles on CSS have captured your interest, you might want to take a look at the source for this document. There you will see things like the following class definition.

p.MsoPlainText, li.MsoPlainText, div.MsoPlainText

{margin:0in;

margin-bottom:.0001pt;

font-size:10.0pt;

font-family:"Courier New";}

You will also see the application of the above class in HTML code such as the following

<p class=MsoPlainText><b>{margin:0in;</b></p>

This is the application of the defined class to produce the rendering of one of the lines in the above class definition in this document. I highlighted the corresponding material in boldface to make it easier to see the correspondence.

I didn’t create the CSS material in this document. Rather, it was automatically created by Microsoft Word 2000, which I used as a WYSIWYG HTML editor for the preparation of this document.

Bloated HTML: If CSS has a disadvantage, it is the fact that its use can result in bloated HTML documents. A review of the HTML source for this document shows that the Microsoft implementation produces very large amounts of control material in what would otherwise be a fairly simple HTML document. And what you are seeing is what Microsoft refers to as the Compact HTML format. The normal format of an HTML file produced by Word 2000 contains a lot more stuff.

I guess that is the price we pay for using a WYSIWYG HTML editor.

That’s a wrap: That wraps it for this week. Have a good week, and keep the XML octopus in the bottle.

Coming attractions...

Next week, I plan to discuss the use of CSS with XML and IE5 to cause the display format to be something other than the default tree format shown in earlier articles. 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-

rev0001090619