| Overview |
| |
In this chapter you will learn |
- How to add style sheets in XML through CSS?
- How to add inline, internal and external style sheets in a document?
- How to use XML with XSL?
|
Developing an XML-related documents does not guarantee that it will be displayed the way you want it to appear. Browsers are not particularly good at formatting XML, and only the very latest browsers support it all. Although most of the time XML will be used to define data, not to display it, but sometimes you want to format the XML data for viewing. There are two main ways of doing this :
Using CSS with XML
CSS is a style language that lets you separate content and style as you design web pages. CSS can 'redefine' HTML tags, allowing them to be presented in different ways. Similarly, it can be used to define how XML tags are displayed. You can use three methods to specify styles for XML documents :
Using External Style Sheets with XML documents
External style sheets are always recommended because, you can change a document's style without having to access and modify the document itself and external style sheets can be shared among documents and thereby become the most efficient technique for applying your specified styles to more than one document at a time.
| Syntax |
| <?xml-stylesheet type = "text/css" href = "stylesheetname.css"?> |
| Example |
<?xml version="1.0"?>
<?xml-stylesheet type = "text/css" href = "Ex1.css"?>
<To>
<SMS>
<header>
<from> James </from>
<to> Smith </to>
<Topic> Jokes </Topic>
</header>
<body>
a a a a a b b b b b b a b a b a b a b a b a b a b a b a b a b b b b b b b b b b b b b b b b b b b b a a. . . . . .
Long time no c (see).
</body>
</SMS>
</To> |
Below is the specification of the style sheet that has been included above :
Ex1.css
To
{
background-color : #ff00ff ;
width : 100% ;
}
SMS
{
background-color: #Green ;
margin-bottom: 30pt;
}
header
{
background-color: #999999;
margin-bottom: 10pt;
}
from
{
color: #0000FF;
font-size: 12pt;
} |
Specifying an Internal Style Sheet
You can include style rules in the data document itself by including the style rules in the <head> element of an XHTML file. Specifying an internal style sheet is practical for small-scale XML projects only.
| Syntax |
<?xml version ="1.0"?>
<html xmlns : "http ://www.xyz.com">
<head>
<style type = "text/css"> ...........</style>
</head>
<body> ...........</body>
</html> |
Specifying Inline Styles
You can also use the STYLE attribute to add styles to individual elements inline, i.e., within the XML document. The generic inline style syntax is :
| Syntax |
| <elementname STYLE = "propertyname : value">............</elementname> |
Various Cascading Style Sheet Properties are :
| Category |
Property Name |
Background properties |
background background-image
background-attachment background-position
background-color background-repeat |
| Font Properties |
font font-stretch
font-family font-style
font-size font-variant
font-size-adjust font-weight |
| Text properties |
color text-shadow
direction text-transform
letter-spacing vertical-align
line-height white-space
text-decoration word-spacing
text-align text-indent |
| Box properties |
border border-top
border-bottom border-top-color
border-bottom-color border-top-style
border-bottom-style border-top-width
border-bottom-width border-width
border-color margin
border-left margin-bottom
border-left-color margin-left
border-left-style margin-right
border-left-width margin-top
border-right padding
border-right-color padding-bottom
border-right-style padding-left
border-right-width padding-right
border-style padding-top |
| Table properties |
border-collapse empty-cells
border-spacing row-span
column-span table-layout |
| List properties |
list-style list-style-position
list-style-image list-style-type |
| Element dimension properties |
height min-height
line-height min-width
max-height max-width |
|
