Some Examples Using CSS Styling

If your XML data is structured as you want to display it, you can effectively use CSS to display XML content.

Listing 13.1 shows a CSS style sheet to display heading information in red and paragraph text in a smaller, black font.

Listing 13.1. Reports.css: A CSS Style Sheet to Display Reports Stored in XML
header{font-family:Arial, sans-serif; 
         font-size:18; 
         color:blue;} 
content{ {font-family:"Times New Roman", serif; 
         font-size:12; 
          color:black;}

The XML source document is shown in Listing 13.2.

Listing 13.2. Reports.xml: A Brief XML Data Store of Reports
<?xml version='1.0'?> 
<?xml-stylesheet href="Reports.css" type="text/css" ?> 
<Reports> 
<Report> 
 <header>Some interesting report</header> 
 <content>Some fascinating content.</content> 
</Report> 
<Report> 
 <header>Another interesting report</header> 
 <content>Yet more fascinating content.</content> 
</Report> 
</Reports>

The xml-stylesheet processing instruction associates the XML document with the Reports.css CSS style sheet.

Figure 13.1 shows the onscreen appearance when Listing 13.2 is displayed in the Mozilla 1.0 browser.

Figure 13.1. Basic CSS display with all element content on same line.


The display in Figure 13.1 is pretty rudimentary. It doesn’t even split headings (in blue) into separate lines from the content of an individual report. That limitation in XML documents occurs because some effects seemingly produced by CSS in HTML Web pages are the result of the characteristics of the HTML elements, such as the h1 element or the p element, which automatically create a block display.

Listing 13.3 shows how you can modify the CSS style sheet, using the display property, to display the content of each element on a separate line.

Listing 13.3. Reports2.css: Adding Block Display to the CSS Style Sheet
header{font-family:Arial, sans-serif; 
         font-size:18; 
         color:blue; 
         display:block;}  
content{ {font-family:"Times New Roman", serif; 
         font-size:12; 
         color:black; 
         display:block;}

After the XML file has been amended to point to the revised CSS file, the onscreen appearance in the Mozilla browser should look like Figure 13.2. The altered XML document, Reports2.xml, is available in the code download.

Figure 13.2. Appearance after the CSS has been modified to specify block display.


If you want to target only browsers that fully support CSS2, you can use absolute positioning to further refine the appearance onscreen. But, in practice, you will run into a problem when you want to reorder elements or display certain elements only. Of course, you can begin to modify the source XML document and add class attributes to enable you to hide a class by specifying display:none in a rule. However, taking that approach is ill advised. You are beginning to modify the structure of your content to control presentation, which is where HTML caused difficulties. It’s an approach that runs against the principles that XML was designed to follow.

Rather than stretching CSS and modifying XML documents to accommodate CSS’s limitations, it makes more sense, at least for the moment, to use CSS in conjunction with XSLT.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset