CSS for XML tutorial: Difference between revisions
m (Created page with '{{under construction}} {{stub}} {{web technology tutorial}} <pageby nominor="false" comments="false"/> <div class="tut_goals"> ; Learning goals * Understand the structure of cas…') |
m (using an external editor) |
||
Line 10: | Line 10: | ||
* Learn how to use CSS with your own XML tags | * Learn how to use CSS with your own XML tags | ||
; Prerequisites | ; Prerequisites | ||
* | * [[CSS tutorial]] | ||
* [[XML]] | |||
; Moving on | ; Moving on | ||
* | * [[CSS positioning tutorial]] | ||
; Level and target population | ; Level and target population | ||
* | * | ||
Line 18: | Line 19: | ||
* THIS '''WORK IN PROGRESS'''. I just imported some "text" from teaching slides and now will have to work ... - [[User:Daniel K. Schneider|Daniel K. Schneider]] 18:56, 7 September 2009 (UTC). | * THIS '''WORK IN PROGRESS'''. I just imported some "text" from teaching slides and now will have to work ... - [[User:Daniel K. Schneider|Daniel K. Schneider]] 18:56, 7 September 2009 (UTC). | ||
</div> | </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 database, or obtained through a web service. | |||
In most cases, you would [[XSLT]] for styling. However using is easier and can do a perfect job for text-centric contents. | |||
Otherwise, 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 pratical difference is that HTML includes default style for each element. XML elements '''don't have any''' default styling. In other words, you will have to define properties for '''each''' of your elements. | |||
=== 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> | |||
== CSS 2 selectors == | |||
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 partically 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: | |||
H1 + H2 { 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-sep. 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''' | |||
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-familiy:Helvetica} | |||
'''/* para will inherit font-family from section, i.e. Arial */''' | |||
</source> | |||
== Some complete examples == | |||
All example XML and CSS files can be found in the "http://tecfa.unige.ch/guides/xml/examples/css/" directory | |||
=== 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: 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 === | |||
'''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> | |||
'''simple-list.css''' | |||
<source lang="xml"> | |||
/* Definitions that apply to the whole heirarchy */ | |||
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> | |||
== 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 heirarchy */ | |||
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 "content" property === | |||
Allows to deal somewhat with data-centric XML (not implemented in IE 6/7) | |||
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. | |||
'''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 === | |||
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 | |||
: '''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 [http://www.quirksmode.org/css/contents.html quirksmode] and check if the CSS property you use is implemented in your browser | |||
[[Category: Web technology tutorials]] | [[Category: Web technology tutorials]] |
Revision as of 10:19, 8 September 2009
This article or section is currently under construction
In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")
<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
- Remarks
- THIS WORK IN PROGRESS. I just imported some "text" from teaching slides and now will have to work ... - Daniel K. Schneider 18:56, 7 September 2009 (UTC).
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 obtained through a web service.
In most cases, you would XSLT for styling. However using is easier and can do a perfect job for text-centric contents.
Otherwise, 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 pratical difference is that HTML includes default style for each element. XML elements don't have any default styling. In other words, you will have to define properties for each of your elements.
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>
CSS 2 selectors
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 partically 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:
H1 + H2 { 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-sep. 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
XML
<section>
<title>Here is a title</title>
<para>Here is a paragraph>
</section>
CSS
section {font-family:Arial}
title {font-familiy:Helvetica}
'''/* para will inherit font-family from section, i.e. Arial */'''
Some complete examples
All example XML and CSS files can be found in the "http://tecfa.unige.ch/guides/xml/examples/css/" directory
Simple page
XML: 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
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 heirarchy */
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; }
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 heirarchy */ 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 "content" property
Allows to deal somewhat with data-centric XML (not implemented in IE 6/7) 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.
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
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
- 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