Styling xml with css

How to Style XML Documents With CSS

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

Creating an XML document, writing the DTD, and parsing it with a browser is all fine, but how will the document display when you view it? XML is not a language of presentation. Documents written with XML will have no formatting at all.

How to View XML

The key to viewing XML in a browser is Cascading Style Sheets. Style sheets allow you to define every aspect of your XML document, from the size and color of your text to the background and position of your non-text objects.

Say you have an XML document:

 
 
 
]> 
 
 
Judy 
Layard 
Jennifer 
Brendan 

 

If you were to view that document in an XML ready browser, such as Internet Explorer, it would display something like this:

Judy Layard Jennifer Brendan
 

But what if you wanted to differentiate between the parent and child elements? Or even make a visual distinction between all the elements in the document. You can’t do that with XML, and it is not a language that is meant to be used for display.

Styling XML

But luckily, it is easy to use Cascading Style Sheets, or CSS, in XML documents to define how you want those documents and applications to display when viewed in a browser. For the above document, you can define the style of each of the tags in the same way you would an HTML document.

For example, in HTML you might want to define all text within paragraph tags (

p font-family : verdana, geneva, helvetica; 
background-color : #00ff00; 
>
 

The same rules work for XML documents. Each tag in XML can be defined in the XML document:

family color : #000000; 
> 
 
parent font-family : Arial Black; 
color : #ff0000; 
border : solid 5px; 
width : 300px; 
> 
 
child font-family : verdana, helvetica; 
color : #cc0000; 
border : solid 5px; 
border-color : #cc0000; 
>
 

Once you have your XML document and your stylesheet is written, you need to put them together. Similar to the link command in HTML, you put a line at the top of your XML document (below the XML declaration), telling the XML parser where to find the stylesheet. For example:

As stated above, this line should be found below the declaration but before any of the elements in the XML document.

Putting it all together, your XML document would read:

 
 
 
 
]> 
 
 
Judy 
Layard 
Jennifer 
Brendan 

 

Источник

Styling XML data with CSS

This article shows how you can use CSS to style XML data.

Information: XML data

XML (eXtensible Markup Language) is a general-purpose language for any kind of structured data.

By default, your Mozilla browser displays XML in a format very similar to the original data in the XML file. You see the actual tags that define the data’s structure.

But by linking a CSS stylesheet with the XML document, you can define other ways to display it. To do this, your stylesheet uses rules that map tags in the XML document to the display types used by HTML.

Example

For example, you have data in an XML document uses tags. You want the document’s INFO elements to be displayed like HTML paragraphs.

In the document’s stylesheet, you specify how the elements are to be displayed:

INFO < display: block; margin: 1em 0; > 

The most common values for the display property are:

||
| block |Displayed like HTML’s DIV (for headings, paragraphs)|
| inline |Displayed like HTML’s SPAN (for emphasis within text)|

Add your own style rules that specify the font, spacing and other details in the same way as for HTML. Other values of display display the element like a list item, or like a component of a table.

For the full list of display types, see the display property. Using CSS alone, the structure of the display must be the same as the structure of the document. Other technologies can modify the structure of the display—for example, XBL can add content, and JavaScript can modify the DOM.

Action: An XML demonstration

1. Make a new XML file, doc9.xml . Copy and paste the content from here, making sure that you scroll to get all of it:

   planet> ocean> name>Arctic name> area>13,000 area> depth>1,200 depth> ocean> ocean> name>Atlantic name> area>87,000 area> depth>3,900 depth> ocean> ocean> name>Pacific name> area>180,000 area> depth>4,000 depth> ocean> ocean> name>Indian name> area>75,000 area> depth>3,900 depth> ocean> ocean> name>Southern name> area>20,000 area> depth>4,500 depth> ocean> planet> 

/*** XML demonstration ***/ planet:before < display: block; width: 8em; font-weight: bold; font-size: 200%; content: "Oceans"; margin: -.75em 0px .25em -.25em; padding: .1em .25em; background-color: #cdf; > planet < display: block; margin: 2em 1em; border: 4px solid #cdf; padding: 0px 1em; background-color: white; > ocean < display: block; margin-bottom: 1em; > name < display: block; font-weight: bold; font-size: 150%; > area < display: block; > area:before < content: "Area: "; > area:after < content: " million km\B2"; > depth < display: block; > depth:before < content: "Mean depth: "; > depth:after < content: " m"; > 

• The superscript 2 (in “million km²”) a Unicode character, coded as \B2 in the CSS file.
• The heading, «Oceans», has a negative top margin, moving it up so it is displayed on top of the border.

See also

Exercise question

Change the stylesheet so that it displays the document as a table.

Attributions

• This article contains content originally from external sources, including ones licensed under the CC-BY-SA license.
• Portions of this content copyright 2012 Mozilla Contributors. This article contains work licensed under the Creative Commons Attribution-Sharealike License v2.5 or later. The original work is available at Mozilla Developer Network: Article

Источник

How to add style to XML

The CSS2 Recommendation contains a brief tutorial on using CSS with XML (see § 2.2). At the time CSS2 was written the official specification for style in XML wasn’t ready. Here is what that tutorial should have contained. Note that the examples use CSS, but in most cases the style rules can also be written in XSL.

External style sheets

HTML has a link element to link to external style sheets, but not every XML-based format will have such an element. If there is no suitable element, you can still attach external style sheets by means of the xml-stylesheet processing instruction like this:

This processing instruction (PI) must come before the first tag of the document. The type=»text/css» is not required, but it helps the browser: if it doesn’t support CSS, it knows it won’t have to download this file.

Just as with the link element of HTML, there can be multiple xml-stylesheet PIs and they can have attributes to set the type, medium and title.

Example

Here is a larger example. Let’s assume we have three style sheets. The two last ones are each other’s alternative, and the reader of the document may choose which one to use. Except when the document is printed, in which case we only want to use the last style. Here is the common style sheet:

/* common.css */ INSTRUMENT < display: inline >ARTICLE, HEADLINE, AUTHOR, PARA
ARTICLE < font-family: sans-serif; background: white; color: black >AUTHOR < margin: 1em; color: red >HEADLINE < text-align: right; margin-bottom: 2em >PARA < line-height: 1.5; margin-left: 15% >INSTRUMENT
ARTICLE < font-family: serif; background: white; color: #003 >AUTHOR < font-size: large; margin: 1em 0 >HEADLINE < font-size: x-large; margin-bottom: 1em >PARA < text-indent: 1em; text-align: justify >INSTRUMENT

The XML document with these three style sheets linked to it looks like this:

    
Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. 

Embedded style sheets

HTML has a style element that allows the style sheet(s) to be embedded directly in the HTML file, without the need for an external file. In some cases that is easier, especially when the style sheet is very specific to that document.

Most XML-based formats will not have such an element, but the same PI that links to external style sheets can also be used to point to style sheets that are embedded in the document itself. As of February 2006, there are still technical problems with this and no formal specification exists. For example:

  
 INSTRUMENT < display: inline >ARTICLE, HEADLINE, AUTHOR, PARA < display: block >EXTRAS Fredrick the Great meets Bach .
 

In this case the type=»text/css» attribute must be present, otherwise the browser (or other program) has to guess the style sheet language. The xml-stylesheet PI now points not to an external style sheet, but to an element of the document itself. That element is identified by an id attribute that serves as the target of the link. (Depending on the particular XML format, the id attribute may be called something else; in some formats there may not be a suitable attribute at all.)

Unsolved problems

1. Because the embedded style sheet is not downloaded separately from the server, the server cannot tell the browser what the format of the style sheet is. Therefore, the type attribute is required in this case. It is undefined what happens if the attribute is omitted: is the style sheet ignored? is it assumed to be CSS? is there some algorithm to determine the language?
2. In most XML-based formats, a fragment identifier identifies a complete element, not the contents of an element. But a style sheet that starts with is not correct CSS, so it seems there needs to be an extra rule that a fragment identifier used in a style sheet PI points to the contents of an element, not to the element itself.
3. Similarly, it is undefined what happens if there are child elements inside the element that is pointed to. Does the style sheet consist of all the contents of all the elements concatenated? the contents of just the first element? or is this an error and is the whole element ignored?
4. In the example above, the URL pointed into the document itself. The fact that the browser is able to look at that URL at all indicates that it knows how to parse XML and is probably capable of finding the indicated style element. But now consider a URL that points to a fragment of an external document. In order to succesfully retrieve the style sheet, the browser must first download and parse the external document and then extract and parse the style sheet. But the type attribute only gives the type of one of the two and thus the browser cannot know if it is able to use the style sheet. It is not even defined whether the type attributes gives the type of the external document or of the style sheet embedded in it.

Other problems

1. The style sheet PI is most useful with “Generic XML,” i.e., with XML in a format that the browser doesn’t know. Thanks to the style sheet, it will at least be able to display something. Well-known formats, such as SVG, SMIL or XHTML, have their own rules for rendering that go beyond what a style sheet can specify. But there are other things that a browser also doesn’t know when the document is treated as Generic XML: in particular, it doesn’t know which attributes are ID attributes. There is a W3C Recommendation for an attribute called xml:id and if the document contains attributes of that name, it is very likely that the URL fragment points to one of those. But if there are no such attributes, the browser must try other means to determine which attributes are IDs. If the document has a DOCTYPE at the top and the browser is able to retrieve the DTD that it points to, that DTD will specify the attribute. But browsers may not be able to read DTDs or there may not be a DOCTYPE.
2. A fragment ID is only one way to point to an element in a document. Another W3C Recommendation defines XPointers to identify elements in a document without the need for ID attributes. But understanding XPointers is currently not a requirement for browsers using the style sheet PI and thus it is unclear if browser may interpret XPointers if they can or if they must ignore them.

Inline styles

HTML also allows styles to be attached directly to individual elements by means of the style attribute. Most XML-based document formats will not have such an attribute, although some may allow features ( modules) from HTML to be used inside the document.

Class attributes

The class attribute that allows you to create subclasses of elements in HTML is also not likely to be available in the majority of XML-based document formats. Of course, CSS lets you select elements based on any attribute, not just class , but the syntax is less convenient.

Here is an example. If there is a class attribute and the document format defines that it works like in HTML, we can use the notation with the dot. (Therefore, this particular example won’t work, because is not a format that browsers know as something that has class )

   s < display: none >p < display: block >p.note 
Some text.
 
class="note">A note.
 

If the document format doesn’t specify that class creates a subclass, then you’ll have to use the longer selectors with «[ ]»:

   s < display: none >p < display: block >p[class~=note] 
Some text.
 
class="note">A note.
 

If there is no class attribute, but there is something else we can use, the attribute selectors «[ ]» still apply:

   s < display: none >p < display: block >p[warning="yes"] 
Some text.
 
warning="yes">A note.
 

Site navigation

Bert Bos, style activity lead
Copyright © 1994–2022 W3C ® Privacy policy

Created 29 February 2000;
Last updated Fri 01 Apr 2022 02:39:50 PM UTC

Источник