displaying xml documents using css and xsl

Displaying XML Documents Using CSS and

XSL

Chapter 3

Core XML / Chapter 2 / Slide 2 of 25

Review-1 A well-formed document is one that conforms to the basic

rules of XML. A valid document is well formed and is also validated

against a DTD. The DTD specifies the grammatical structure of an XML

document, thereby allowing XML parsers to understand and interpret the document’s contents.

The use of the SYSTEM keyword indicates to the parser that this is an external declaration, and that the set of rules for this XML document can be found in a specified file.

EMPTY element-content type specifies that the element has no child elements or character data.


Review-2 #CDATA means that the element contains character data

that is not to be parsed by a parser.#PCDATA means that the element contains data that is to be parsed by a parser.

Specifying a default value for an attribute in the DTD ensures that the attribute will get a value, even if the author of the XML document does not include it.

Specifying the value of an attribute as ‘Implied’ means that the particular attribute is not mandatory and can be specified in the XML document.

Specifying the value of an attribute as ‘Required’ means that the particular attribute is mandatory (that is, its value must be provided in the XML document).


Review-3 ‘ID’ is the identifier type, and should be unique. This

attribute value is used to search for a particular instance of an element. Each element can only have one attribute of type ID.

A DTD can be either External or Internal. Entities allow us to create an alias to some large piece

of text, so that, in the document, the same piece of text can be referred to, simply by referring to the alias.

Namespaces allow us to combine documents from different sources, and be able to identify which elements or attributes come from which source.


Objectives Display an XML document in a browser Identify the style rules of CSS Discuss different patterns and templates of XSL Apply different styles to XML elements using CSS

and XSL Transform XML documents into HTML documents

using XSLT Identify the differences between CSS and XSL


Style Sheets - 1

An XML document can be displayed in different formats in different display devices such as computer, printer, and the like.

Document to be displayed


Style Sheets - 2 A Style sheet is a set of instructions to display the

documents:

Style sheets

Data Presentation Layer

It separates presentation layer from the content data of the document.

A single XML document can have multiple style sheets


Style Sheets - 3 A few style sheets available in the market

include: CSS- Cascading Style Sheets XSL-eXtensible Style sheet Language DSSL-Document Style Semantics and

Specification Language


Uses of CSS and XSL

Cascading style sheetis used to manipulate

Visibility of an element

Positioning and sizing of elements

Colors and Background

Font and Text Spacing

XSL is used for formatting and converting documents written in one XML DTD into another DTD.


XML and Style Sheets XML documents are plain text files. The style sheets are used to format and view the

XML document. Two commonly used style sheets with XML are:

CSS - an extension of HTML XSL - an XML specific styling language


Working of XML

XML File

CSS

(XML + CSS)aware Browser

Formatted Document


Displaying an XML Document Using CSS -1

XML document<?xml version='1.0'?>

<?xml-stylesheet type="text/css" href="hello.css"?>

<xsampdoc>

<greeting>Hello, <extension>there!</extension>

</greeting>

<answer>

<ans>Good <extension>morning!</extension>

</ans>

<question> How are you? </question>

</answer>

</xsampdoc>



Xsampdoc{ margin-top:.7in; margin-bottom: .7in; margin-left:1.5in; margin-right:1in; color: navy; background-color:white; display: block }greeting{ display:block; font-family: Arial, Helvetica, sans-

serif;font-size: 32pt; width: 30em; color: red }

question{ display:block;

font-size: x-large;

color: black; }answer.ans { display: block; font-size: 20pt; color: blue}

The CSS document for the XML document



OUTPUT


CSS Style Rules The Syntax for style rules in a Cascading Style Sheet

is: Selector{declaration} The selector identifies the tag to which the style

applies. The declaration provides the style rules applied to

the selector. This is referred as ‘Simple Selector’.

Example:

greeting

{display:block;font-family: Arial, Helvetica,sans-serif;

font-size: 32pt; width: 30em; color: red }


Multiple Selector Used to apply the same style rule for different elements Syntax:selector,selector…….{declaration}

Example

greeting,question

{font-family: sans-serif;

font-size: 32pt; }

Style Rule

Selector 1

Selector 2

The same Style Rule is being used by Selector1 and Selector2


Contextual Selectors -1 It helps us to differentiate between the different

occurrence of a tag.

MADE IN

U.S.A

tag

Occurrence 1 Occurrence 2

Occurrence 1

tag([declaration]}

Occurrence 2

tag([declaration]}

Conceptual Selector


Contextual Selectors -2 Example:<xsampdoc>

<greeting>Hello! <extension>there</extension></greeting>

<answer> <ans>Fine<extension>here</extension></ans> <ans>Thank you.</ans> </answer></xsampdoc>

Contextual Selectors to differentiate between the different occurrences of <extension>

greeting extension{[declarations]}

answer ans extension{[declaration]}


Characters used in CSS

Character Name Function

: Colon Separates property and its value

; Semicolon Separates multiple property/value combinations

. Period Identifies selector context

, Comma Separates multiple selectors in a style rule


Linking the CSS to XML The Cascading style sheet has to be referenced in the

XML document. We use a processing instruction to do so. Syntax:<?xml-stylesheet type=“text/css”

href=“url”?>

Example

<?xml-stylesheettype="text/css“ href="hello.css"?>


Properties and Values A value of the CSS styling property may be a string, a

number with a unit, an integer, or a color value. Values can be absolute or relative, inheritable or non-

inheritable.

Example Absolute value

P{margin-left:3cm;}

A margin of 3 centimeter is created irrespective of the margin size.

Example Relative value

P{margin-left:10%}

A margin of 10% of the width of the page is created.


Color Values

Gray White Red

Short form #888 #FFF #F00

Decimal Integer rgb(136,136,136) rgb(255,255,255) rgb(255,0,0)

Percentage rgb(55%,55%,55%)

rgb(100%,100%,100%)

rgb(100%,0,0)

XML supports the following color values:


Formatting the Text - 1 The CSS properties allow to specify the font in which

an element will be displayed, its size and color. <absolute-size> and <relative-size> keywords are used

with font properties

<absolute-size>

xx-small

x-small

small

medium

<relative-size>

large

smaller


Formatting the Text - 2 The different font properties that can be set are:

font-family

font-size

font-stylefont-weight

font-variantFont


Boxes -1 Blocks of text can be contained in a box. The following three properties apply to the boxes:

Margins Border Padding

Padding is the distance between the contents of the adjacent box.

Margin is the distance between the border and the outer edge of the adjacent box, or between the border and its containing box.


Boxes -2

Border


Margins, Border and Padding

margin-top

margin-bottom

margin-left

margin-right

margin

Margins Borderborder-top

border-bottom

border-left

border-right

borderpadding-bottom

padding-top

padding-right

padding-left

padding

Padding

Boxes

The padding property is used to specify the distance or space between the border and its contents.


Controlling Layout The CSS layout properties can control the box on the

screen. The boxes can be overlapped using the z-index

property.

A paragraph that is two inches by one inch and with a scroll bar is displayed


XSL It is a style sheet application created specifically

for XML. Features of XSL include:

It provides a transformation language (XSLT). XSL can be used as a formatting language. XSL can be used to sort and filter. XSL can be used for pattern matching to find

records.


XSL - 2

XML Document

XSL HTML

CSS

HTML document displayed in the Web


Example for XSL The XSL style sheet code <html> <head> <title>Icons In Cricket</title> </head> <body> <h2>Icons In Cricket</h2> <table border="2"

cellpadding="3"> <tr> <td>Player</td>

<td>No. Of Catches</td>

<td>No. Of 100's</td> <td>No. Of 50's</td> </tr> <xsl:for-each

select="cricket/player" order-by ="-catches">

<tr> <td><xsl:value-of

select="name"/></td> <td><xsl:value-of

select="no_50"/></td><td><xsl:value-of

select="no_100"/></td> <td><xsl:value-of

select="catches"/></td> </tr> </xsl:for-each> </table> </body> </html>


Patterns The patterns supported in XSL are:

Sorting Operators Filtering

Letters after sorting


Sorting The default sorting is ascending order. The ‘-’ sign is used to sort in descending order.

The chart is organized in the descending order of catches


Operators

XSL supports the se operators:

/

./

//

.//

*

@

=

/*/name

*/*

@*

//name


Filtering and Logical Operators

Filter operations can contain expression such as Boolean expression, AND, OR, and NOT expressions

The different logical operators that can be used are:Operator DescriptionAND Logical andOR Logical orNOT Negation= Equal!= Not equal> Greater than< Less than>= Greater than or equal to<= Less than or equal


Templates Templates are the instructions in an XSL style sheet, which

control the conversion of element and its content. It is represented by <xsl:template>…</xsl:template>

It is applied with the <xsl:apply-templates/> element

The template has two parts: The matching part The processing part

Matching part

Processing part


Types of Matching

Matching

Matching by name

Matching by ancestry

Matching several names

Matching the root

Wildcard matches

Matching by ID

Matching by attributes


Handling Expressions XSL supports five types of Expressions.

These are: Node Sets Booleans Strings Numbers Result Tree Fragments


Switching Styles

Data Islands 1

XML document

XML document with XSL style sheet 1



Data Islands 2

Data Islands 3


xsl:import and xsl:include Style sheets created by other developers can be

imported using the xsl:import The syntax for importing style sheets is: <xsl:import href= ‘another stylesheet.xsl’/> <xsl:import href= ‘another stylesheet1.xsl’/> All the different style sheets imported are arranged

in an import tree. A new node is created in the import tree when a

style sheet is imported


Difference Between XSL and CSS

CSS work by assigning a set of display properties to an HTML element

XSL provides means of transforming of XML documents

CSS determines the visual appearance of a page

XSLT lets us to map a certain pattern in the source document

It does not change the structure of the document

It transforms XML into structures such as lists or tables


Summary-1

XML is portable. An XML document can be sent from one system to another, and even from application to application, without modifying the content.

A style sheet is a set of instructions to display documents.

Style sheets can be written in several languages. Two of these are:


Cascading Style Sheets (CSS), an extension of HTML

eXtensible Stylesheet Language (XSL), an XML specific styling language

The selector identifies the tag to which the style applies, and the declaration provides the style rules applied, to the selector.


Summary-2

The list of selectors includes Simple selectors, Contextual selectors and Multiple selectors.

Contextual Selectors help to differentiate between the different occurrences of a tag.

The Multiple Selector is used to assign the same style rule to different elements. One declaration can be applied to several selectors.

A block of text can be contained in a box, and this box can then be placed on the browser. The three properties that apply to the boxes are: margins, borders and padding


The CSS layout properties can control the layout of the box on the screen. Boxes can be overlapped using the z-index property. This specifies the height and width for a box.

XSL is a style sheet language created specifically for XML. It is used to convert XML documents into HTML. Cascading style sheets are applied to the resulting HTML documents for display on the web.


Summary-3 The instructions that control how an element and its content should be

converted in an XSL style sheet, are called templates. XSL provides support for the following patterns:

Sorting Operators Filtering

A typical template element looks like this:<xsl:template match = "myElement">

Types of Matching Matching by attribute Matching by ID Matching by wildcard Matching by root Matching by name

displaying xml documents using css and xsl

Technology

cricket playerno