[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]
Sei qui: Home > Altro > CSS Articles > CSS and XML
In this article I'll explain how to format a well-formed XML document by using CSS. The techniques explained below can be used to stylize an (X)HTML document as well.
To add a style sheet to a XML document, you need only to insert the following declaration at the beginning of your file.
<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet href="style.css" type="text/css"?>Keep in mind that the href attribute of the style sheet declaration works exactly as its (X)HTML counterpart of
the link element. In this case we're using a relative URL because
the style sheet shares the same directory with the XML document.
When choosing the markup for our document, we should only keep in mind that the names of the elements should be meaningful and semantic. For example, the markup for a blog could be the following.
<blog><header><title>My Blog</title></header><navigation><current>Home</current><nlink xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="simple"xlink:href="#">Articles</nlink>...omission...</navigation><content><post><ptitle>Post title</ptitle><pdate>7/19/2008</ptitle><para>Lorem ipsum dolor...</para>...omission...<plink xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="simple"xlink:href="#">Permanent link to this article</plink></post>...omission...</content><extra><etitle>Blogroll</etitle><elist><elink xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="simple"xlink:href="#">Link 1</elink>...omission...</elist></extra><footer><signature>Gabriele Romanato</signature></footer></blog>View the example - View the screenshot
As you can see, the document is rendered as a whole set of anonymous text, since browsers can't actually use their default style sheet nor their predefined algorithms to give a basic formatting to our elements which are, in fact, completely unknown to them. However, the resulting DOM tree is perfectly consistent and we can summarize it as follows.
It's the actual root element of our document.
The header section of our blog.
The document's title.
The navigation menu of our blog.
The current section of our blog.
A navigation link. To insert hyperlinks in a XML document, we can use XLink. For the time being, this feature is supported only by Gecko-based browsers.
The main section of our blog.
A post of our blog.
The title of a post.
The date of a post.
A simple paragraph.
The permanent link to a post.
A section with miscellaneous things.
The title for this section.
A list of links.
A link to an external site, for example a friend's site.
The footer section of our blog.
This element can contain the author's name or a copyright notice.
As we've seen above, our elements are unknown to browsers, so we have to specify a formatting role for each element. Let's start with declaring block-level elements.
blog, header,title, post,ptitle, pdate,para, plink,etitle, footer,signature {display: block;}View the example - View the screenshot
Now elements start to take their form. Let's go on with our root element.
The root element will set a basic backbone for our layout. The attached styles are very simple.
blog {margin: 0;width: 100%;height: 100%;min-height: 100%;background: #fff;color: #333;font: 0.85em/1.5 Arial, Helvetica, sans-serif;}View the example - View the screenshot
Since we want a full page layout, we set a width and a height equal to 100% of the browser window. The declaration of a minimum height stretches the root element until it reaches the bottom edge of the window. This declaration is especially useful when we're dealing with different background colors, due to the fact that in XML the root element is not "magic" as in (X)HTML. Now we can go on with our header.
The header will have a background image as a banner. So we can write the following.
header {height: 6em;background: #000 url("img/banner.jpg") no-repeat 0 0;color: #fff;}View the example - View the screenshot
As you can see, we've set a height in ems, so that the text and the banner's height will scale accordingly. It's important to notice that we've also specified a background color in the case that the image is not available. Obviously the text's color should be set with the right contrast.
The title will be simple text, so the styles are the following.
title {font: italic 3em/normal Georgia, serif;margin-left: 25%;}View the example - View the screenshot
We've reduced the line-height to normal in order to put the text on the top of the header.
At the same time, we've pushed the text rightwards by using a left margin expressed in percentages. Now it's time
to take care of our navigation menu.
We want a simple tabbed menu with a rollover effect and different styles for the current section. So we could write the following.
navigation {display: block;width: 100%;height: 1.4em;background: #333;color: #fff;}current, nlink {float: left;width: 10%;height: 1.4em;line-height: 1.4em;margin: 0 0.5em;text-align: center;font-weight: bold;}nlink {text-decoration: none;color: #ffc;cursor: pointer;}nlink:hover {background: #fff;color: #333;}current {text-transform: uppercase;margin-left: 1em;background: #fff;color: #333;}View the example - View the screenshot
Since we want to use floats, we have to set an explicit height for the floats container in order to prevent space from collapsing. The height of the floated elements equals the height of their container, and this is a basic aspect to grasp when dealing with tabbed menus. Moreover, the height of elements is expressed in ems, so that it scales along with text, and their width is specified in percentages, so that it scales along with browser's window. For the vertical centering of text inside the floats, we've specified a line-height equal to the height of the elements. Since the line-height of the elements is 1.4em, we have an half line-height of 0.7em, so that the text will have the same amount of space above and belove itself. The current section gains its tabbed effect by specifying a white background.
Finally, since the overwhelming majority of web browsers don't support XLink, we have to change the default appearance of the cursor by turning it into a pointer. Note that this declaration is pointless in a browser that supports XLink.
Now it's time to start stylizing our main sections, content and extra.
We want to create a two-columns layout. The styles are the following.
content {float: left;width: 58%;margin: 2%;}extra {float: left;width: 23%;margin: 2% 0;}View the example - View the screenshot
We've used floating to create a simple two-columns layout. By specifying dimensions in percentages, we've actually created a fluid layout that will scale along with browser's window.
Let's go on with the content section by using the following styles.
post {padding: 0 15%;background: transparent url("img/quote1.gif") no-repeat 8% 1%;}ptitle {margin-bottom: 0.5em;line-height: normal;border-bottom: 1px dotted #999;font: italic 1.4em Georgia, serif;color: #666;}pdate {float: right;padding: 0.4em;background: #666;color: #fff;font-weight: bold;}para {margin-bottom: 0.5em;}plink {margin-bottom: 0.5em;padding-top: 0.1em;border-top: 3px double #999;color: #00c;text-decoration: underline;text-indent: 1.4em;background: transparent url("img/file.gif") no-repeat 0 50%;cursor: pointer;}View the example - View the screenshot
Two things are interesting here: background images (on the post and plink elements) and
fluid floats (the pdate element). When dealing with background images, keep in mind that the dimensions of the
host element should be proportional to the dimensions of the hosted images. If an element is not wide enough to host a background
image, the image will be cropped or not displayed at all. Another thing to keep in mind is the order of values in the
background-position property: the first values refers to the horizontal axis (x), from left to right, while the
second refers to the vertical axis (y), from top to bottom. So the values 0 50% on the plink element
mean "put the image on the left and center it vertically".
Fluid floats are a little bit tricky. With the expression fluid floats I mean floated elements without any stated dimension. In this case, CSS specifications state that a browser should apply the shrink-to-fit algorithm, that is, the dimensions of the float will be determined by the amount of content inside the element. This turns out to be particularly useful in the case of little chunks of text that need to be floated, such as blog dates.
In this section we have a vertical navigation menu with a rollover effect.
etitle {background: #666;color: #fff;padding: 0.2em;text-indent: 0.5em;font: 1.3em/normal Georgia, serif;margin-bottom: 0.5em;}elist {display: block;margin-left: 0.8em;margin-right: 0.8em;}elink {display: block;margin-bottom: 0.5em;border-bottom: 1px solid #999;line-height: normal;padding-bottom: 0.1em;text-decoration: none;cursor: pointer;color: #00c;}elink:hover {background: transparent url("img/flower.png") no-repeat 100% 50%;color: #00f;}View the example - View the screenshot
In this case, the background image is shifted rightwards by using 100% as the first value of the
background-position property. To align the image vertically to the text, we've used the value 50%
and we've reduced the line-height of the elink element.
The following styles are similar to the header's ones, with some exceptions.
footer {clear: left;background: #333 url("img/footer.jpg") no-repeat 0 0;color: #fff;height: 4em;line-height: 4em;font: italic 1.3em Georgia, serif;}signature {text-align: center;height: 4em;line-height: 4em;}View the example - View the screenshot
Since we've used the float property on the main sections, we have to restore the normal flow
by using the clear property with its value set to left because of the floating
direction.
To complete our layout, we add a background image to the root element.
blog {background-image: url("img/me.png");background-repeat: no-repeat;background-position: 80% 24em;}View the example - View the screenshot
The second value of the background-position property comes from a rough calculation that takes
into account the overall height of the header and extra sections. 24em is
a good value, since it scales along with text so that we can avoid dealing with browsers discrepancies in the calculations
of percentages related to the vertical positioning of a background image.
See my tests on XML and CSS.
