Cover page images (keys)

XML Lecture (Week 6)

XML Presentation: CSS

2007-04-03

Yi-hong Chang, <yhchang@iis.sinica.edu.tw>

Institute of Information Science
Academia Sinica, Taipei, Taiwan

Presenting an XML Document

XML Document is a Structured Data Document.

There is not any defination about how to present an XML document in the XML specification.

How an XML document is presented is depending on the application.

Examples:

Plain Text Editor Tree-view Browser XHTML-enable Browser print out

Stylesheets

To present an XML Document, one should use "stylesheets", eg. XSL or CSS.

CSS: Cascading Style Sheets

W3C CSS Home: http://www.w3.org/Style/CSS/

History:

Other versions:

¡Sample it! HTML

CSS is the typical method to present a HTML (XHTML) document.

<?xml version="1,0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {background-color:silver}
h1 {color:red}
h2 {color:teal}
</style>
</head>
<body>
<h1>Header 1</h1>
<h2>header 2</h2>
<p>paragraph</p>
</body>
</html>

h1     selector
{
color  property |
:               |declaration
red    value    |
}

result: XHTML with CSS

¡Sample it! SVG

However, CSS is not limited to XHTML, it is also common to use CSS with an XML document,
e.g. SVG (Sector Vector Graphic).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
     <defs>
     <style type="text/css"><![CDATA[
      text {
        font-size:30px;
        font-family:Arial;
        font-weight:bold;
      }
    ]]></style>
  </defs>
  <circle cx="100px" cy="50px" r="50" fill="#00f"/>
  <text x="100" y="60" text-anchor="middle" fill="red">TEXT</text>
</svg>

This is how a SVG-enable application renders the above SVG.

.

¡Sample it! XML

It is also common to use CSS with an normal XML document.

A XML document...

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="XmlWithCss.css"?>
<faq>
  <body xml:lang="en">
  	<qna id='a1'>
  		<q>A.1. What is a FAQ?</q>
  		<a>A FAQ is the nickname for a "Frequently Asked Questions" document.</a>
  	</qna>
  	<qna id='a2'>
  		<q>A.2. Question 2</q>
  		<a>Answer</a>
  	</qna>
  </body>
</faq>

with this CSS...

q { display:block; font-weight:bold; font-size: 1.5em; color:blue;}
a { display:block; font-size:1em; color:green;}

this result is : XHTML with CSS

Differences between the above three formats

The difference between using CSS with XML, XHTML, SVG is that
XHTML and SVG has a default styles defination.

For an "XHTML-or-SVG-enable-application", e.g. Opera, It knows how to present an XHTML or SVG document.

<i> a HTML Italic Element.</i>

<u> a HTML Underline Element.</u>

CSS Core Syntax

CSS Core Syntax (simplified)

  stylesheet: statement*;
  
  statement: ruleset | at-rule;
  
  ruleset: selector? '{' S* declaration? [';' S* declaration?]* '}' S*;
  
  declaration: property S* ':' S* value;

  at-rule     : ATKEYWORD S* any* [ block | ';' S* ];

A CSS ruleset example

  header {color:red; background:white}

Before applying CSS to a XML doc...

The CSS requires parsing XML Document as a Tree. 

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="XmlWithCss.css"?>
<faq>
  <body xml:lang="en">
    <section>
      <qna id='a1'>
        <q>A.1. What is a FAQ?</q>
        <a>A FAQ is the nickname for a "Frequently Asked Questions" document.</a>
      </qna>
    </section>
    <qna id='a2'>
      <q>A.2. Question 2</q>
      <a>Answer</a>
    </qna>
  </body>
</faq>

Inheritance I

Child/descendant elements will inherite SOME values of properties defined in the parent element.

  body {color:red; font-size:10px}
  q { font-size: 120%}

the result is:

  body   {color:red, font-size:10px} 
  q {color:red, font-size:12px}

Universal Selector

  ruleset: selector? '{' S* declaration? [';' S* declaration?]* '}' S*;  
  declaration: property S* ':' S* value;

Element Selectors

Element Selector

Element Selectors

Element Selector

Element Selectors

Element Selector

Element Selectors

Element Selector

Attribute Selectors

Attribute Selector

Attribute Selectors

Attribute Selector

Attribute Selectors

Attribute Selector

Attribute Selectors

Attribute Selector

Attribute Selectors

Attribute Selector

Attribute Selectors

Attribute Selector

Psedo-classes Selector

Psedo-classes Selector

Psedo-classes Selector

Psedo-classes Selector

Psedo-classes Selector

Psedo-classes Selector

Psedo-elements Selector

Psedo-elements Selector

Psedo-elements Selector

Psedo-elements Selector

Combining and Grouping

Combining and Grouping

Values: Data Type

Values: Data Type

Units

font-size: 12px;
font-size: 1em;
font-size: 1mm;
font-size: 120%;

Values: Data Type

Property types

Box Model

Every element can be seen as a box which contain it's child box.

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="XmlWithCss.css"?>
<faq>
  <body xml:lang="en">
    <section>
      <qna id='a1'>
        <q>A.1. What is a FAQ?</q>
        <a>A FAQ is the nickname for a "Frequently Asked Questions" document.</a>
      </qna>
    </section>
    <qna id='a2'>
      <q>A.2. Question 2</q>
      <a>Answer</a>
    </qna>
  </body>
</faq>

Box Model

A box has the following features:

box.box1 {
	border-top: thin solid blue;
	border-right: medium dotted green;
	border-bottom: thick dashed red;
	border-left: 2px double olive;
	padding:10px 20px 30px 40px;
}
content.content1{
	border: 1px solid black;
}

<box class="box1">
<content class="content1">block</content>
</box>

block

Box Model

The properties for the actual visual effect of a box are "display", "position", "float", and etc.

Box Model

and...

Box Model

and...

Colors

Fonts

Text

p { text-indent: 3em;
    text-align: center;
    text-decoration:underline;
}

At least 12 people have died in the Solomon Islands after a tsunami swept ashore following a strong undersea earthquake in the South Pacific.The main town in the western Solomons, Gizo, was hit by waves several metres high that swamped buildings and washed people out to sea, officials said.

User interface

pointer
crosshair
move
help

Inheritance (continues)

As in the Inheritance section says: some values are inherited. Which means that some other values are NOT inherited

  body{ margin-top:100px}
  header{}

Cascading

CSS is cascading

At-rules

At-rules start with an at-keyword, an '@' character followed immediately by an identifier:

@import "subs.css";
@import "print-main.css" print;
@media print {
  body { font-size: 10pt }
}

illegal: 

@import "subs.css";
h1 { color: blue }
@import "list.css";

Media types

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

Add stylesheets to XML

Add stylesheets to XHTML

Add stylesheets to XHTML

browser support

web standards software and learning

Reference and Resources