[Top]
More advice for the full screen mode.
   
All topic groups:
I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groups > Front page of CSS-guide > Extra pages > K How to use CSS with XML documents

K How to use CSS with XML documents

Topics

Common

Related to HTML XML is an independent language. They have however as their "parent" language SGML. XML is also a metalanguage, which gives some basic rules, how XML-based languages should build. It has more exact syntax than HTML.

Unlike HTML, XML doesn't have any formatting code as such. XML is a pure markup language, where all start-tags, end-tags and empty elements tags are as such only markup codes. The formatting and presentation of XML-documents must be define with assistant languages (for example with CSS and HTML).

In this case I handle only how to give presentation to XML-documents with CSS. Elements are not defined with any other language. It is possible to create to XML-documents DTD-file or XSD (XML Schema Document) file, which describes the correct usage of elements and attributes. To use DTD-files or XSD-files is not necessary. Common to all XML-based languages is the usage of declarations at the beginning of the document (I explain them in the (X)HTML notes[S]), for example:

<?xml version="1.0"?>
<?xml-stylesheet href="XML.css" type="text/css"?>
<!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">

Into CSS2 has been added certain features especially for XML + CSS implementations. To be a proper XML user agent, the UA should follow principles:

  1. Supporting standard syntax and XML-principles.
  2. Because XML doesn't have common attributes like HTML, it is important to support generic attribute What are selectors, classes and id-attributes[S][Pw].
  3. Enough wide implementation of the display property[S][Pw] in order to create simple tables and list presentations.

Note 1. Concerning the first principle MS IE 5.0 can't regard a XML + CSS browser, because it supports some obsolete working draft based <?xml:stylesheet ...?> proposed syntax to xml-stylesheet declarations. The existing standard syntax is <?xml-stylesheet ...?>, which is supported in MS IE 5.5. At this respect, MS IE 5.5 is the first Windows IE, which can be regarded as an XML-browser.

Note 1. MS IE like Opera 4.x+ support however CSS-rules, which are intended only to HTML-documents (look at the page What are selectors, classes and id-attributes from the place Attribute What are selectors, classes and id-attributes[S]).

Note 3. Concerning the second and third principle, only Opera 4.x+ and Netscape 6.x are browsers, which can be regard as proper XML + CSS browsers. MS IE 5.5 is not a proper XML + CSS browser, because it doesn't support necessary CSS2-features.

The example document, which I handle in this page is not fully functional web-document. CSS is a pure formatting language and XML is a pure markup language. The result is an XML-document without functional linking system. XML is not alone a hyper text markup language. A fully functional XML-document needs some kind of linking system, which can be done with different ways (I don't handle in this page linking possibilities)). Example documents in this pages resembles an ordinary word processor document.

Usage of CSS

I take an example document, which use the same element type names as HTML-documents. I give to that document only a CSS-file (<?xml-stylesheet href="xml-sheet.css" type="text/css" ?>).

If that file is not given, MS IE 5.x shows only the source code, but the browser indents the code ([M][S][Pw]). If the linked CSS-file is not found or it doesn't include any information, the text is after each others, for example (I have given an example page, which refers to an an-existing CSS-file):

<?xml version="1.0"?>
<?xml-stylesheet href="xml-sheet2.css" type="text/css" ?>
<html>
<head>
<meta name="robots" content="noindex">meta1- elementti META -</meta>
...
<style type="text/css>Uutta tyyliä - elementti STYLE -</style>
<title>Problems in the new technology - elementti TITLE -</title>
</head>
<body>
<h2><a name="Uutta">Problems</a></h2>
<p><b>Structural solutions</b></p>
...

the browser shows the code at this way ([M][S][Pw]):
meta1- elementti META - Uutta tyyliä - elementti STYLE- Problems in the new technology - elementti TITLE - Problems Structural solutions ...
Elements are separated only with a space and the beginning and end can't know

When style sheets are used almost all element must be defined at some way. Only such empty elements, which don't have after them any text are not necessary to define. In this situation is necessary to remember, that elements head and body have no basic level difference without a DTD-file. Because it doesn't have standard elements, you can freely change the behavior of elements, which are inside the head element between normal and empty elements. You can also write between <head></head> text and it is not an error. It is only important, that the document has one root element and the encoding is well-formed.

This expands and limits the usage of style sheets. You can show the content of the element title. It is not really TITLE only to browsers, which don't understand XML-documents and which interpret XML as HTML. But in XML-browsers is doesn't fulfil any task in the example documents, because the meaning of this element has not defined. But you can't hide with display:none ordinary used meta elements, if you have put text after it, for example ([M][S][Pw]):

<meta name="robots" content="noindex" />meta1- elementti META -

In this case the element has a task, but it doesn't come from the element itself but from the search robots, which identifies the element! But if I give it as tasks, which concerns for example MS IE 5.0, the UA would not fulfil it. If the following code would be in a HTML-document, the UA would go to another page. In the example XML-file this doesn't happen. The attributes of the element would be the same if the browsers would get attribute="0".

<meta http-equiv="refresh" content="0; url=../Teaching/XSL.php3" />

This concerns also the HTML-elements HR and BR, if they are used in XML-documents. If you put to the element meta both start- and end-tags, you can use it as a formatting code even if you can't do so with HTML-elements. Without any content they can be used limited as formatting codes (display:block creates a line break). To Opera 4.x+ and Netscape 6.x you can define meta:before and meta:after, when you can use them wider as formatting codes. To use empty elements as formatting codes is however limited compared to element, which have both start- and end tags.

Following is an example of a CSS-file, which has a head element and the content of that element is also defined. Only the element meta is hided ([M][S][Pw]):

head {font-family:Verdana, sans-serif; display:block; background-color:aqua}
meta {display:none}
style {display:block; background-color:yellow}
title {display:block; background-color:yellow; border: 1px solid #660033}
body {font-family:Verdana, sans-serif; display:block}
h2 {font-size:21px; display:block; text-align:center;}
p {display:block; margin-top:1em;}

Now the browser formats the document! Note, that is always necessary to define margins to the element p - in other situation elements are tightly after each others. After this definition the page begins to resemble HTML-documents! The start- and end-tags of CSS-defined elements can work as formatting codes. In fact the example document has more elements, which I have defined, but undefined elements don't affect anything to the final presentation (the presentation of the element b has not defined).

Because XML is not a formatting language, XML-elements are not as such block level or in-line elements - the existence of them must be defined with assistance language or DTD-files. From the sight of XML it is not incorrect to set an element, which is defined with CSS as block level element inside an inline element. When the presentation is defined with CSS, the author of the site must take the response to set elements correctly. It is not possible to test the nesting of elements with a validator, if DTD-files are not used. Incorrect setting of elements might cause, that the page is rendered badly.

An another element. I take as an example a file, which have the following code:

<table>
   <tr>
      <td>text</td>
      <td>text</td>
   </tr>
</table>

MS IE 5.0 selain joko näyttää tuon juuri tuon tapaisena, jos dokumentin elementeiltä puuttuu kuvaus. Yksikään noista koodeista ei toimi ilman kuvausta muotoilukoodina. XML:ssä tuo koodisarja on vain sarja tietyn nimisiä elementtejä ja on aivan sama vaikka niiden tilalla lukisi näin:

<table-mainElement>
   <table-row>
      <table-cell>text</table-cell>
      <table-cell>text</table-cell>
   </table-row>
</table-mainElement>

In principle it is possible to define with CSS, that the element table-mainElement is formatted like the HTML-element TABLE etc. Indeed the formatting works only with Opera 4.x+ and Netscape 6.x+ browsers. MS IE 5.x can't format with CSS a table. It can't either format with CSS list items (look at possible values to the property display from the page How to put CSS into Web pages[S][Pw]).

If in XML-documents is necessary to use tables or list presentations, the formatting of documents must made with XSL. In practise final documents must be XHTML-documents, which might have additional elements from other XML-based languages.

Linking and other XML features

Netscape 6.0 supports linking with XLink, when it is possible to get proper linking. Opera uses proprietary CSS-features, when concerning linking it is not a proper XML-browser.

To MS IE can get working linking by ruin the xmlns attribute. MS IE 5.5 supports DTD-files and at this respect is it a real XML-browser. Opera and Mozilla 0.7 don't react errors in DTD-files, which means that they don't read them. IE 5.5 supports also schemas, when taking account all features, it can regard as the most advanced XML-browser.

None of existing browsers has a proper XML-implementation, because it needs at least:

  1. Opera 4.x+ level display-implementation and supporting of generic attribute selectors.
  2. DTD and/or schema support like in MS IE 5.5.
  3. XLink-implementation of Mozilla.

Note 1. XSL-implementation is not necessary, because it is reasonable to use XSL only in server-side applications. If XSL is supported in browsers, it is just easier to test it. CSS in much more important in User Agents.

Note 2. Some of the features are still under construction and they can be changed. Then browsers might support them proprietary way, if we think this matter at the sight of official recommendations. At this moment it is impossible to exist a fully XML-capable browser. In fact browsers are Working Draft -level in XML.

W3C: XML Linking Language (XLink), XSL Transformations Version 1.0 (XSLT), Schema Modules.
Other pages: CSS notes 2[S].
 Other sites: Opera Software: Web specifications supported in Opera 5 - the details; Microsoft, XML Schema Refere.

[Top]
   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004