CPAN 560 XML
Lecture #10:Displaying XML Documents using CSS
IntroductionXML is concerned with the structure of a data rather the presentation of the data, but sometimes it is useful to be able to present the XML document in more readable format. XML uses Cascading Style Sheets as a mechanism of presentation in a web browser. CSS set the rules on how each element will be presented. CSS is also used with HTML to set the rules for the format of the HTML document. The difference is that XML tags have no pre-defined meaning as HTML tags. The basic idea of CSS is to separate the contents of the document from the presentation of that document, letting you having more control over your document. We know that the Internet Explorer displays XML using default style sheets, but other than this, the browser has no idea how each element in the XML document will be displayed. CSS can help provide the browser with extra information (rules) about the appearance and behaviour of these elements.
CSS RulesIn order to use Style sheets, you must set the rules first, which is a way to tell the browser how to display a specific tag. The rule consists of a selector and a declaration. The selector is any XML element and the declarations are a group of one or more pairs in the format (attribute: value) separated by semicolon. For example, if you want to set a rule stating that name element should be of certain color and font:
name { color:”#ff5544” ; font-family:”Arial” }
Selectors can be grouped together, and the same rule apply for any of them as follows:
fname, lname { color:”#ff5544” ; font-family:”Arial” }
1
The following are other kinds of selectors that can be used in CSS rules:
The descendant selector:Used to apply rules only if the element appears inside another one.
For example:name fname {color:”55ffaa”}
This means that fname should be descendant from the name element in order for this rule to apply.
The child selector:This selector is used to apply the rule only of the element is a child element of another one. For example:
Student > id {text-decoration:underline}
This rule will apply only if id is a child element of Student. The attribute selector:
Is used to apply the rules to elements based on their attributes. For example:Employee [id] {font-size:30px}This means that all the Employee elements that have an attribute called id will have font of size 30 pixel.Also you can apply the rule based on a value of an attribute. For example: Employee [id=”no1”] {font-size:30px}This rule is more specific. It will apply to any Employee element that has the attribute id with a value of “no1”.
The class selector:Classes let you create several different styles for the same element, each is distinguished by the class name. In order to use a class, simply use a tag name, then a period and a class name, as in the following example:
name.first {font-style:italic; color=”#ff55ff”;}
and in the document, when you want to refer to that specific style :
<name class=first> John Smith</name>
You can have a generic class without it being associated to any specific tag, as follows:
.italic {font-style=italic}
2
Then in the document
<name class=italic> this is first level header</name><address class=italic> this text should be italic font</address>
The ID selector:Style Ids are used in the same way as classes except you use # before the class name, as follows:
#blue {color:red}or
name#blue{color:red}
and when you refer to that in the document :
<jobTitle id=blue> Programmer</jobTitle>
The class name in this case must be unique to exactly one tag in the document. You cannot legally re-use the class
CascadingCascading works on four different levels: element, document, external, and browser. When the styles conflict with each other, there are two rules that apply:
The most specific style rule will be applied. For example, the style that applies to an element is more specific than the style that applies to the document,
If two styles are equally specific, then the style that occurs later is considered more specific.
When displaying an XML document in a browser using CSS, the browser will provide default setting for all CSS properties. If a property or group of properties of CSS was not assigned a value, then the browser will use the default setting for them.
3
CSS properties that are used with XMLFollowing are some of the CSS properties that are used with CSS:
Property Description Possible valuesbackgroud-color Define the element’s
backgroundcolorinherit transparent
background-attachment
Indicate how an image will scroll when a window does.
fixedinheritscroll
background-image Allows to use an image a s a background. We can use either absolute or relative URL.
inheritnoneuri
background-position Determine the position of a background image. This position is relative to the top left of the element to which the property is applied
percentagelengthtop| center| bottomleft| center| right
background-repeat Indicate if an image should be repeated, and if so , which axes the image should be repeated along.
inheritno-repeatrepeatrepeat-xrepeat-y
border Manage the full range of border attributes.
border-styleborder-widthcolorheightinheritlengthpercentagewidth
border-style Provide a style for an element border.
dasheddotteddoublegroove
4
inheritinsetnoneoutsetridgesolid
border-top, border-left, border-bottom, and border-right properties.
Manage particular attributes of an element border.
border-widthborder-stylecolorinherit
border-width Global value for:border-right-width,border-top-width,border-left-width,border-bottom-width
inheritlengthmediumthickthin
Color Determine the painting color of an element.
inherit, color
display Determine how and where to display an element.
inlineblocknone inheritlist-itemrun-incompactmarkertabletable-inlinetable-captiontable-cell table-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-group
float Determine how an element should be float relative to other elements(text wrapping).
clearinheritleftrightnone
font-family Determine the font inherit
5
name for an element. It can be a single value , or a list of font values.
family-namegeneric-family
font-size Indicate the value of an elements’ size.
absolute-sizelengthpercentagerelative-sizexx-small xx-large
font-style Indicate whether a font should be bolded (oblique) or italicized.
inherititalicnormaloblique
letter-spacing Expand the space between letters.
inheritlength normal
margin Manage margin-top, margin-left, margin-right, margin-bottom properties.
inheritlengthpercentage
padding Manage padding-top, padding-right ,padding-bottom, and padding-left properties
inheritlengthpercentage
page-break-before Force a page break before an element is printed.
autoalwaysnever
page-break-after Force a page break after an element is printed.
autoalwaysnever
position Manipulate the position of an element relative to other elements.
absolute fixed inheritrelativestatic
text-align Determine how an element will be aligned
centreinheritjustifyleft
6
rightstring
text-decoration Indicate how the text will be decorated
blinkline-throughnoneoverlineunderline
text-indent Used to indent paragraphs
lengthline-heightnormalnumberpercentage
text-transform Determine the case of an element contents.
capitalizeinheritlowercase uppercasenone
top, left, and right properties
Indicate where to display an element along the x , and y axis.
autoinheritlengthpercentage
vertical-align determine the position of an element within a container or character data within an element.
baselinebottominheritlengthmiddle,percentagesubsupertext-bottomtext-toptop
visibility Determine whether an element (s) is rendered within its boundary rectangle
noneHiddenvisible
word-spacing Adding space between words.
inheritlengthnormal
7
CSS directives that are used with XML
@media:Manages media types .we can output the XML to any combination of the following media type:Media type Usageall The style apply to all media typesaural Intended for speech synthesizersbraille Used for brail tactile feedback deviceembossed Used for paged Braille printershandheld Used with handheld devicesprint Used for printing to a printer.projection Used for a screen projection medium.screen Used for color computer screen.tty Fixed pitch printerstv Used on television screens.
@pageThis directive allows defining global rules for a page. For example:
@ page {size:8 in 11 in;margin-left:.5 in; margin-right:.5 in;page-break-after:auto;} @importAllows importing one style sheet into another. For example @import url(test.css)
@charsetManage the character set within the scope of the style sheet. For example:
@charset “ISO-8859-1”
@font-faceThis directive describes a font. For example:
@font-face
8
{font-family: “Verdana”;src:url(“url of the font file”);}
Then we can refer to this font as show in the following example:Name {font-family:”Verdana”;}
Associating CSS with XMLCSS can be associated with an XML document either internally, or externally. To include a style sheets in an XML document externally, use xml-stylesheet Processing Instruction and have it refer to the location of the CSS file (see example 1).To include a style sheets in an XML document internally, include the rules in an XML element with a named ID, and then reference to this style sheet using xml-stylesheet Processing Instruction (see example 2).
Examples
Ex1:internalCSS.xmlIn this example we will associate CSS rules to an XML document internally.
<?xml version='1.0'?><!-- internalCSS.xml --><?xml-stylesheet type="text/css" href="#myStyle"?>
<info><st id="myStyle">
{}st {display:none;}
@media screen{userName
{font-size:30pt;color:blue;word-spacing:10px;letter-spacing:10px;}userName {display:block;position:absolute:top:10px;left;50px;
text-indent:50px;}
9
lname {color:red;background-color:yellow;}}
</st><userName><fname>John</fname><lname>smith</lname></userName><userName><fname>Scott</fname><lname>Robert</lname></userName></info>
Notice that Internet Explorer ignores the first rule in an internal CSS, therefore we are placing {} at the first line of the internal CSS to avoid that.
The following is a screen shot of this document displayed in Internet Explorer:
Ex2:externalCSS.xmlWe will present the same XML document in Ex1 by associate it with an external CSS.
10
<?xml version='1.0'?><!-- externalCSS.xml --><?xml-stylesheet type="text/css" href="myStyle.css"?><info><userName> <fname>John</fname><lname>smith</lname></userName><userName><fname>Scott</fname><lname>Robert</lname></userName></info>
The style sheet file (myStyle.css) has the following content:
@media screen{
userName {font-size:30pt; color:blue; word-spacing:10px; letter-spacing:10px;}
userName {display:block; position:absolute;top10px;left:50px;text-indent:50px;}
lname { color:red; background-color:yellow;}}
The following is a screen shot of this document displayed in Internet Explorer:
11
Ex3:media.xml
The XML document in this example will be presented differently based on the media type: screen or print .
<?xml version='1.0'?><!-- media.xml --><?xml-stylesheet type="text/css" href="media.css"?><info><userName><fname>John</fname><lname>smith</lname></userName><userName><fname>Scott</fname><lname>Robert</lname></userName></info>
The style sheet file (media.css) has the following content:
12
@media screen{userName {display:block;font-size:16pt;border-style:solid;margin-left:50px; position:relative;top:10px;left:10px;color:blue;}lname {color:red;background-color:yellow;}}@media print{userName {font-size:32pt;color:blue;background-color:blue;}lname {color:red;background-color:blue;text-decoration:underline;}}
The following is a screen shot of this document displayed in Internet Explorer:
If you print preview this document, it will look as following:
13
Ex4: emp.xmlIn this example, we will display the XML document as an HTML table. We will display this document in Netscape Navigator 6.0 as Internet Explorer does not support CSS tables yet.
<?xml version='1.0'?><?xml-stylesheet type="text/css" href="emp.css"?><employees><headers><header>First name </header><header>Last name </header><header>Title </header><header>Salary </header></headers><content><employee><fname>John</fname><lname>Smith</lname>
14
<title> Programmer</title><salary>21000</salary></employee><employee><fname>Sam</fname><lname>George</lname><title> Programmer</title><salary>41000</salary></employee><employee><fname>Robert</fname><lname>Brown</lname><title> Manager</title><salary>20000</salary></employee><employee><fname>Tanya</fname><lname>Scott</lname><title> Programmer</title><salary>25000</salary></employee></content></employees>
The style sheet file (emp.css) has the following content:
@media all{employees {display:table;border-style:double;margin-left:50px;margin-top:50px;width:60%;height:200px;}headers{display:table-header-group;}header {display:table-cell;
15
padding:5px;background-color:navy;color:white;font-weight:bold;border: outset 1px black;}content{display:table-row-group;}employee {display:table-row;}fname {display:table-cell;border-bottom:solid 2px lightGray;border-left:solid 2px lightGray;}lname {display:table-cell;padding: 5px;border-bottom:solid 2px lightGray;border-left:solid 2px lightGray}title {display:table-cell;padding: 5px;border-bottom:solid 2px lightGray;border-left:solid 2px lightGray}salary{display:table-cell;padding: 5px;border-bottom:solid 2px lightGray;border-left:solid 2px lightGray;border-right:solid 2px lightGray}}
16
The following is a screen shot of this document displayed in Netscape Navigator 6.0:
Ex5: image.xmlThis example demonstrate how to insert an image as background. In the foreground, the employee records are displayed as a list of items
<?xml version='1.0'?><?xml-stylesheet type="text/css" href="image.css"?>
<employees><background/><employee><fname>John</fname><lname>Smith</lname><title> Programmer</title>
17
<salary>21000</salary></employee><employee><fname>John</fname><lname>Smith</lname><title> Programmer</title><salary>21000</salary></employee><employee><fname>Robert</fname><lname>Brown</lname><title> Manager</title><salary>20000</salary></employee><employee><fname>Tanya</fname><lname>Scott</lname><title> Programmer</title><salary>25000</salary></employee></employees>
The style sheet file (image.css) has the following content:
employees {display:block;margin-left:0px;position;absolute;}employee {display:list-item;
18
list-style-type:disk;}
fname, lname {color:red;width:50px;}title {color:blue;width:100px;}salary {color:green;}background {background-image:url(test.jpg);width:100px;height:100%;position:absolute;left:0px;top:0px;}
The following is a screen shot of this document displayed in Internet Explorer:
19
Ex6: items.xml
This example will demonstrate how to use classes. Each item will be displayed as a list item, and the salary of the items will be formatted differently using classes.
<?xml version='1.0'?><?xml-stylesheet type="text/css" href="items.css"?><items><item><itemid>1</itemid><itemdescription>Shelves</itemdescription><price class="first">100</price></item><item><itemid>2</itemid>
20
<itemdescription>Chairs</itemdescription><price class="general">500</price></item><item><itemid>3</itemid><itemdescription>Table</itemdescription><price>200</price></item><item><itemid>4</itemid><itemdescription> TV Set</itemdescription><price>150</price></item></items>
The style sheet file (items.css) has the following content:
@media screen{
items {display:block;}item {display:list-item;list-item-style:disc ;margin-left:50px;}itemid {width:20px;color:red;background-color:yellow;}itemdescription {width:200px;}price {width:80px;color:green;}price.first {width:80px;color:red;}.general {width:80px;color:blue;}}
The following is a screen shot of this document displayed in Internet Explorer:
21
22