CSS: default styles for XML elements

When dealing with CSS and XML is crucial to understand how XML is rendered by default in a web browser. Since XML has no default DTD associated with it, it's practically impossible for a web browser to give default styles to XML elements. In fact, XML elements have no default styles. Unlike HTML and XHTML elements, XML elements are all rendered as inline elements. It's up to the web developer to stylize XML elements. However, there are a couple of things you need to know before doing this.

The root element

The root element is not "magic" as in HTML. Its width and height and, consequently, its background color will not automatically stretch to cover the whole viewport. You have to manually set this behavior in your style sheet:

root {
    display: block;
    width: 100%;
    height: 100%;
    background: silver;
    min-height: 100%;
}

Class and ID selectors

Class and ID selectors have a different meaning in XML. In fact, they're not considered as a part of the default set of attributes of an element. So the following rules will fail:

element.foo {color: blue;}
section#bar {color: green;}

Instead, you should use attribute selectors for this task, like so:

element[class="foo"] {color: blue;}
section[id="bar"] {color: green;}

Namespaces

For namespaces, you must use namespace selectors, like so:

@namespace element 'http://www.site.com/ns/elements/element';

element|ns {color: blue;}

Default display roles

Since all XML elements are displayed as inline by default, you must explicitly set a default display role for each element in your style sheet using the display property and its values. Example:

para {display: block;}
item {display: list-item;}