| only for RuBoard |
The common technologies for styling XML for display are CSS and XSLT. CSS enables the developer to specify HTML styles for an element, including font, weight,
CSS is most commonly used with HTML files to generate themes for HTML sites so that changing the display of one tag does not require massive updates throughout the website to make the change consistent. You can make your HTML files leaner because they do not require as much markup to achieve the same effect, which
For example, suppose that you want to display your company's
<font color="Blue" face="Tahoma" size="2">Xmlandasp.net </font>
Suppose that you used the
<font color="Gray" face="Tahoma" size="2">Xmlandasp.net </font>
Here's a more solid example. Suppose that you are developing a site that you want to sell to multiple
Instead of defining the layout within the HTML tag, you can separate the semantics of a layout scheme from its implementation.
You can use CSS to define the style associated with a particular element. CSS works on the basis of rules: Rules are defined to match instances within the document being implemented. This is what each instance of the HTML <H1> and <H2> elements will look like:
H1
{
font-weight: bold;
font-size: 16pt;
color: blue;
font-family: Verdana, Tahoma, Arial;
text-decoration: none;
}
H2
{
font-weight: bold;
font-size: 14pt;
color: black;
font-family: Verdana, Tahoma, Arial;
text-decoration: none;
}
In each page that uses this stylesheet, any reference to an HTML <H1> tag is a blue, 16-point font, and an <H2> font is slightly smaller and black. You can use this method to define what each HTML element looks like throughout your website.
You can see that you can simply define what a particular element looks like. Now, it's time to see how to use these style rules. CSS styles are applied to HTML in several ways: linking, importing, as part of the document, or as an inline definition.
Styles can be applied by linking to an external CSS stylesheet. In an HTML file, for example, you might specify the following in the HTML head section:
<html> <head> <link type="text/css" rel="stylesheet" href="xmlandasp.css"> </head> <body> <h1>This text is whatever is defined in "xmlandasp"</h1> </body> </html>
The
href
attribute specifies the location of the external stylesheet. This location can be a relative
In addition to linking to the external stylesheet, the external CSS document can also be imported by using the @import directive, as shown here:
<html> <head> <style type="text/css"> @import url(../www.xmlandasp.net/default.htm /styles.css); </style> </head> <body> <h1>This text is whatever is defined in "styles.css"</h1> </body> </html>
Although external resources can be referenced, it is sometimes
<html>
<head>
<style type="text/css">
h1 {font-family: verdana; color: green; }
</style>
</head>
<body>
<h1>This text is a Verdana font, colored green</h1>
</body>
</html>
Finally, you can include style definitions inline with elements as they appear. For example, you might use an HTML span element and declare a style on the fly:
<html>
<head>
<style type="text/css">
h1 {font-family: verdana; color: green; }
</style>
</head>
<body>
<span style="color: blue; text-decoration: underline;">This is some blue
underlined text</span>
</body>
</html>
Typically, it is
Note
For brevity, this chapter uses document styles using the HTML style element.
You can use CSS to define your classes to apply to different HTML elements. A CSS class enables you to develop specific types of a broader class that are applied by using a class selector.
For example, you might declare a style rule for all H1 elements in an HTML document by using the following code:
h1 {font-family: verdana; color: green; }
After you develop your pages, you notice that you sometimes need to add several properties to this element, such as underlining and italics, but you do not need this behavior for all instances. One way to do this is to define a CSS class. A CSS class defines a more specific implementation of a broader class and is referenced by using the HTML class selector, as shown here:
<html>
<head>
<style type="text/css">
h1 {font-family: verdana; color: green; }
h1.modified {font-family: tahoma; color: blue; text-decoration:
underline;}
</style>
</head>
<body>
<h1>This text is green in Verdana font</h1>
<h1 class="modified">This text is blue and underlined Tahoma font</h1>
</body>
</html>
By now, you have probably
We
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="pitchers.css" type="text/css"?>
<PITCHERS>
<PITCHER>
<FNAME>John</FNAME>
<LNAME>Rocker</LNAME>
<TEAM>Indians</TEAM>
<CITY>Cleveland</CITY>
<ERA></ERA>
</PITCHER>
</PITCHERS>
We associated the XML with a stylesheet called pitchers.css . Now build that style in the following code:
CITY
{
color: blue;
}
TEAM
{
font-weight: bold;
}
There's not much to it. When a CITY element is displayed, it is displayed with a blue font; when a TEAM element is displayed, it comes through as bold text.
There are many other possibilities for using CSS with XML directly. You can use CSS positioning and build complex rules to generate interesting effects. The
A more popular use of CSS is to apply CSS to the HTML that is the result of an XSL transformation. The
When you
res://msxml3.dll/defaultss.xsl
Although you can view the XSL, you cannot change it because it is an internal resource. But, viewing it can give you a good idea of working with an XSLT stylesheet. This leads us into the next section.
CSS suffers from a number of limitations for complex documents. For example, CSS cannot render documents that do not contain display information (which is why the preceding example produced little). A good summary of these limitations can be found at www.xml.com/pub/a/w3j/s3.leventhal.html. To
Note
This book does not cover XSL-FO. IE doesn't yet support XSL-FO, and the reader should be able to apply this technology after he or she understands the base concepts of working with XSLT. For more information on XSL-FO, see the W3C's home page at www.w3c.org.
| only for RuBoard |