Chapter: XML and Web Services : Building XML-Based Applications : Formatting XML for the Web

XML Presentation Using CSS

XML Presentation Using CSS

Interestingly enough, CSS actually works better with XML than it does with HTML. This is because XML has none of the problems that CSS was designed to correct— namely the mingling of data structure and data formatting in HTML. Because XML has no data formatting included in its specification, CSS works perfectly with XML. Structure and formatting are totally separated. Listing 11.6 shows a style sheet that could be used with an XML document to format XML data for display in a Web browser. The code for this listing, notestyle.CSS, can be downloaded from the Sams Web site.

LISTING 11.6 CSS for an XML Document

Note

{

display: block

}

From, To

{

display:block; font-family:verdana; font-size:15px; margin-bottom:5px

}

Subject

{

display:block;

font-family:verdana; font-size:13px; font-weight:bold; margin-bottom:10px

}

Body

{

display:block; font-family:verdana; font-size:12px

}

In this listing are five style selectors: Note, From, To, Subject, and Body. Each selector listed represents the name of an XML element. The styles associated with each selector will be applied to XML elements that have matching names (that is, styles associated with the Note selector would be applied to an XML element with the name Note). Notice that two of the selectors, From and To, are grouped by being listed in a sequence sepa-rated by a comma. Selectors may be grouped this way to indicate that they will have the same style settings.

A CSS style sheet may be attached to an XML document through the use of the special XML processing instruction <?xml-stylesheet?>. There are two attributes to the xml-stylesheet processing instruction: type and href. The type attribute sets the MIME type for the CSS style sheet. Its value should always be text/css. The href attribute gives the URL for the location of the CSS style sheet. Listing 11.7 demonstrates linking the CSS style sheet from Listing 11.6 to an XML document. The code for this listing, notestyle.XML, can be downloaded from the Sams Web site.

LISTING 11.7 Applying CSS to an XML Document

<?xml version=”1.0”?> <!--

This is referencing the style sheet from Listing 11.6 – we are calling it notestyle.css here

-->

<?xml-stylesheet type=”text/css” href=”notestyle.css”?> <Note>

<From>From: Bob</From> <To>To: Jenny</To>

<Subject>Subject: Hello Friend!</Subject> <Body>Just thought I would drop you a line.</Body> </Note>

In Listing 11.7, the href attribute of the xml-stylesheet processing instruction assumes that the CSS style sheet is located in the same directory. The href attribute value could also be a relative URL or an absolute URL. You can see that Listing 11.7 is very similar to Listing 11.5, except that in this case the document is structured with XML rather than HTML. Figure 11.3 shows how Listing 11.7 looks in Internet Explorer 5.5.

The XML elements have been nicely formatted for display according to the rules of the style sheet. This is a handy, easy way to make XML data viewable over the Web. However, I am not advocating XML formatted with CSS to replace HTML. Only the newest browsers have this capability; therefore, you should only use this approach when you know that your target audience will be using a compatible Web browser. As you will see in the next section, HTML has been reformulated into an XML application. This has been done with the intention of making the use of XML for broader applications on the Web an easier transition. Before we go on to our coverage of XHTML, however, let’s take a look at one more way that CSS can be used with XML.

CSS also supports the use of “classes.” So far, we have seen CSS applied to specific ele-ments. It is also possible to create a CSS class that can be applied to specific elements and not others. This might be handy if you have a group of elements, each with the same name that you wish to display, but you want the formatting to vary from element to ele-ment (such as alternating background colors). Because the elements have the same name, you will need a different way to alternate formatting. Listing 11.8 demonstrates how you can accomplish this. The code for this listing, alternate.CSS, can be downloaded from the Sams Web site.

LISTING 11.8 Alternating Styles with Classes

Catalog

{

display:block

}

Item

{

display:block; margin-bottom:5px

}

Item.Odd

{

background:#dcdcdc

}

Name

{

display:block; font-family:verdana; font-size:14px; font-weight:bold

}

Description, Price

{

display:block; font-family:arial; font-size:12px

}

The CSS style sheet in this listing is similar to the CSS style sheet in Listing 11.6. The difference (other than the different element names) is that there has been a class added. You will notice that there is an Item selector and that a class called Odd has been added for the Item selector. Item elements that specifically reference the Odd class will have the style setting background:#dcdcdc applied to them. This class will give the effect of being able to alternate the background color of the XML document referencing this style sheet. Listing 11.9 is an XML document that references the style sheet in Listing 11.8. The code for this listing, alternate.XML, can be downloaded from the Sams Web site.

LISTING 11.9 Referencing the Alternating Styles CSS Class

<?xml version=”1.0”?> <!--

This is a reference to the style sheet in Listing 11.8

– It is referred to as alternate.css here -->

<?xml-stylesheet type=”text/css” href=”alternate.css”?> <!DOCTYPE Catalog [

<!ELEMENT Catalog (Item+) >

<!ELEMENT Item (Name,Description,Price) > <!ATTLIST Item Class CDATA #IMPLIED > <!ELEMENT Name (#PCDATA) >

<!ELEMENT Description (#PCDATA) > <!ELEMENT Price (#PCDATA) >

<Item Class=”Odd”> <Name>Gloves</Name>

<Description>10 oz. sparring gloves</Description> <Price>$29.99</Price>

</Item>

<Item>

<Description>Padded foam head protection for sparring</Description> <Price>$49.99</Price>

</Item>

<Item Class=”Odd”> <Name>Speed Bag</Name>

<Description>5 lb. punching bag</Description> <Price>$50.00</Price>

</Item>

<Item>

<Name>Heavy Bag</Name>

<Description>100 lb. punching bag</Description> <Price>$109.95</Price>

</Item>

<Description>Single weave Judo uniform</Description> <Price>$59.95</Price>

</Item>

<Item>

<Name>Karate Dogi</Name>

<Description>Light weight karate uniform</Description> <Price>$19.95</Price>

</Item>

</Catalog>

This listing is a bit more complex than some of the listings we have looked at so far, but if you break it down into pieces, you will see that it is very easy to follow. The second line of the document is the processing instruction, xml-stylesheet, that references the alternate.css style sheet. There is a DTD included in this listing that defines the struc-ture of the XML document. This is included for the purpose of demonstrating how the CSS class Odd (from Listing 11.8) will be referenced. In the DTD, the element Item has an optional attribute defined, Class. When this attribute is included for the element Item in the XML document and set to the value Odd, the style associated with the Odd class in the style sheet will be applied to the element. Figure 11.4 shows how this XML docu-ment will be rendered in Internet Explorer 5.5.

In the XML document (from Listing 11.9), all the odd-numbered Item elements have the optional attribute Class set to Odd. When rendered, this has the effect of making ever other Item element have a silver background. This definitely makes it much easier to quickly view the items in this catalog.

We have now seen a couple ways that CSS can be applied to XML. However, as I men-tioned previously, don’t be too quick to jump on the XML bandwagon for displaying your data on the Web! The Web browser vendors (and users) are still working on catch-ing up. Unless you have a captive audience, such as in an intranet setting, using XML as demonstrated here is probably not a good idea yet. In order to help ease along the transi-tion to XML, the W3C organization has created XHTML—and that is what we will look at next.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

XML and Web Services : Building XML-Based Applications : Formatting XML for the Web : XML Presentation Using CSS |