CSS for XML tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 378: Line 378:
Note: The [[XLink]] standard allows to create hyperlinks for any XML. But since IE can't handle this, you just may use the HTML "a" tag in the same way as the img tag. If '''you you do use a DTD''', XHTML tags that you plan to use also must be part of DTD. Remember: XML knows '''''nothing''''' about anything.  
Note: The [[XLink]] standard allows to create hyperlinks for any XML. But since IE can't handle this, you just may use the HTML "a" tag in the same way as the img tag. If '''you you do use a DTD''', XHTML tags that you plan to use also must be part of DTD. Remember: XML knows '''''nothing''''' about anything.  


Below is a DTD example using XLink, available as [http://tecfa.unige.ch/guides/xml/examples/recit/story-grammar.dtd story-grammar.dtd]
Below is a DTD example using XLink, 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">
<source lang="xml">
Line 442: Line 442:


</source>
</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 ...


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

Revision as of 00:08, 3 November 2010

<pageby nominor="false" comments="false"/>

Learning goals
  • Understand the structure of cascading stylesheet (CSS) rules
  • Learn how to include CSS in HTML files and/or how to associate a CSS file with HTML
  • Learn how to use CSS with your own XML tags
Prerequisites
Moving on
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.

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 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. However using CSS is easier and can do a perfect job for 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. An XML elements like "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.

CSS sometimes is used to make 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 ! 

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

Example: 

 <?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>

Basic operations

  1. Define default rendering of text elements, e.g. font-size and font-family
  2. Define for each element if it is a block, inline or list element
  3. Identify titles

Here is a little example: 

/* 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, rendered italic and blue  */
strong {display: inline; font-style: italic; color: rgb(000,000,128);}

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

CSS 2 selectors were already introduced in the CSS tutorial. Below you will find the same information, 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 for HTML, XHTML and any text-centric XML (XML needs a navigator that supports at least partially CSS2)

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

selection 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 

 <section>
   <title>Here is a title</title> 
   <para>Here is a paragraph> 
 </section>

CSS 

 section {font-family:Arial}
 title {font-family:Helvetica}
 /* para will inherit font-family from section, i.e. Arial */

Simple page example

XML file: simple-page.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>

CSS: simple-page.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, content, comment { display:block; }

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

Simple list example

simple-list.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>

simple-list.css 

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

More complex examples

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: simple-positioning.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>

CSS: simple-positioning.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; }

Data-centric XML with CSS

CSS isn’t made for data-centric XML:

  • 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.

There are a few tricks for CSS 2 browsers, .e.g use the content or table properties (not implemented in IE 6/7 !)

The CSS 2.1 "content" property

Allows to deal somewhat with data-centric XML (not implemented in IE 6/7/8, yes IE8 is just CSS 2.0, but not CSS 2.1 compliant). Below is an example.

XML: simple-content.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>

CSS: simple-content.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; }

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 of XHTML tags

To make your life a bit simpler, you may include XHTML tags in your XML. If you use a DTD or another Schema, you should modify these accordingly.

Use XHTML tags to display pictures and links

Pictures inserted into XML can be used to convey extra information to the reader. I discourage this, since that way data isn’t anymore separated from styling. Rather learn XSLT !

XML: simple-content-htmlns.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>

CSS: simple-content-htmlns.css

same as simple-content.css

Note: The XLink standard allows to create hyperlinks for any XML. But since IE can't handle this, you just may use the HTML "a" tag in the same way as the img tag. If you you do use a DTD, XHTML tags that you plan to use also must be part of DTD. Remember: XML knows nothing about anything.

Below is a DTD example using XLink, available as story-grammar.dtd and story-grammar.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"
>

The next version uses XHTML for linking and is available as story-grammar-con-xhtml.dtd, story-grammar-con-xhtml.xml and story-grammar.css 

<?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 >

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 ...

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 

 /* 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);}'''

If your stylesheet doesn’t display as it should

See also: CSS tutorial

  • Validate your CSS !!
  • Do not use the "class" selector in XML (unless you defined such an attribute in your DTD)
  • Make sure to check a compatibility table, e.g. at quirksmode and check if the CSS property you use is implemented in your browser
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=CSS_for_XML_tutorial&oldid=29671"