WEEK 4: USING CSS WITH XML

LINKS TO XML RELATED SITES

1. XML.COM
2. MSDN'S XML DEVELOPER SITE
3. IBM's XML WEBSITE
4. IBM'S ALPHAWORKS WEBSITE
5. W3 Schools XML Tutorial
6. Kickstart XML Tutorial

1. HTML and CSS CSS (Cascading Style Sheets) are nothing new. We have used CSS to enhance the presentation of HTML. In this example we have extended the <P> tag to display all text inside of it in red (#FF0000). Please note the use of <STYLE> tag to contain the CSS rules.
2. MORE CSS CSS, can extend almost all of the HTML elements. Here the <H1> tag has been extended.

1. STYLE elements We have seen how HTML elements are able to be extended by using the CSS, but what about XML elements? Unfortunately, there is no <STYLE> tag for a xml document, so how would we be able to define style? The solution is to use the Processing Instruction (PI) to tell the IE5 parser to use CSS to display the XML document. In this example we have illustrated the use of the color, and background-color to display the XML data. Please note if we had not placed this information on the XML document, IE5 would have displayed the elements and the data. Please note, to view the CSS click here.
2. display There was a property in the above CSS that we did not talk about. "display" is a property that can be assigned the following values: "inline", "block", and "none". In this example we have used two inline definitions to illustrate what inline means. Please note, to view the CSS click here.
3. block Now, we have repeated the same example as above, but instead we have defined "first_name", and "last_name" as "block" level elements. Please note, to view the CSS click here.
4. none Just to be complete we have now set the display value for "first_name", and "last_name" to "none". If you can not see anything, it means it works! Please note, to view the CSS click here.

1. Cells We like to display our data in a tabular format. The first thing we like to do is to create cells of data. This is nothing more than setting the display to inline and giving it a grey background (#CCCCCC). Please note, to view the CSS click here.
2. More Cells Adding another column only involves adding another tag and defining the style rules for it. Please note, to view the CSS click here.
3. Creating Rows We did not have to do anything to define a row this far. However, as you can see adding more "student" does not create a new row.
4. block + inline To create a pseudo row we have made "student" and inline tag and as a result every student will be on a new line and effectively creating a new row. Please note, to view the CSS click here.
5. Adding Margins As, you may have noticed we can create more separation in the rows by setting the margin property of "student" to "5px". Please note, to view the CSS click here.
6. Setting the Width I am sure you have not been too happy about the fact that the width of the row, is wider than is needed. To solve that we have assigned a desired width in pixels to the "width" property of the student tag. Please note, to view the CSS click here.
7. Setting the Column Width I am sure by now you are asking if we can do the same thing as we did above to the column width. To do that simply set the width property of "first_name", "last_name" and "id" to the desired width. By the way, try reducing the width of the row. If you are used to HTML, where attribute setting were nothing more than just a suggestion, you are then in for a pleasant surprise. Please note, to view the CSS click here.
8. TABLE The last thing we need to add, is to come up with an analogous tag to the TABLE tag. Obviously, if "student" is analogous to TR, then the natural choice for TABLE would be "students". What may not be obvious at first is the capability of block-level elements to contain other block-level elements. Please note, to view the CSS click here.

1. Nesting Going back to our last weeks example, we have added the homework information for the students. As you can see we have placed all the "homework"s inside the "homeworks" tag. In our style sheet we have defined "homeworks as yet another inline-level tag in order to leave it align in the student row. The result of this setting is the raw display of all the data within all the elements inside "homeworks". Please note, to view the CSS click here.
2. Nesting More To increase the resolution by which we try to separate data, we have defined the rules for the "homework" tag. After looking at the style definition in detail you might be asking yourselves "how come 'homework' are in separate line, when they are only a inline-level tag" It's because by definition the width of "homeworks" only allows for one "homework", other homeworks are automatically wrapped to the next line. Please note, to view the CSS click here.
3. Adding Nested Rows This example should look the same on your browser. However, by viewing the style sheet you should be able to detect the change in the "homework", it has been changed to a block-level tag. I encourage you to change the width of "homeworks" (and obviously increasing the "students" to accommodate the increase of width) for these examples. Please note, to view the CSS click here.
4. Creating Cells Finally, we have added "number", and "score" as inline-level elements. The result of this addition is the visual separation of these data within their rows. Please note, to view the CSS click here.
5. Adding More Students This is just to illustrate the effects of adding more students to the XML document Please note, this example uses the same CSS as above. To view the CSS click here.
6. Inheritance The students document. At the same time three elements: "class_name", "year", and "quarter" were also added to augment the class description. This is essentially the same as our other elements. "class_info" has been organized as a row and the other three new elements cells of this row. What might be visually obvious is the larger size of font that the data of these elements have been displayed with. However, you would not be able to find any reference to setting font properties within the style definition of these elements. The reason is we have done the font setting for the "class_info" tag and as a result the elements nested inside "class_info" have inherited this capability. Please note, to view the CSS click here.
7. Change of Style Just to illustrate the ease of style change to documents whose content has been separated from display. Please note, to view the CSS click here.

1. Use of embedded HTML In order that XML be able to render HTML tags like IMG, A, TABLE, etc. it is necessary to include the following statement in your XML file:

   <?xml version="1.0" standalone="yes"?>
   <?xml-stylesheet type ="text/css" href="filename.css"?>
   <root_element xmlns:html="http://www.w3.org/TR/REC-html40">

   With this included, we can use the HTML commands using the following syntax: <html:tag ....>value</html:tag>

   <link><html:a href="http://www.whatever.com/index.html" target="new">link_name</html:a></link>

   The address book has been modified to include hypertext links. Look at address_book_css_link.xml and address_book_link.css.

   <pic><html:img src="images/filename.gif" width="200"
   height="200"></html:img></pic>

   An example of a file with images and hypertext links using the above code can be seen here with the corresponding CSS file.

An example of a file with a clickable image using the above code can be seen here with the corresponding CSS file.


2. To display an image, you could also use something like <html:img src="filename" width="100" height="100" />

You can see examples of this in the "Bob's Books Folder, where the code for the root element has been changed to:

<library xmlns:html="http://www.w3.org/TR/REC-html40">

To view how to include it in an XML file, as well as how to embed the HTML commands, click here.

I have created some *very* simple files; formatting.xml, formatting_css.xml and formatting.css (and metaman.jpg) They render images and links, and show how to add a background color to a rendered page, and the use of link rendering to preserve original link color. Use these files, an din particular the link and image code, to add links and images to your XML project!

Using "class" to render an image

1. You can also use class to render an image in CSS, but it is a bit clunky. Having said that, here's how it might look:

   In the CSS document, create declarations that will point to a given image file:

IMG {width: pixels; height: pixels; border: 1 solid black}
#image_1 {background: url(image_1.jpg) no-repeat}
#image_2 {background: url(image_2.jpg) no-repeat}
#image_3 {background: url(image_3.jpg) no-repeat}
#image_4 {background: url(image_4.jpg) no-repeat}
#image_5 {background: url(image_5.jpg) no-repeat}

In the XML document, your code surrounding the image files would look like this:

<IMG ID="image_1"/>

<IMG ID="image_2"/>

<IMG ID="image_3"/>

<IMG ID="image_4"/>

<IMG ID="image_5"/>

Please note that this solution is "fixed" and doesn't scale readily, nor can that CSS document be used with other XML files.


2. Dual Usage of CSS We have already seen how CSS is used to render XML documents by defining how tags should be displayed. Looking to the future where we will use XSL to render XML documents as HTML, we should be aware that HTML will not recognize the XML tags and will not be able to correctly apply the CSS to render those tags. With that in mind, at this stage it is only necessary to extend the CSS definitions slightly in order to be able to reuse them later. For all tags, all we need do is append a "span.tag" to the existing definition. Thus, "book { ... }" becomes "book, span.book { ... }". We will discuss how to use these new elements when we study XSL.
   To view the CSS click here.

CSS TUTORIALS - If you are really interssted in a broad overview of CSS, including fonts, text, and precision layout of images, please follow the links below. You may download the entire CSS tutorial (below) from this link. (Academic use only).

• CSS overview
• Using fonts
• Precision image placement
• Entire CSS zipped archive

For homework, display the address book or the file which you had created for week two. Use images and links if possible (see both example projects linked below as well as student projects. Email the file to me as a separate attachment. If you are using images in your rendering with css, please put them in an image folder and zip the entire archive. This assignment is due at the end of week four.

An example of the address_book_css.xml and address_book.css files may help you get a head start.

The address book has been modified to include hypertext links. Look at address_book_css_link.xml and address_book_link.css

If you are at all inclined towards more elegant design, try looking at addressbook_elegant_css.xml, addressbook_elegant.css, and addressbook_elegant.zip, which contains both of the files above in a zipped archive. They really are quite elegant!

Acknowledgements - Thanks to Chris Crandall and Linda Kiehnau for assistance in creating the image and link tutorial files. Special thanks to Judy Freeland and Loi Tran for the CSS tutorials on fonts and text, and image placement. Loi also produced the Black and White Photo Album project. Franziska Walker created the Windsurf Spots project which contains both images and links. You may download each of these archives.