Chapter: XML and Web Services : Building XML-Based Applications : Formatting XML for the Web

A Brief History of CSS

HTML, an SGML application, was originally introduced to simplify the visual rendering of structured data for Web-enabled audiences.

A Brief History of CSS

In 1996, about the time the DSSSL standard was being finalized by the ISO, the W3C organization was finalizing its own style language. On December 17, 1996, Cascading Style Sheets Level 1 (CSS1) became an official W3C recommendation. CSS1 was intro-duced with the intention of separating, as much as possible, the formatting (visual ren-dering) from HTML-structured documents.

HTML, an SGML application, was originally introduced to simplify the visual rendering of structured data for Web-enabled audiences. However, as vendors (especially Netscape and Microsoft) introduced new versions of their Web browsers, more custom extensions to HTML for rendering were introduced. Some features of HTML were adopted by the Web browsers, whereas others were ignored or changed. The original intent of HTML became increasingly splintered as the HTML implementations of competing Web browsers became more and more incompatible. For this reason, CSS1 was an attempt to separate much of the rendering (font sizes, colors, spacing, and so on) from HTML—that is, to help remove the disparities between the Web browsers.

In addition to separating rendering from HTML, CSS1 is much simpler to implement than DSSSL-Online, the Web version of DSSSL. CSS1 has a simpler, easier-to-under-stand syntax. It allows for a much more granular control of layout and formatting. CSS1 was developed to be very flexible and maintainable through the use of separate style sheets that can be referenced by many HTML pages simultaneously.

Listing 11.3 shows a very simple example of what a message might look like in a HTML page (building upon the SGML message example in Listing 11.1). The code from this listing, simplemessage.HTML, can be downloaded from the Sams Web site.

LISTING 11.3 Very Simple HTML Page

<html>

<head>

<title>Simple Message</title>

</head>

<body>

<h1>Note</h1> <h2>From: Bob</h2> <h2>To: Jenny</h2>

<h3>Subject: Hello Friend!</h3>

<h4>Just thought I would drop you a line.</h4> </body>

</html>

Listing 11.3 has no special formatting applied to it. It is a simple HTML page that gives no indication about the type of font, font size, colors, and so on that should be applied to it when rendered in a Web browser. In this case, the formatting applied will be the default settings associated with the HTML tags for a Web browser that loads the page. Figure 11.1 shows how this page would be rendered using the default settings in Internet Explorer 5.5.

You can see there is nothing fancy about the formatting for this page. However, it is pos-sible to apply a CSS1 style sheet to this page to affect the rendering. Applying a style sheet to the page will override the default formatting of the Web browser. Listing 11.4 shows a CSS1 style sheet that could be used to apply styles to the HTML page in Listing 11.3. The code for this listing, simplecss.CSS, can be downloaded from the Sams Web site.

LISTING 11.4 Simple CSS1 Style Sheet

{

font-family:verdana; font-size:20px; font-weight:bold; color:#0000ff

}

{

font-family:arial; font-size:15px; font-weight:bold; color:#00ff00

}

{

font-family:sans serif; font-size:13px; font-weight:bold; color:#ff0000

}

{

font-family:courier; font-size:12px; color:#000000

}

On the surface, a CSS1 style sheet is very similar to a DSSSL style sheet. However, beyond some subtle syntax differences (CSS is a bit more straightforward), the big dif-ference is that the CSS style sheet does not have a Document Type Declaration. This is because the rules for applying and parsing CSS style sheets are built in to the Web browser’s parsing engine. There is no need for a DTD in a CSS1 style sheet. This removes a lot of the overhead inherent in DSSSL.

Only a single line of code must be added to the HTML page (from Listing 11.3) in order to reference the style sheet in Listing 11.4. Listing 11.5 shows the updated HTML page. The code for this listing, simplemessage_css.HTML, can be downloaded from the Sams Web site.

LISTING 11.5 Very Simple HTML Page

<html>

<head>

<title>Simple Message</title>

<body>

<h1>Note</h1> <h2>From: Bob</h2> <h2>To: Jenny</h2>

<h3>Subject: Hello Friend!</h3>

<h4>Just thought I would drop you a line.</h4> </body>

</html>

The only change from Listing 11.3 to Listing 11.5 is that the link element has been added to the page right after the title element inside the head element. The link ele-ment is an empty element with three attributes. The rel attribute establishes that the link is for a style sheet. The type attribute establishes the MIME type for a CSS style sheet. Finally, the href attribute is, of course, the URL for the style sheet. Now, when visited by a Web browser, the page will be rendered using the settings found in the style sheet that is referenced by the href attribute of the link element. Figure 11.2 shows how the page in Listing 11.5 would appear in Internet Explorer 5.5.

Compare Figure 11.2 to Figure 11.1. It is easy to see that applying the CSS1 style sheet from Listing 11.4 has radically affected the rendering of the HTML. Each of the elements—<h1>, <h2>, <h3>, and <h4>—are rendered differently according to the font-family, font-size, font-weight, and color settings from the style sheet.

Of course, this all becomes academic if Web browsers do not adopt W3C recommenda-tions such as CSS1. In the last few years, the major Web browser vendors have finally finished adding (almost) complete support for CSS1. The only problem with this is that CSS2 is the newest recommendation for Cascading Style Sheets. CSS2 was ratified as a W3C recommendation in May 1998. Since CSS2 was ratified in 1998, at the time of this writing, only Opera 5 and Netscape 6 have broad support for CSS2. It is this lag in adopting new CSS technology by the Web browser vendors that has been instrumental in Web developers continuing to use older HTML formatting tags such as <font>, <u>, and <i>.

CSS is not only used to apply formatting to HTML. In the next section, we will cover how CSS may be used to apply formatting to XML documents for display in Web browsers.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

XML and Web Services : Building XML-Based Applications : Formatting XML for the Web : A Brief History of CSS |