Sams Teach Yourself XML in 21 Days

Recommended Book 

Creating Style Rule Specifications in Style Sheets

As discussed earlier today, a style sheet rule is made up of a selector followed by a style rule specification in curly braces, like this:

title {display: block; font-size: 36pt; font-weight: bold;
text-align: center; text-decoration: underline}

As mentioned earlier today, the style rule specification is a list of property/value pairs that are separated by semicolons. For example, you can assign the display property the value block, the font-size property the value 36pt (for 36 points), and so on.

Note that when you assign values to CSS properties, you can specify a size or a length by using points, indicated with the pt suffix (for example, 36pt) or pixels (for example, 20px). Theoretically, browsers are also supposed to be able to handle measurements in inches (suffix in), centimeters (suffix cm), millimeters (suffix mm), and picas (1/₆ inch; suffix pc). If you omit the suffix for a length, pixels are assumed. Also, note that when you specify positions, the origin is at the upper left of the display window (not at the lower right, as many people expect). That is, positive x increases to the right, and positive y increases downward.

To understand how to create style rule specifications, you need to know what CSS properties are available. The CSS specifications list many of them, and only by knowing what properties are available can you know how to create style rule specifications. You'll take a look at some of the possibilities in the rest of today's discussion.

Creating Block Elements

Today you have already used the display property, which you can see in action in the following example:

   title {display: block; font-size: 36pt; font-weight: bold;

       text-align: center; text-decoration: underline}

   philosopher {display: block; font-size: 16pt;

       text-align: center}

   book {display: block; font-size: 28pt; text-align: center;

       font-style: italic}
paragraph {display: block; margin-top: 10}

As mentioned earlier today, when you assign the display property the value block, the corresponding element will be formatted in a block, which means that the data from the element will start on a new line, and the data from the next element will start on its own line as well. In HTML, this creates what's called a block-level element.

Specifying Text Styles

As you might expect, there are plenty of style properties that you can use with text. Here's a sampling:

• font-family — Specifies the font face. You can list a number of options, separated by commas. The first face supported by the browser will be used.
• font-size — Specifies the size of the font. You can set this property to a size; for example, 36pt is 36 points.
• font-style — Specifies whether to use normal, italic, or oblique face.
• font-weight — Specifies the boldness of text relative to other fonts in the same font family. You can set it to bold for bold text.
• line-height — Specifies the height of each line of text. You can set it to an absolute size or to a percentage, such as 150% (which creates 1¹/2 spacing).
• text-align — Specifies the alignment of text. You can assign this property values such as left, right, center, and justify.
• text-decoration — Specifies underlining and overlining. You can set it to underline, overline, line-through, or blink; to get rid of text inherited decorations, you can set it to none.
• text-indent — Specifies the indentation of the first line of block-level elements. You can set it to a size.
• text-transform — Specifies whether to display text in all uppercase, in all lowercase, or with initial letters capitalized. The possible values for this property are capitalize, uppercase, lowercase, and none.
• vertical-align — Specifies the vertical alignment of text. You can set this property to baseline, sub, super, top, text-top, middle, bottom, or text - bottom.

You've already used a number of these properties in style sheets, and now you know what they stand for. You haven't specified the font face yet, however, so take a look at ch08_12.css (shown in Listing 8.12), which indicates to use centered 12-point Arial font (or Times New Roman, if the system doesn't have Arial installed).

Example 8.12. Using Font Styles (ch08_12.css)

title {display: block; font-size: 36pt; font-weight: bold;
    text-align: center; text-decoration: underline}
philosopher {display: block; font-size: 16pt;
    text-align: center}
book {display: block; font-size: 28pt; text-align: center;
    font-style: italic}
paragraph {display: block; font-size: 12pt; font-family:

   Arial, Times New Roman; text-align: center; margin-top: 10}

Figure 8.8 shows what this new style sheet, ch08_12.css, looks like applied to an XML document.

Styling Colors and Backgrounds

There are a number of properties that you can use to set color and work with backgrounds; here's a sampling:

• background-attachment — Specifies whether the background scrolls with the rest of the document.
• background-color — Specifies the background color. You can set this property to a color.
• background-image — Specifies the background image. You can set this property to a URL.
• background-repeat — Specifies whether the background image should be tiled. You can set this property to repeat, repeat-x, repeat-y, or no-repeat.
• color — Specifies the foreground color (that is, the color of text).

Listing 8.13 shows an example, ch08_13.css, in which the style sheet sets the background color of the document to light green. Because all the other elements in the document are child elements of the <document> element, they also inherit the same coloring, as shown in Figure 8.9 (in glorious black and white). In fact, that's where the name cascading style sheets come from—the cascading part means that enclosed elements inherit styles from enclosing elements. This example also sets the color of <paragraph> text to red. You can see the style sheet that does all this in Listing 8.13.

Example 8.13. Using Color Styles (ch08_13.css)

   document {background-color: lightgreen}
title {display: block; font-size: 36pt; font-weight: bold;
    text-align: center; text-decoration: underline}
philosopher {display: block; font-size: 16pt;
    text-align: center}
book {display: block; font-size: 28pt; text-align: center;
    font-style: italic}
paragraph {display: block; color: red}

Today you have been using color names such as cyan, coral, and lightgreen because Internet Explorer understands those names. Dozens of these types of color names are built in to browsers such as Internet Explorer and Netscape Navigator, but there are actually only 16 color names built into the CSS standard. Here they are:

• aqua
• black
• blue
• fuchsia
• gray
• green
• lime
• maroon
• navy
• olive
• purple
• red
• silver
• teal
• white
• yellow

When you work with HTML browsers, you can define your own colors as standard HTML color triplets, using this syntax:

#rrggbb

where rr, gg , and bb are two-digit hexadecimal values that you use to specify the red, green, and blue components of a color. For example, black is #000000, white is #ffffff, pure red is #ff0000, and orange is #ffcc00. Using colors like these, here's how you might format the background of the <document> element and its child elements green:

document {background-color: #00ff00}

Styling Borders

You can format the borders of block elements by using a number of styles. Here is a sampling of the border properties that are available for block elements:

• border-bottom-width — Specifies the width of the bottom of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick.
• border-color — Specifies the color to use for the border (using a predefined color or a color triplet). Setting this property sets the color of the whole border.
• border-left-width — Specifies the width of the left edge of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick.
• border-right-width — Specifies the width of the right edge of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick.
• border-style — Specifies the border style. You can set this property to dotted, dashed, solid, double, groove, ridge, inset, or outset. Most browsers support only solid.
• border-top-width — Specifies the width of the top of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick.
• border-width — Specifies the width of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick.

Listing 8.14 shows an example in which you add a solid border to the <title> element.

Example 8.14. Using Border Styles (ch08_14.css)

   title {display: block; font-size: 36pt; font-weight: bold;

       text-align: center; text-decoration: underline;

       border-style: solid}
philosopher {display: block; font-size: 16pt;
    text-align: center}
book {display: block; font-size: 28pt; text-align: center;
    font-style: italic}
paragraph {display: block; margin-top: 10}

Figure 8.10 shows what Listing 8.14 looks like in Internet Explorer. As the figure shows, the border appears around the title as it should.

It's also worth noting that the border style lets you set an element's width, style, and color. For example, here's how you can use it to create a solid 6-point-thick red border:

P {border 6pt solid red}

Styling Alignments

You can customize alignments and margins. Here's a sampling of applicable properties:

• line-height — Specifies the height of each line. You can set this property to an absolute size or to a percentage, such as 150% (which creates 1¹/2 spacing).
• margin-bottom — Specifies the bottom margin of a block element. You can set this property to a size.
• margin-left — Specifies the left margin of a block element. You can set this property to a size.
• margin-right — Specifies the right margin of a block element. You can set this property to a size.
• margin-top — Specifies the top margin of a block element. You can set this property to a size.
• text-align — Specifies the alignment of text. You can set this property to left, right, center, or justify.
• text-indent — Specifies the indentation of the first line of block-level elements. You can set this property to an absolute value such as 12px (12 pixels) or 6pt (6 points).
• vertical-align — Specifies the vertical alignment of text. You can set this property to baseline, sub, super, top, text-top, middle, bottom, or text-bottom.

Listing 8.15 shows an example that indents the text in <paragraph> elements and moves it all to the right by setting a left margin of 20 pixels.

Example 8.15. Using Margin Styles (ch08_15.css)

title {display: block; font-size: 36pt; font-weight: bold;
    text-align: center; text-decoration: underline}
philosopher {display: block; font-size: 16pt;
    text-align: center}
book {display: block; font-size: 28pt; text-align: center;
    font-style: italic}
paragraph {display: block; text-indent: 30px; margin-left: 20;

       margin-top: 10}

Figure 8.11 shows what Listing 8.15 looks like in Internet Explorer. The figure shows that the text is indeed formatted as it should be—each paragraph is indented, and the whole paragraph of text has been moved to the right.

Note that, as with other styles, support for border and margin styles varies by browser. For example, Netscape Navigator doesn't support many margin styles.

Styling Images

You can even display images in some browsers while formatting XML documents. Here's a sampling of the applicable properties:

• background-image — Specifies a background image for the element. You can set this property to a URL.
• background-repeat — Specifies whether the background image should be tiled in a repeating fashion. You can set this property to repeat, repeat-x, repeat-y, or no-repeat.
• background-attachment — Specifies whether the background scrolls when the rest of the document is scrolled.
• background-position — Specifies the initial position of the background image. You can set this property to an x,y coordinate, keeping in mind that the origin is at the upper left (for example, background-position: 10px 20px).

For example, you could add a background image when you style the XML document by using the background-image property. In this case, you need to supply the URL at which the browser can find the image, and you can do that when you style the <paragraph> element, as shown in Listing 8.16.

Example 8.16. Using Image Styles (ch08_16.css)

title {display: block; font-size: 36pt; font-weight: bold;
    text-align: center; text-decoration: underline}
philosopher {display: block; font-size: 16pt;
    text-align: center}
book {display: block; font-size: 28pt; text-align: center;
    font-style: italic}
paragraph {display: block; margin-top: 10px;

       background-image: url(image.jpg);

       background-repeat: repeat}

For example, you'll use an image file, image.jpg, that displays a star in light gray. (This image file is included in the downloadable code for this book.) Because this image will appear behind paragraph text, you can condense all the <paragraph> text into one element for this example (see Listing 8.17) so that you can see the background image clearly.

Example 8.17. Using One <paragraph> Element (ch08_17.css)

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="ch08_16.css"?>
<document>
    <title>The Discourses</title>
    <philosopher>Epictetus</philosopher>
    <book>Book Four</book>
    <paragraph>
        He is free who lives as he wishes to live; who is neither
        subject to compulsion nor to hindrance, nor to force;
        whose movements to action are not impeded, whose desires
        attain their purpose, and who does not fall into that which
        he would avoid.
        Who, then, chooses to live in error? No man. Who chooses
        to live deceived, liable to mistake, unjust, unrestrained,
        discontented, mean? No man.
        Not one then of the bad lives as he wishes; nor is he,
        then, free. And who chooses to live in sorrow, fear, envy,
        pity, desiring and failing in his desires, attempting to
        avoid something and falling into it? Not one.
        Do we then find any of the bad free from sorrow, free from
        fear, who does not fall into that which he would avoid, and
        does not obtain that which he wishes? Not one; nor then do
        we find any bad man free.
   </paragraph>
</document>

Figure 8.12 shows what Listing 8.17 looks like in Internet Explorer. As the figure shows, the background star appears behind the text.

In addition to using an image as a background image, you can also display an image as a foreground image, as you would in any Web page. To do that, you create a custom element whose express purpose is to display the image.

For example, you'll create an image element named <image> and make it display the image by using the CSS property background-image. You can also specify the height and width to use when displaying an element by using the CSS properties height and width (you can use 60x100 pixels, which is the size of image.jpg). Finally, you can indicate whether the image will float to the right or left of text by using the float property, which is shown to the left in Listing 8.18.

Example 8.18. Styling a Foreground Image (ch08_18.css)

title {display: block; font-size: 36pt; font-weight: bold;
    text-align: center; text-decoration: underline}
philosopher {display: block; font-size: 16pt;
    text-align: center}
book {display: block; font-size: 28pt; text-align: center;
    font-style: italic}
paragraph {display: block; margin-top: 10}
image {background-image: url(image.jpg);

       height: 60px;

       width: 100px;

       float: left}

You can see the new <image> element in the new version of the XML document, ch08_19.xml, in Listing 8.19.

Example 8.19. Displaying a Foreground Image (ch08_19.xml)

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="ch08_18.css"?>
<document>
    <title>The Discourses</title>
    <philosopher>Epictetus</philosopher>
    <book>Book Four</book>
    <image/>
    <paragraph>
        He is free who lives as he wishes to live; who is neither
        subject to compulsion nor to hindrance, nor to force;
        whose movements to action are not impeded, whose desires
        attain their purpose, and who does not fall into that which
        he would avoid.
        Who, then, chooses to live in error? No man. Who chooses
        to live deceived, liable to mistake, unjust, unrestrained,
        discontented, mean? No man.
        Not one then of the bad lives as he wishes; nor is he,
        then, free. And who chooses to live in sorrow, fear, envy,
        pity, desiring and failing in his desires, attempting to
        avoid something and falling into it? Not one.
        Do we then find any of the bad free from sorrow, free from
        fear, who does not fall into that which he would avoid, and
        does not obtain that which he wishes? Not one; nor then do
        we find any bad man free.
   </paragraph>
</document>

Figure 8.13 shows Listing 8.19 in Internet Explorer. As shown in the figure, the image is now positioned so that it appears in the foreground, and it floats to the left of the text.

All this is fine if you want to let the browser position an image as it likes when it determines the text flow in its display, but you can also specify exactly where you want images and other elements to appear by expressly positioning elements, as discussed in the following section.

Positioning Elements

By using CSS, you can set the positions of elements—and this was a big advance in HTML. Before CSS let you position items in a Web page, HTML authors used HTML tables to make sure that elements were at the correct locations rather than floating as the Web browser determined. Now, however, you can use CSS to specify positions in HTML and XML.

To specify position, you use the CSS positioning properties. Here's a sampling of the positioning properties that are available:

• position — Specifies an element's position. You can set this property to either absolute or relative.
• top — Specifies the location of the top of the element.
• bottom — Specifies the location the bottom of the element.
• left — Specifies the location of the left edge of the element.
• right — Specifies the location of the right edge of the element.

For example, say that you want to place the star image right on top of the middle of your text. To do that, you can set the position property of the <image> element to absolute and assign values to the top and left properties, as shown in Listing 8.20.

Example 8.20. Positioning a Foreground Image (ch08_20.css)

title {display: block; font-size: 36pt; font-weight: bold;
    text-align: center; text-decoration: underline}
philosopher {display: block; font-size: 16pt;
    text-align: center}
book {display: block; font-size: 28pt; text-align: center;
    font-style: italic}
paragraph {display: block; margin-top: 10}
image {background-image: url(image.jpg);

       height: 60px; width: 100px; position:absolute;

       left:250; top:180}

Figure 8.14 shows Listing 8.20 in Internet Explorer. In the figure, the image appears right on top of the text. In fact, you can even position text on top of other text. As shown in the figure, absolute positioning lets you specify the exact location of data items from an XML document in the final display.

Besides absolute positioning, there's another option—relative positioning. In relative positioning, you position items relative to the locations they would have in the usual flow of elements as the browser would display them. In this case, you set the position property to relative.

To see how this works, take a look at Listing 8.21, which formats two new elements, <superscript> and <subscript>, to raise and lower text from its normal flow.

Example 8.21. Displaying a Foreground Image (ch08_21.css)

title {display: block; font-size: 36pt; font-weight: bold;
    text-align: center; text-decoration: underline}
philosopher {display: block; font-size: 16pt;
    text-align: center}
book {display: block; font-size: 28pt; text-align: center;
    font-style: italic}
paragraph {display: block; margin-top: 10}
superscript {position:relative; top:-5}

   subscript {position:relative; top:5}

Now you can put the <superscript> and <subscript> elements to work in an XML document, as shown in Listing 8.22, which includes a few changes to Epictetus' original text. Note that because you haven't made <superscript> and <subscript> block elements, you can use them inline (that is, you don't have to give each of these elements its own line of text, as you do for block elements), as in this example.

Example 8.22. Using Relative Positioning (ch08_22.xml)

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="ch08_21.css"?>
<document>
    <title>The Discourses</title>
    <philosopher>Epictetus</philosopher>
    <book>Book Four</book>
    <paragraph>
        He is free who lives as he wishes to live; who is neither
        subject to compulsion nor to hindrance, nor to force;
        whose movements to action are not impeded, whose desires
        attain their purpose, and who does not fall into that which
        he would avoid.
    </paragraph>
    <paragraph>
        Who, then, chooses to live on <subscript>roller</subscript>

           <superscript>coasters</superscript>? No man. Who chooses
        to live deceived, liable to mistake, unjust, unrestrained,
        discontented, mean? No man.
    </paragraph>
    <paragraph>
        Not one then of the bad lives as he wishes; nor is he,
        then, free. And who chooses to live in sorrow, fear, envy,
        pity, desiring and failing in his desires, attempting to
        avoid something and falling into it? Not one.
    </paragraph>
    <paragraph>
        Do we then find any of the bad free from sorrow, free from
        fear, who does not fall into that which he would avoid, and
        does not obtain that which he wishes? Not one; nor then do
        we find any bad man free.
   </paragraph>
</document>

Figure 8.15 shows Listing 8.22 in Internet Explorer, with the <superscript> and <subscript> elements used in the first line of the second paragraph.

Styling Lists

You can show HTML-style lists in some browsers when you format an XML document. Here's a sampling of the applicable properties:

• list-item — Creates a list when assigned to the display property.
• list-style-image — Specifies the image that should appear in front of each item in the list. This property is not supported by many browsers.
• list-style-type — Specifies the list item marker, which appears before each list item. You can set this property to various values, such as disc, circle, square, decimal, lowercase Roman, and uppercase Roman. Not all values are supported by all browsers.

For example, you can turn the paragraphs in the earlier example into a list and display a circle before each paragraph. You can see how this works in Listing 8.23.

Example 8.23. Using Relative Positioning (ch08_23.css)

title {display: block; font-size: 36pt; font-weight: bold;
    text-align: center; text-decoration: underline}
philosopher {display: block; font-size: 16pt;
    text-align: center}
book {display: block; font-size: 28pt; text-align: center;
    font-style: italic}
paragraph {display:list-item; margin-left: 10px;

       margin-top:10; list-style-type: circle}

Figure 8.16 shows Listing 8.23 in Internet Explorer. As you can see, a small circle does indeed appear before each paragraph's text.

Styling Tables

When it comes to displaying the data in an XML document, using tables is a very popular option. Visually, it's easier to see all your data arrayed horizontally and vertically in tabular format than in an XML document, where you have to look past the markup. Here are the table-styling properties you can assign to the display property:

• table — Indicates that an element encloses a table. Translates to the HTML <table> element.
• table-caption — Gives a caption for the table.
• table-cell — Creates a table cell. This property translates to the HTML <td> element.
• table-column — Indicates that an element describes a column of cells.
• table-column-group — Indicates that an element groups one or more columns.
• table-footer-group — Indicates a table footer group.
• table-header-group — Indicates a table header group.
• table-row — Creates an element that contains a row of cells. This property translates to the HTML <tr> element.
• table-row-group — Indicates that an element groups one or more rows.

To see how this works in an example, you need some data that can be displayed as a table. For example, you can use the mortgage data shown in Table 8.1, which lists various borrowers and the amounts they have borrowed. Listing 8.24 shows this data in XML format. As you can see, the XML document doesn't present its data nearly as effectively as the table does. Listing 8.25 converts the XML document into an HTML table.

Table 8.1. Mortgage Data

First Name	Last Name	Loan Amount
Fred	Turner	$100,000
Bill	Saunders	$120,000
Ed	Johnson	$130,000
Sam	Watson	$140,000
James	White	$150,000

Example 8.24. An XML Document That Holds Tabular Data (ch08_24.xml)

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="ch08_25.css"?>
<document>
  <headers>
    <header>First Name</header>
    <header>Last Name</header>
    <header>Loan Amount</header>
  </headers>
  <mortgages>
    <mortgage>
      <firstName>Fred</firstName>
      <lastName>Turner</lastName>
      <amount>$100,000</amount>
    </mortgage>
    <mortgage>
      <firstName>Bill</firstName>
      <lastName>Saunders</lastName>
      <amount>$120,000</amount>
    </mortgage>
    <mortgage>
      <firstName>Ed</firstName>
      <lastName>Johnson</lastName>
      <amount>$130,000</amount>
    </mortgage>
    <mortgage>
      <firstName>Sam</firstName>
      <lastName>Watson</lastName>
      <amount>$140,000</amount>
    </mortgage>
    <mortgage>
      <firstName>James</firstName>
      <lastName>White</lastName>
      <amount>$150,000</amount>
    </mortgage>
  </mortgages>
</document>

Example 8.25. Styling XML Data into a Table (ch08_25.css)

document {display:table; border-style:solid}
headers {display:table-header-group;}
header {display:table-cell; padding:6px;
    background-color:lightblue; font-weight:bold;
    border-style:solid}
mortgages {display:table-row-group}
mortgage {display:table-row;}
firstName {display:table-cell; padding:6px;
    border-bottom:solid 1px}
lastName {display:table-cell;
    padding:6px; border-bottom:solid 1px}
amount {display:table-cell;
    border-bottom:solid 1px}

As you can see in Listing 8.25, you set the display property to table for the document element <document>, which will be converted to an HTML <table> element. Setting the CSS property display to table-row allows you to convert the <mortgage> elements to HTML <tr> elements, and so on. Figure 8.17 shows Listing 8.25 in Netscape Navigator. (Note that Internet Explorer doesn't handle this formatting well.) As the figure shows, the data appears in the browser as it should, in tabular form.