View source for CSS for XML tutorial

{{Incomplete}}
{{web technology tutorial|Intermediary}}
<!-- <pageby nominor="false" comments="false"/> -->

<div class="tut_goals">
; Learning goals
* Learn how to use CSS with XML tags
; Prerequisites
* [[CSS tutorial]]
* [[XML]], in particular [[Editing XML tutorial]]
; Moving on
* [[CSS positioning tutorial]] (or another advanced CSS topic)
* [[XSLT Tutorial - Basics]]
; Level and target population
* People who like to publish documents with XML markup. CSS for XML is not difficult, but you need to understand [[XML]] of course.
; Remarks
* I may add some more stuff later, but rather suggest to translate XML contents to HTML with [[XSLT]]. The XSLT strategy works perfectly well in all popular browsers. It's possible since IE 5.5 (last century) ! Today, only really exotic or small device browsers may not understand XSLT.
</div>

== Using CSS with XML ==

Let's assume that you directly want to render XML contents in a browser. This content may be text-centric XML that you created yourself, contents using a [[document standard]], contents that are pulled out of a database or that are obtained through a web service, e.g. a simple RSS news feed. In most cases, you would use [[XSLT]] for styling, i.e. translate XML to HTML or another markup language. However, using CSS is easier and can do a perfect job for '''some''' text-centric contents.

CSS for XML is in no way different from CSS for HTML, but you need a browser that implements most of CSS 2 (all modern browsers do).

The only practical difference is that HTML includes default style for each element, e.g. a "h1" title would show in a big font and add space above and below. An XML element like "h1" or "header1" would not show at all. XML elements '''don't have any default styling'''. In other words, you will have to define properties for '''each''' of your elements. Since CSS implements cascading, you may define defaults for the root elements, or else use the "*" selector.

CSS sometimes is used to make [[XML editor|XML editing]] easier. I.e. the Schema author would produce a CSS that is then used to create a sort of WYSYWIG editing interface. With respect to this functionality, XSLT cannot replace CSS as a rendering solution.

=== Association of a style sheet ===

CSS stylesheets are associated with the following processing instruction. Please note that this is different from HTML and XHTML ! 
<source lang="xml">
 <?xml-stylesheet type="text/css" href="some_name.css"?>
</source>

Example:

<source lang="xml">
 <?xml version="1.0" encoding="ISO-8859-1"?>
 <?xml-stylesheet href="stepbystep.css" type="text/css"?>
 <!DOCTYPE Stepbystep SYSTEM "stepbystep-ex.dtd">

 <Stepbystep xmlns:xlink="http://www.w3.org/1999/xlink">
    <Doctitle>Instructions </Doctitle>
  .....
 </Stepbystep>
</source>

=== Basic steps in defining a CSS style sheet for XML ===
When defining style rules for XML elements, you should do the following.
# Define default rendering of text elements, e.g. font-size and font-family
# Define for each element if it is a block, inline or list element, using the <code>display</code> attribute.
# Fine tune, e.g. identify titles and make them bigger

Here is a little example:
<source lang="CSS">
/* 1) ---- Definitions that apply to the whole hierarchy */
page { font-family:Times; line-height:1.5;}
page { margin-top:3cm; margin-left:3cm; margin-right:3cm; }

/* 2) ---- title and para are "block" elements with a small margin */
title, para {display: block; margin: 0.5em;}

/* Titles are a bit taller than default size */
title {font-size: 1.5em;}

/* Item are list-item of type bullet */
item {display: list-item;list-style-type: bullet;}

/* strong is an inline element, we render these in italic and blue  */
strong {display: inline; font-style: italic; color: rgb(000,000,128);}
</source>

A corresponding XML document for this example can be found towards the end of this page.

Below, we explain the use of CSS for XML mostly by example. All example XML and CSS files can be found in the "http://tecfa.unige.ch/guides/xml/examples/css/" directory.

== CSS 2 selectors ==
Firstly, let's recall how CSS works. A CSS style sheet is a set of '''rules''' (also called rule sets) that describe how to render XML or HTML elements. Each rule has two parts:
# The '''selector''' (before the curly braces) defines to which elements a rule applies
# The '''declaration block''' (inside the curly braces) defines rendering, i.e. values of CSS properties
The syntax can be summarized as follows:
   selector { property:value; property:value; .... }
* Each declaration block includes at least a property name and a value, separated by a colon (:)
* Each ''property'':''value'' pair must be separated by a semi-colon (;)
CSS 2 selectors are introduced in the [[CSS tutorial]]. If you are not familiar with CSS properties, read that tutorial (or equivalent) and come back once you understand the basics.

Below we will recall CSS2 selectors, except that example tags are random XML elements and not HTML tags. A selector identifies the element(s) that we will style with properties. CSS 2 selectors work in the same way for HTML, XHTML, HTML5 and any text-centric XML.

'''Selection of an element (mostly you will use this)''':
: element

Example:

 Step {
    display: list-item;
    list-style-type: decimal;
 }

'''selection of a child element''':

:  mother_element  > child_element

Example:

 Step > Title { .... }

'''selection of descendant element (child, great-child, etc.)''':

:  mother_element element

Example:

 Step Title { .... }

'''Combinations''':

Example:

 DIV OL>LI P

: Means all "P"s that are somewhere within an LI of an OL list that sits somewhere within a DIV

'''selection of siblings (elements next to each other sharing the same parent)''':

:  sister_element + sister_element

example:

 chapter + section { margin-top: -5mm }

'''selection of an element that has a certain attribute''':

:  element[attribute]

Example:

 Title[status] { color: blue; }

(all titles that have a status attribute are rendered in blue )

'''selection of an element that has an attribute with a given value''':

:  element[attribute="value"]

Example:

 Title[status="draft"] { color: red; }

'''Selection of an element that has an attribute with a given value in a comma-separated list''':

 Title[status~="draft"] { color: blue; }

=== Cascading and inheritance ===

'''Rule ordering'''

* (Roughly speaking): '''''the last rule found will win'''''. E.g. if you define text color in more than one place, the '''color:''' property found in the last rule encountered will be used

'''Inheritance of properties from parents'''
*'''Child elements usually inherit properties from the parent elements''' ! If you don’t like this you have to change explicitly these properties

'''Inheritance of properties example''':
XML
<source lang="xml">
 <section>
   <title>Here is a title</title> 
   <para>Here is a paragraph> 
 </section>
</source>

CSS
<source lang="CSS">
 section {font-family:Arial}
 title {font-family:Helvetica}
 /* para will inherit font-family from section, i.e. Arial */
</source>

=== Simple page example ===

XML file: [http://tecfa.unige.ch/guides/xml/examples/css/simple-page.xml simple-page.xml]

<source lang="xml">
 <?xml version="1.0" ?>
 <?xml-stylesheet href="simple-page.css" type="text/css"?>
 <page updated="jan 2007">
  <title>Hello friend</title>
  <content> Here is some content  </content> 
  <content> Here is some more content :) </content> 
  <comment> Written by DKS/Tecfa </comment>
 </page>
</source>

CSS: [http://tecfa.unige.ch/guides/xml/examples/css/simple-page.css simple-page.css]

<source lang="xml">
 /* Definitions that apply to the whole hierarchy */
 page { font-family:Times; line-height:1.5;}
 /* Margins for the box of the root element */
 page { margin-top:3cm; margin-left:3cm; margin-right:3cm; }

 /* Block elements */

 title, content, comment { display:block; }

 title { font-family: Arial; font-size:1.5em;}
 content { }
 comment { font-style:italic; }
</source>

=== Simple list example ===

[http://tecfa.unige.ch/guides/xml/examples/css/simple-list.xml simple-list.xml]

<source lang="xml">
 <?xml version="1.0" ?>
 <?xml-stylesheet href="simple-list.css" type="text/css"?>
 <page updated="jan 2007">
  <title>Hello friend</title>
  <list>
    <item> Here is an item that will be somewhat longer. Here is an item that will be somewhat longer. </item> 
    <item> Here is item B</item> 
    <item> Here is a C item </item> 
  </list>
  <comment> Written by DKS/Tecfa , jan 2007 </comment>
 </page>
</source>

[http://tecfa.unige.ch/guides/xml/examples/css/simple-list.css simple-list.css]

<source lang="xml">
 /* Definitions that apply to the whole hierarchy */
 page { font-family:Times; line-height:1.5;}
 page { margin-top:3cm; margin-left:3cm; margin-right:3cm; }
 title, list, comment { display:block; }

 title { font-family: Arial; font-size:1.5em;}
 item {display:list-item; list-style-position:outside; 
       list-style-type: disc; }
 comment { font-style:italic; }
</source>

=== More complex examples ===

* http://tecfa.unige.ch/guides/css/ex-xml/stepbystep/
** http://tecfa.unige.ch/guides/css/ex-xml/stepbystep/stepbystep-ex.xml
** http://tecfa.unige.ch/guides/css/ex-xml/stepbystep/stepbystep.css

* http://tecfa.unige.ch/guides/xml/examples/recit/
** http://tecfa.unige.ch/guides/xml/examples/recit/story-grammar.xml
** http://tecfa.unige.ch/guides/xml/examples/recit/story-grammar.css

* [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cd-list.xml cd-list.xml]
** [http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cd-list.css cd-list.css]

== Positioning ==

By default elements of an XML (or HTML) file are displayed in sequential order. It is possible to put an element wherever you wish. Positioning is not easy (avoid if you are new to CSS)

=== Simple absolute positioning ===

XML: [http://tecfa.unige.ch/guides/xml/examples/css/simple-positioning.xml simple-positioning.xml]
<source lang="xml">
 <?xml version="1.0" ?>
 <?xml-stylesheet href="simple-positioning.css" type="text/css"?>
 <page updated="jan 2007">
  <title>Hello friend</title>
  <hotstuff>
    <item> Here is an item that will be somewhat longer. Here is an item that will be somewhat longer. </item> 
    <item> Here is item B</item> 
    <item> Here is a C item </item> 
  </hotstuff>
  <content> 
   <para> Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. Here is some standard content. </para>
  <comment> Written by DKS/Tecfa , jan 2007 </comment>
  </content>
 </page>
</source>

CSS: [http://tecfa.unige.ch/guides/xml/examples/css/simple-positioning.css simple-positioning.css]

<source lang="CSS">
 /* Definitions that apply to the whole hierarchy */
 page { font-family:Times; line-height:1.5;}

 /* Margins for the box of the root element */
 page { margin-top:3cm; margin-left:3cm; margin-right:3cm; }

 /* Block elements */

 title, hotstuff, content, comment { display:block; }

 title { font-family: Arial; font-size:1.5em;}
 content { position: absolute; left: 0; width: 60% }
 hotstuff { position: absolute;
        right: 0;
        width: 20%;
        font: 10px/14px verdana, sans-serif;
        color: white;
        margin: 5px 5px 5px 5px;
        padding: 1cm;
        background-color: black; }

 item {display:list-item; list-style-position:outside; list-style-type: disc; }
 comment { font-style:italic; }
</source>

== Data-centric XML with CSS ==

CSS isn’t made for data-centric XML, however one can use CSS to add some extra information.
* Data transformation is very weak in CSS (e.g. you barely can add extra text to the contents of an element) 
* There is no easy way to display attribute values.

=== The CSS 2.1 "content" property ===

Allows to deal somewhat with data-centric XML. Below is an example.

XML: [http://tecfa.unige.ch/guides/xml/examples/css/simple-content.xml simple-content.xml]

<source lang="xml">
 <?xml version="1.0" ?>
 <?xml-stylesheet href="simple-content.css" type="text/css"?>
 <page updated="jan 2007">
  <title>Hello friend</title>
  <list>
    <item price="10"> White plate </item> 
    <item price="20"> Gold plate </item> 
    <item price="15"> Silver plate </item> 
  </list>
  <comment> Written by DKS/Tecfa , jan 2007 </comment>
 </page>
</source>

CSS: [http://tecfa.unige.ch/guides/xml/examples/css/simple-content.css simple-content.css]

<source lang="CSS">
 /* Definitions that apply to the whole heirarchy */
 page { font-family:Times; font-size:14pt; line-height:1.5;}

 /* Margins for the box of the root element */
 page { margin-top:2cm; margin-left:2cm; margin-right:2cm; }

 /* Block elements */

 title, list, comment { display:block; }
 title { font-family: Arial; font-size:1.5em;}

 list:before { content:"Products on sale:"; font-size:1.2em; }
 item        { display:block; }
 item:after  { content:" - Price: " attr(price) " CHF";}

 comment { font-style:italic; }
</source> 

'''The :before and :after selectors''' can be used to add contents before or after element contents (doesn’t work with IE6/7/8)

'''The content property:'''
: can access attribute values: attr(attribute_name)
: can add extra information strings.

== Use XHTML tags and XLink ==

You may add XHTML tags to your XML, but you will have to adjust your DTD or other Schema file in order to keep documents valid. If you only plan to use links but no pictures, you should use XLink. In any case, you also should learn [[XSLT]], a powerful transformation language that allows transforming any XML content into a rendering format like HTML or PDF.

=== Use XHTML tags to display pictures and links ===

To make your life a bit simpler, you may include XHTML tags in your XML in order to create links and insert pictures. If you use a DTD or another Schema, you should modify these accordingly. Pictures inserted into XML also can be used to style contents.  I discourage this, since that way data isn’t anymore separated from styling. Rather learn [[XSLT]] !

Below is a simple well-formed XML document that uses a bit of XHTML. Notice how the html namespace <code>xmlns:html="http://www.w3.org/1999/xhtml"</code> is declared in the root element <code>page</code>

XML: [http://tecfa.unige.ch/guides/xml/examples/css/simple-content-htmlns.xml simple-content-htmlns.xml]

<source lang="xml">
 <?xml version="1.0" ?>
 <?xml-stylesheet href="simple-content-htmlns.css" type="text/css"?>
 <page xmlns:html="http://www.w3.org/1999/xhtml" updated="jan 2007">
  <title>Hello friend</title>
  <list>
    <html:img src="photo.jpg"/>
    <item price="10"> White plate </item> 
    <item price="20"> Gold plate </item> 
    <item price="15"> Silver plate </item> 
  </list>
  <comment> Written by DKS/Tecfa , jan 2007 </comment>
 </page>
</source>

CSS: [http://tecfa.unige.ch/guides/xml/examples/css/simple-content-htmlns.css simple-content-htmlns.css]
: same as simple-content.css

If '''you you plan to use XHTML tags''', you will have to adjust your DTDs or other schema definitions''' (if you do use one). Remember: XML knows '''''nothing''''' about anything. The code fragment below shows (1) how to declare the XHTML namespace, and (2) simple versions of the ''a'' and ''img'' Xhtml elements.
<source lang="XML">
    <!ATTLIST YOUR_ROOT_ELEMENT xmlns:html CDATA #FIXED "http://www.w3.org/1999/xhtml">
     .....
    <!ELEMENT html:img EMPTY>
    <!ATTLIST html:img src CDATA #REQUIRED>
    <!ELEMENT html:a (#PCDATA)>
    <!ATTLIST html:a href CDATA #REQUIRED >
</source>

'''XML with XHTML example'''

The next example uses XHTML for linking and is available as [http://tecfa.unige.ch/guides/xml/examples/recit/story-grammar-con-xhtml.dtd story-grammar-con-xhtml.dtd], [http://tecfa.unige.ch/guides/xml/examples/recit/story-grammar-con-xhtml.xml story-grammar-con-xhtml.xml] and [http://tecfa.unige.ch/guides/xml/examples/recit/story-grammar.css story-grammar.css]

<source lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<!ELEMENT STORY (title, context, problem, goal, THREADS, moral, INFOS)>
<!ATTLIST STORY xmlns:html CDATA #FIXED "http://www.w3.org/1999/xhtml">

<!ELEMENT THREADS (EPISODE+)>
<!ELEMENT EPISODE (subgoal, ATTEMPT+, result) >
<!ELEMENT ATTEMPT (action | EPISODE) >
<!ELEMENT INFOS ( ( date | author | html:a )* ) >

<!ELEMENT title (#PCDATA) >
<!ELEMENT context (#PCDATA|html:img)* >
<!ELEMENT problem (#PCDATA) >
<!ELEMENT goal (#PCDATA) >
<!ELEMENT subgoal (#PCDATA) >
<!ELEMENT result (#PCDATA) >
<!ELEMENT moral (#PCDATA) >
<!ELEMENT action (#PCDATA) >
<!ELEMENT date (#PCDATA) >
<!ELEMENT author (#PCDATA) >

<!ELEMENT html:a (#PCDATA)>
<!ATTLIST html:a
     href CDATA #REQUIRED >

<!ELEMENT html:img (#PCDATA)>
<!ATTLIST html:img
     src CDATA #REQUIRED >

</source>

For a reason I don't understand, the namespace prefix must be called ''html'' (e.g. not ''xh''), else IE 8 will not display the link. Firefox would ...

=== XML plus xlink ===

Below is a DTD example using XLink (the XML linking language), available as [http://tecfa.unige.ch/guides/xml/examples/recit/story-grammar.dtd story-grammar.dtd] and [http://tecfa.unige.ch/guides/xml/examples/recit/story-grammar.xml story-grammar.xml]

<source lang="xml">
<?xml version="1.0"?>

<!ELEMENT STORY (title, context, problem, goal, THREADS, moral, INFOS)>
<!ATTLIST STORY xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">

<!ELEMENT THREADS (EPISODE+)>
<!ELEMENT EPISODE (subgoal, ATTEMPT+, result) >
<!ELEMENT ATTEMPT (action | EPISODE) >
<!ELEMENT INFOS ( ( date | author | a )* ) >

<!ELEMENT title (#PCDATA) >
<!ELEMENT context (#PCDATA) >
<!ELEMENT problem (#PCDATA) >
<!ELEMENT goal (#PCDATA) >
<!ELEMENT subgoal (#PCDATA) >
<!ELEMENT result (#PCDATA) >
<!ELEMENT moral (#PCDATA) >
<!ELEMENT action (#PCDATA) >
<!ELEMENT date (#PCDATA) >
<!ELEMENT author (#PCDATA) >

<!ELEMENT a (#PCDATA)>
<!ATTLIST a
     xlink:href CDATA #REQUIRED
     xlink:type CDATA #FIXED "simple"
>
</source>

=== A last example and again some advice ===

'''First operations when writing a CSS for XML''':
* Use the root element to define margins, default font, etc.
* Decide which elements are blocks and which ones are inline
* Identify "special elements" like titles and lists

'''Some example CSS rules'''

<source lang="CSS">
 /* title and para elements are blocks. They have an extra margin */
 '''title, para {display: block; margin: 0.5em;}'''
 /* title element font is 1.5 as big */
 '''title {font-size: 1.5em;}'''
 /* item elements are list elements, we use bullet style */
 '''item {display: list-item;list-style-type: disc;}'''
 /* strong is an inline element. Uses italic style and blue color */
 '''strong {display: inline; font-style: italic; color: rgb(000,000,128);}'''
</source>

== If your stylesheet doesn’t display as it should ==

See also: [[CSS tutorial]]
* Validate your CSS !! E.g. upload the file to the [http://jigsaw.w3.org/css-validator/  CSS Validation Service]
* Do not use the "class" selector in XML (unless you defined such an attribute in your DTD)
* If you try advanced CSS features, make sure to check a compatibility table, e.g. at [http://www.quirksmode.org/css/contents.html quirksmode] and check if the CSS features you use are implemented in your browser

== Links ==

* [http://www.css-zibaldone.com/articles/xml/cssxml.html CSS and XML]. Tutorial by Gabriele Romanato. Quote: In this article I'll explain how to format a well-formed XML document by using CSS. The techniques explained below can be used to stylize an (X)HTML document as well.


[[Category: Web technology tutorials]]
[[Category: XML]]
[[Category: CSS]]
{{edutechwiki}}