Canada
NLC HOMESEARCHSITE INDEXCOMMENTSFRANÇAIS
Publications*

Cascading Style Sheets and Dynamic HTML

by Jeff Kozoris
Network Notes #51
ISSN 1201-4338
Information Analysis and Standards
National Library of Canada

October 31, 1997

1. Introduction

HTML (Hypertext Markup Language) is by far the most common document format on the World Wide Web. HTML is a form of SGML (Standard Generalized Markup Language), which is primarily concerned with structure, rather than layout or presentation styles. Thus, though widely used, HTML does not support most of the page layout features found in desktop publishing applications. It does include tags that provide for some forms of presentation, such as tables, and tags to specify fonts and colours. However, these tags are bulky and require extensive coding. A major complaint against HTML is that it does not allow the precise positioning of text and images, as required in desktop publishing. Authors and publishers want greater control over layout so that they can create sophisticated publications that retain the same layout and look regardless of the configuration of a user's browser. Two developments, Cascading Style Sheets and dynamic HTML, have been designed to address these limitations of HTML.

2. Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) address the problem of layout control, putting the power of desktop publishing into the hands of Web publishers. Authors can create pages that display precise margins, various font styles, measured white space around text and graphical elements, and other desktop publishing-like page formatting controls. 1 In addition to helping authors create the exact layout they want for a page, Cascading Style Sheets allow them to apply a universal look and feel over an entire Web site without the work of inserting new tags and templates into each Web page.

Features and advantages of Cascading Style Sheets:

  • provides precise control over margins, line spacing, element placement, colours, font faces, and font sizes
  • removes the need to re-type HTML style tags each time a new style is needed
  • ensures every user sees the same view regardless of the ways in which the browser's size and colours are configured
  • provides the ability to change the overall look of a Web page or even an entire site by changing a single style sheet.

    2.1 Location of CSS information

    Style information can be stored in either: 1) the heading section of a file that applies to that particular HTML page; or 2) an external file that can be referenced by any number of Web pages. The example below illustrates the embedding of style information within an HTML file. Specifically, in the <STYLE> section of the <HEAD> area. The example is encoded in the Microsoft version of CSS.

    <HTML>
    <HEAD>
    <TITLE> Style Sheet Demo </TITLE>
    <STYLE TYPE="text/css">

      BODY { background: black }
      H1 { color: yellow;
        font-weight: bold;
        font-size: 12pt;
        font-family: Arial, sans-serif }
      P { color: white;
        font-size: 10pt;
        font-family: Georgia, serif }
    </STYLE>
    </HEAD>
    <BODY>
      <H1> Cascading Style Sheets </H1>
        <P> Designing simple style sheets
        is easy. One only needs to know a
        little HTML and some basic desktop
        publishing terminology.
    </BODY>
    </HTML>

    In the example, the style information specifies that alt text in the <H1> tags will be yellow, bold, l2 point, and sans-serif Arial font. All the text in paragraphs <P> will be white, 10 point, and serif Georgia font.

    Alternatively, style information can be contained in a separate, single file to which all relevant HTML files refer. Thus, when a change to a Web site's overall look and feel is desired, changes need only be made to the style sheet file. This aspect is a significant development for those who maintain extensive Web sites. Presently, a change in look and feel across a site requires that each HTML file be opened and the code modified. With CSS information in a separate file, the code changes take place once in a single file.

    2.2 Layering

    It is also possible to layer style sheets to create interesting effects. Like sheets of glass piled on top of one another, separate layers can contain text, pictures, and animation. The layers support effects such as text written over pictures and animated images moving behind text. Backgrounds, for example, act as they do in normal HTML, representing the lowest layer in a multi-layer page. It is this layering feature that provides the meaning behind "cascading" in Cascading Style Sheets.

3. Dynamic HTML

Dynamic HTML is a combination of Cascading Style Sheets and a scripting language (such as VisualBasic script or Javascript) that merges the actual HTML document with the style sheet.

"Using Dynamic HTML, developers will be able to create a Web page that can respond dynamically to user-generated events, such as mouse clicks, by expanding an HTML table, changing the attributes of a font, or moving a graphic across a page. All of this can be done without going to the server or relying on plug-ins or Java applets." 2

    3.1 Data binding

    One of the key features of dynamic HTML is that the browser does the processing of effects locally, putting less strain on the server and speeding up load time. A very powerful example of this feature is "data binding." Currently, when a user interacts with a database, data are pulled from a system, tagged on the fly with HTML, then send to the user. If a user wants a different view of the data -- for example, sorted by author or by date -- he or she must make another call to the server which sorts the data, reformats it in HTML, and resends the data to the user. With the data binding feature of dynamic HTML, all relevant data are sent to the user to be sorted, filtered, and modified repeatedly, without having to contact the server again.

    3.2 Fonts

    In both desktop and Web publishing, the availability of fonts is a major issue. Currently, Web authors are restricted to using fonts that are commonly present on users' systems. 3 A feature of dynamic HTML is the ability to use virtually any font on a Web page without the need for end users to have it present locally. This feature allows a Web page to retain its intended look when a certain font is specified. The text will not revert to New Times Roman if the font is not present, as is currently the case with standard HTML.

4. Differences between Netscape and Microsoft version of CSS and dynamic HTML

Netscape Communicator 4.0 supports Level 1 version of CSS (CSS1) under the name "Javascript Accessible Style Sheets" (JASS), while limited CSS support is now available in Microsoft's Internet Explorer 3.0, to be known as "Dynamic HTML." Both the Netscape and Microsoft versions are recognized under the generic name of "dynamic HTML," with the lower case ‘d.' In addition, each company has its own definition of dynamic HTML.

Microsoft defines DHTML as:

  • the HTML document object model
  • a way to control the positioning of elements on a page
  • a set of multimedia controls for animation, alpha-channel filtering, and other effects and the ability to bind sets of data to an HTML page. 4

      Netscape, on the other hand, defines DHTML as HTML plus Netscape extensions, Javascript, Java, and an object model for HTML documents. 5

      It is very important to note that CSS1 has not yet been coalesced into a common standard. As with earlier versions of standard HTML, Netscape and Microsoft have created their own, idiosyncratic features of dynamic HTML. Both have put forward these ideas to the W3C to be considered for the standard. This divergence causes problems: if these two major companies are developing different forms of dynamic HTML, elements of CSS Web will be browser dependent. This erodes the cross-platform compatibility that has allowed the Web to grow as wildly as it has.

      The core of the problem is that both versions of dynamic HTML provide essentially the same functionality with both browsers, but it is implemented through different scripting languages, each with a different syntax. For example, to declare all <H1> tags as "red" with a size of 12 points in a linked style sheet, the code for Microsoft's Internet Explorer would be:

        H1 {color: red;
        font-size: 12pt}
      Using Netscape's JASS, the code would be:
        tags.h1.color="red"
        tags.h1.fontsSize="12pt"; 6

      Finally, dynamic HTML is supported only by Netscape Navigator and Microsoft Internet Explorer. There is currently no support for dynamic HTML in older Netscape and Microsoft browsers or browsers of a different type. When non-compatible browsers encounter dynamic HTML, all the information will be displayed, but without the new features. Without a common standard, authors face the possibility of creating three versions of their pages, one with Microsoft Dynamic HTML, one with Netscape JASS, and one without dynamic HTML at all.

5. Examples of Dynamic HTML

_____
1 Microsoft. "Cascading Style Sheets-Adding Style to HTML"
2 Levitt, J. "Rift Over HTML's Dynamics," Information Week, April 7, Issue 625
3 Netscape. "New Dynamic HTML."
4 Zelnick, N. "Client: Dynamic HTML Battle Brewing," Web Week, April 21, 1997, vol. 3, issue 11, p.25.
5 Ibid.
6 Taylor, A. "The Evolution of Style Sheets."

Copyright. The National Library of Canada. (Revised: 1997-12-10).