7.8 Cascading Style Sheets (CSS) and XML

7.8 Cascading Style Sheets (CSS) and XML

HTML can be enhanced by allowing stylesheets to handle font sizes, colors, and placement of text and graphics. The mechanism for attaching a CSS stylesheet to an HTML document is to include it inside the document with <style> tags. For compliance with XHTML standards, the preferred method is to call an external stylesheet with the <link /> tag. We will explore the latter method in this section. Because XHTML can use CSS, XML and XSL can also use these terms to format documents. However, browsers are the most frequent method of displaying any document with Cascading Style Sheets.

Browser compliance with CSS 1.0 is fairly common, but the set of allowable terms is more limited than with CSS 2.0. Test your browser with these examples. The more complete set of terms are very similar to the XSL formatting objects. You can read about CSS at the World Wide Web Consortium web site at http://www.w3.org/. Your browser preferences can be changed to use your own stylesheets or ignore any supplied stylesheets.

You can create Cascading Style Sheets in any text editor. Some of the more popular HTML editors may have shortcuts and assistance for creating them. There are two main ways to set a style and use it. The first way to create a style is to name an element and describe how to display it. The second way is to create a class and then include its name in any element to use that style. This is somewhat similar to setting up XSL templates to handle XML elements. We will show both methods here.

7.81 A Simple Rollover Effect

To show CSS in action, we will create two styles, on and off, and use them with text. The event to change the style is included in the element.

Create a new text file and call it roll.css. Creat the first class, on, and add a period to the beginning of the class name. This signifies that the name of the style is not the name of an element found in your document. How you want any object with this class to be displayed is entered between the curly braces, "{" and "}." For the "on" state, we have chosen our font size to be 16 pts. The next style we want to apply to the text is to make it underlined and blue. Add the class "off" as in Listing 7.15 and save the stylesheet.

Listing 7.15: roll.css
Start example
.on   {
      font-size: 16;
      text-decoration: underline;
      color: blue;

.off  {
      font-size: 16;
      text-decoration: none;
      color: red;
End example

Create a new HTML file and call it CSSrollover.htm. This will be a small document with one text line. Within the <head> element, we will place the <link> element to call the stylesheet roll.css. Type some text within a <div> element. We've chosen to place our rollover "effect" on the text "RED." The styles are set as a default by calling the class "off." Then two events are tested as the mouse is over the text and out of the text. Each of these events will change the class of the text. As the class changes, the stylesheet uses the correct style. Save the HTML document and place it in the same directory as the stylesheet roll.css. Open the HTML document in your browser. Move your mouse over the "RED" text and see what happens!

Listing 7.16: CSSrollover.htm
Start example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>CSS rollover</title>
      <link rel="Stylesheet" href="roll.css" type="text/css" />
<div>This text is <span class="off" onMouseOver = "this.className ='on';"
  onMouseOut = "this.className = 'off';">RED</span> until you
  place your mouse over it!</div>
End example

7.82 Common CSS Terms

We used the font-size, text-decoration, and color Cascading Style Sheet terms to define our styles for the previous example. Some of the more common terms are listed and defined here. You can find a complete set of CSS 1.0 terms at http://www.w3.org/TR/REC-CSS1.

Your document's font can be set with the deprecated HTML element <font> or with the font CSS terms. The font-family, for example, defines the typeface to use. Because of the variety of cross-platform font styles, the name of any family may not render exactly the same. You can specify several families and the browser or processor will pick the one that matches as closely as possible from the list. An example for setting the font within the <body> of an HTML document is shown here:

body { font-family: Arial, Helvetica, Sans-serif }

The usage of the word "cascading" for this type of stylesheet can be demonstrated with the above style setting. The <body> element in an HTML document has several child elements. Each of these children will inherit the styles of the parent (body) element. The style is said to "cascade" down.

The font-style can be normal (default), italic, or oblique. The following example will make all of the text on the page italic (slanted) if the browser supports the style.

body { font-family: Sans-serif; font-style: italic; }

The font-weight: bold term is similar to the <b> element in HTML. The use of the stylesheet allows a single change to many elements that may use that style. The following example uses the class "b1" to be { font-weight: bold } and "b2" to be { font-weight: bold; color: red; }. If you decide later that all bold words should be in red, you can add it to the "b1" style and every occurrence of class "b1" and class "b2" will display the color.

<p>This text has a few <b>BOLD</b> words. Every instance of the <b>BOLD</b>
element must be changed if you decide you really wanted to have the <font
color="red">BOLD</font> words in a different style.</p>
<p>This text has a few <span class="b1">BOLD</span> words. Every instance
of the <span class="b1">BOLD</span> element must be changed if you decide
you really wanted to have the <span class="b2">BOLD</span> words in a
different style.</p>

The font-size can be shown as point size, relative size, length, or percentage. This CSS term is similar to the HTML <font size="3">. The advantage of using the CSS method to set the font size is that as with the above example, you can make document-wide changes simply by changing the style one time.

The font term can be used when you want to show the family, weight, and size within one style.

body { font: 12pt bold sans-serif }

There are other CSS terms that can be set. Test them in your browser and decide if the use of your styles will work for the majority of any HTML page using them. Remove the stylesheet from the HTML page and see how it displays without it. You may need to compromise how you use CSS for your presentation.

FileMaker Pro Unlimited 6 comes with a demonstration of using CSS to display XML. Just as with the <body> element, stylesheets may be set to display an XML element such as <personName>. The position CSS term is used to set where to display the contents of the XML elements. Your browser may not support this CSS term. I have found that it is better to display as HTML and use CSS to format the text and colors.

The next chapter has examples of XML displayed as HTML. You can also find XSL and CSS examples in the FileMaker XSLT library at http://www.filemaker.com/xml/xslt_library.html.