Using CSS Formatting with XML
Now that you have seen how CSS rules are formed and are familiar with some of the properties and values that you can manipulate to influence how your elements are displayed, we can look at an example of an XML document formatted with CSS.
Listing 7.1 shows a newspaper.xml document which we are going to format for display with CSS. This document is a regular, well-formed XML document, with only one special line, which is immediately following the XML Declaration. That line is
<?xml-stylesheet type="text/css" href="newspaper.css"?>
This line is a processing instruction, which is used to link our stylesheet to the XML document. It has two attributes, one of which is type that is used to specify the type of stylesheet being applied, which in this case is “text/css”. The second attribute is href, which is a URL that points to the location of the stylesheet, which in this case is just the name of the stylesheet because both files are in the same directory.
Listing 7.1. A newspaper.xml Document with a newspaper.css CSS Stylesheet Associated with It
With the XML document ready to go and linked to the stylesheet, we now have to create the newspaper.css file in order to display the file properly.
There are no special headers or declarations associated with a CSS stylesheet, so we can begin with our rules immediately. First, we will establish the rule for our root element, which all the children in the document will inherit. In this case, we are going to specify a general font family using "Times New Roman" and, if that is not available, a generic serif font. Next, we will create a solid border around the newspaper, 3 points wide, and with a 20-point padding area. Then, by setting the display property to block, we create the block in which this element will be displayed:
newspaper {
font-family: "Times New Roman", serif;
border-style: solid;
border-width: 3pt;
padding: 20pt;
display:block
}
Next, we want to format the masthead of our newspaper, The Web Times. First, we select the masthead element with our selector, and then we apply the font properties. In this case, we're going to make the masthead "Arial", a sans-serif font, 36 points, and in the color blue. Again, to apply the style settings, we will set the display to block:
masthead {
font-family: "Arial", sans-serif;
font-size: 36pt;
color: blue;
display: block
}
With the masthead formatted, we can now format the edition. This rule looks very similar to the masthead; however, with the edition, we will rely on inheriting the font-family from the newspaper parent. We'll also change the font style to italic and add a margin at the bottom of the element to introduce some whitespace to our design:
edition {
font-size: 24pt;
font-style: italic;
color: blue;
margin-bottom: 15pt;
display: block
}
Next, we're ready for the section header. For the section headers, we will also be inheriting our font-family, but we will still be manipulating the font-size and font-style. We also want to create a special effect with the section headers: a blue line that separates them from the text below. To create the blue line, we will make use of the border properties to essentially create a bottom border that is solid, blue, and 1 point wide. We'll also use the margin properties to add a bit of padding around our blue line:
header {
font-size: 18pt;
font-style: bold;
color: blue;
border-color: blue;
border-bottom-width: 1pt;
border-bottom-style: solid;
margin-top: 10pt;
margin-bottom: 5pt;
display: block
}
Now all the mastheads and section heads are formatted and we are ready to start formatting the section content. First, we will format the article headline, for which we will be selecting a new font-family and style. We will also add some margin padding to keep the headline separate from the byline:
headline {
font-family: "Arial", sans-serif;
font-size: 14pt;
font-style: bold;
margin-top: 10pt;
display: block
}
The byline formatting follows the same basic outline as the headline, but with a slightly smaller font and italic text, rather than bold:
byline {
font-family: "Arial", sans-serif;
font-size: 12pt;
font-style: italic;
display: block
}
Finally, we are ready for the story text itself. The story will inherit the font properties of the newspaper, although we will set the size at 12 points. We will also add some margins at the top and bottom, to separate the story from the byline and from the next story headline on the page:
story {
font-size: 12pt;
margin-top: 5pt;
margin-bottom: 5pt;
display: block
}
The one remaining thing we're going to do is to make use of one of the pseudo classes to add a bit of flourish to the page. In this case, we're going to use the :first-letter pseudo class in order to create a drop-cap at the start of each article. We can do this by setting the font-size at 18 points, which is larger than our story font size. Next, we will set the letter to float on the left. Then we will vertically align the letter with the top of the story text with vertical-align: text-top. Finally, we set the right margin to 2 pixels, so that the letter doesn't stand too far off from the article text:
story:first-letter {
font-size: 18pt;
float: left;
vertical-align: text-top;
margin-right: 2px
}
The result is a drop-cap letter at the start of every story.
When we bring all of these rules together into a stylesheet, the result is what you see in Listing 7.2.
Listing 7.2. The Complete newspaper.css CSS Stylesheet
When the original XML document is viewed in a browser that supports XML and CSS, the result is a document that is displayed in the browser in accordance with the rules in the XML document, as shown in Figure 7.1.
Figure 7.1. The newspaper.xml document as rendered in Internet Explorer with the newspaper.css stylesheet.
Of course, this stylesheet could be reused with other newspaper.xml documents as well, which is one of the benefits of stylesheets. As you can see, CSS is easy to work with, and does offer good flexibility and display potential.