introduction to xml - humber collegemunro.humber.ca/~zouri/cpan560/cpan560-lec10.doc · web...

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'?><?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'?><?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;}}


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'?><?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;}}


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;}


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;}}


21