Cascading Style Sheets and XML

Cascading Style Sheets (CSS) is a styling technology that uses non-XML syntax to style elements in markup languages such as HTML. It also is suitable for some tasks in the styling of XML.

CSS style sheets can be used on their own with XML or can be used with XML and XSLT. Both uses are described and illustrated in this lesson.

Note

In CSS, the words style sheet are two separate words. In XSLT, the term stylesheet is a single word. This difference in spelling arose because these of the separate initial development of these two technologies at W3C.

First let’s look at some of the background that explains why CSS was invented and what problems it solves.

Separating Content and Presentation

Having a site-wide coherent visual appearance is desirable for all but the most anarchic Web sites. A coordinated style with good design characteristics can make a positive impression on visitors to a site. On that basis alone, it is useful to be able to easily create a style that applies across a whole Web site. But there were difficulties in doing that without CSS.

One of the problems with HTML—and one of the problems that led to the development of XML—was that content and presentation were intertwined. For example, an h1 element indicated a heading, but, almost inevitably, it also indicated a larger size for the contained text.

In the early days of HTML, it was common for the same person to create all aspects of an HTML Web page. The Web page creator carried out design tasks and content tasks pretty much seamlessly. When a page is created, and particularly when a site consists of a small number of pages, one-person authoring using HTML (with content and presentation intertwined) can work well. However, problems begin when a site grows and when it must be updated, perhaps by a different person and perhaps with a site-wide change in color or other style aspects. If style information is contained in HTML tags alone, updating style information in every individual page on a large site becomes a tedious, time-consuming, and expensive process.

Another factor that is increasingly relevant is that many Web pages, particularly on larger Web sites, are generated dynamically. If styling information was applied to each individual element in an HTML page created dynamically, the problems of updating potentially become even more severe. Any change in styling must be made within dynamically created HTML code contained, for example, in a Java servlet. This could mean even more time in amending styling information at potentially greater cost. Separating styling information for the site into a separate CSS stylesheet enables the Java code (or code in another language) to be shorter and more easily maintained.

Given these factors, a way obviously must be found to update styling information across a site efficiently, speedily, and not too expensively. By separating styling information into CSS style sheets, any necessary changes in content can be made independent of styling changes. Equally, styling can be changed without changing content or having to individually edit each HTML page. Taken together, these factors can save a lot of time and money in the ongoing costs of supporting a Web site.

Let’s move on to look at how you can associate an external CSS style sheet with an XML document.