Create a Style Sheet for Your XML Page


When you write your XML code and display it, only the structure of your data will display. If you want your page to look like a Web page, you have to write a style sheet for it. Fortunately, you are again on familiar ground because you can use CSS to create the styles for your XML page. There are other style sheet languages you can use, such as eXtensible Stylesheet Language (XSL), but because you are familiar with CSS already (if you’ve been working through this book), CSS will be fine for this example.

Design Your Style Sheet

You design the style sheet for your page essentially the same way you would for an HTML page but with a few differences. The primary difference is that you will be specifying styles for your own selectors (elements) rather than for HTML elements. Another important difference in using style sheets with XML is that you can’t take anything for granted. You must specify how you want each element to display, where it should be positioned, how large the margins are, and so on. If you leave the browser to itself, it will display everything in a linear fashion, as in the following illustration:

click to expand

To avoid this problem, you need to use CSS to position the elements on the page.

As you go through the following steps, you will need a background image to include on the page, as well as an image for the logo.

Note

As with each chapter, you can find the files you need on the author’s Web site at www.jamespence.com.

The following style rules are in the order the elements occur on the page, but you can write them in whatever order you want:

  • For your “root” element, “webpage,” specify a background color of white (#ffffff) and include a background image for the page. Set the background image to repeat, so that it will function as “wallpaper,” and set the background attachment to “fixed.” A width and height set to 100% will fill the browser screen. Set the display property to “block.” Add a little space to the bottom margin by setting it to 20px (pixels):

                       webpage  {display: block;                    background-color: #ffffff;                    background-image: url(weavetile2.gif);                    background-repeat: repeat;                    width=100%;                    height=100%;                    margin-bottom: 20px;}
  • For the <heading> element, set the display to “block” and set a font family, size, and color for the <heading> element. Align the text to the center of the page. For fun, give it a border and its own background color. As a final touch, add a margin of 10 pixels all the way around:

                    heading  {display: block;                 font-family: arial;                 font-size: 2em;                 color: maroon;                 text-align: center;                 border-style: inset;                 border-color: brown;                 background-color:#ffcc99;                 margin: 10px;}
  • For the <para1> element, set the display property to “block.” Use the CSS position property set to a value of “absolute,” and the z-index property set to a value of –3. A bold “fantasy” font will give this element a little different look. Don’t use a background color for this element, but set the text color to “brown.” Also, make some adjustments to the top, left, and bottom margins to better size and position the element:

                   para1    {display: block;                position: absolute;                z-index: -3;                font-family: fantasy;                font-weight: bold;                font-variant: italic;                font-size: 1.5em;                color: brown;                margin-top: 15px;                margin-bottom: 10px;                margin-left: 50px;}
  • For the <logo> element, the only settings that are unique are the “top” and “left” properties, which refer to the position of the logo image, and the “height” and “width” properties, which specify its size. A z-index of “1” ensures that the logo does not overlap any of the text in either the <para1> or <para2> element:

                  logo     {display: block;               position: relative;                z-index: 1;               top: 55px;               left: 280px;               height:200px;               width:200px;               background-image: url(xmllogo.gif);               background-position: center;               background-color: white;}
  • For the <para2> element, set the font size to 1.5 ems and the text to dark green. Align this text with the right margin, but add 50 pixels to the right margin to move the text toward the left:

                   para2    {display: block;                position: relative;                z-index: 2;                font-family: Times-New-Roman;                color: #336600;                font-size: 1.5em;                text-align: right;                margin-top: 15px;                margin-bottom: 15px;                margin-right: 50px;} 
  • For the <closing> element, set the font to cursive, the font size to 1.75 ems, the text to yellow, and the background color to brown. Align this text in the center of the page. A little padding on the top and bottom gives the text some breathing room:

                   closing  {display: block;                font-family: cursive;                color: #ffff66;                font-size: 1.75em;                background-color: brown;                text-align: center;                margin-top:30px;                margin-bottom: 10px;                margin-left: 100px;                margin-right: 100px;                border-style: inset;                border-color:#ffff66;                padding-top: 10px;                padding-bottom: 10px;}

Your completed style sheet should look like this:

          webpage  {display: block;           background-color: #ffffff;           background-image: url(weavetile2.gif);           background-repeat: repeat;           background-attachment: fixed;           width=100%;           height=100%;           margin-bottom: 20%;}           heading  {display: block;           font-family: arial;           font-size: 2em;           color: maroon;           text-align: center;           border-style: inset;           border-color: brown;           background-color:#ffcc99;           margin: 10px;}           para1    {display: block;           position: absolute;           z-index: 3;           font-family: fantasy;           font-weight: bold;           font-variant: italic;           font-size: 1.5em;           color: brown;           margin-top: 15px;           margin-bottom: 10px;           margin-left: 50px;}           logo     {display: block;           position: relative;            z-index: 1;           top: 55px;           left: 280px;           height:200px;           width:200px;           background-image: url(xmllogo.gif);           background-position: center;           background-color: white;}           para2    {display: block;           position: relative;           z-index: 2;           font-family: Times-New-Roman;           color: #336600;           font-size: 1.5em;           text-align: right;           margin-top: 15px;           margin-bottom: 15px;           margin-right: 50px;}           closing  {display: block;           font-family: cursive;           color: #ffff66;           font-size: 1.75em;           background-color: brown;           text-align: center;           margin-top:30px;           margin-bottom: 10px;           margin-left: 100px;           margin-right: 100px;           border-style: inset;           border-color:#ffff66;           padding-top: 10px;           padding-bottom: 10px;} 

Save your style sheet as webpage.css. Remember to save it as a plain text file, particularly if you are writing it in a word processor. When you’ve saved your style sheet, your next step is to link your XML page to it.

Link to Your Style Sheet

To link to the style sheet you just created, you need to add one more line to your XML file. Like the XML declaration mentioned earlier in this chapter, this is a processing instruction, so it begins with a question mark (?) followed by an instruction that identifies the tag as a “link” to a style sheet: <?xml-stylesheet?>. Next add a hypertext reference (href=" ") that points to the location of webpage.css. Finally, define the type of style sheet by adding the type=" " attribute. The value should be text/css. Your style sheet link should look like this:

<?xml-stylesheet href="webpage.css" type="text/css"?>.

This line should be inserted in your webpage.xml document just below the XML declaration, as in the following listing:

<?xml version="1.0"?> <?xml-stylesheet href="webpage.css" type="text/css"?> <!DOCTYPE webpage [<!ELEMENT webpage (heading, para1, logo, para2, closing)> <!ELEMENT heading (#PCDATA)> <!ELEMENT para1 (ANY)> <!ELEMENT logo (ANY)> <!ELEMENT para2 (ANY)> <!ELEMENT closing (#PCDATA)> ]>> <webpage>   <heading>Welcome to my XML page</heading>   <para1>This is my page of the future.</para1>   <logo> </logo>   <para2>It is written in XML.</para2>   <closing>Good bye!</closing> </webpage>

After you’ve included the style sheet link, save the page. Make sure that the image you chose for your background image is located in the same directory as your XML page, and you’re ready to display it in your browser. When you bring it up, it should look something like this:

click to expand




How to Do Everything with HTML & XHTML
How to Do Everything with HTML & XHTML
ISBN: 0072231297
EAN: 2147483647
Year: 2003
Pages: 126

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net