g22.3033-002

XML for Java Developers

G22.3033-002

Dr. Jean-Claude Franchitti

New York University

Computer Science Department

Courant Institute of Mathematical Sciences

Session 2: Cascading Style Sheets

Course Title: XML for Java Developers Course Number: g22.3033-002

Instructor: Jean-Claude Franchitti Session: 2

This handout covers the presentation of HTML and XML. The story begins with Cascading Style Sheets (CSS) because few production Web sites actually use style sheets. The problem is that browser support is inconsistent, to say the least. Web developers would rather limp along with one bad interface than try to please the entire browser neighborhood.

Cascading Style Sheets, Level 1 (CSS1) is now part of the HTML 4 standard. We'll also look briefly at the latest features in CSS2. We will also examine the similarities and differences in how each browser supports these standards.

CSS1 in a Nutshell

The goal of CSS is to separate the formatting or presentation of a document from its content. That's a good thing, because CSS lets you easily change the way your document is presented while simplifying the actual markup. Beyond those noble goals, CSS is now part of HTML 4, and the old ways of embedding formatting information into the document are going away.

The original CSS1 specification defines a rule-based language that lets you describe how objects (especially text) can be rendered on the screen. For example, a rule could say that all paragraph text should be rendered using a 12-point Helvetica font with a font color of black, while all level-1 heads should be rendered in red with an underline. Rules for describing the <H1> and <P> elements in this manner are shown in Example 1.

Example 1

H1 {

color: red;

background-color: #FFFFFF;

text-transform: Capitalize;

text-align: Left; }

P { color: black;

font-size: 12px;

These two rules can be placed directly in your HTML document using the <Style> element, or you can (as I prefer) place them in a separate file and include the rules using a <Link> tag. Now, all <P> and <H1> blocks will be displayed with the properties described by these rules.

In looking over Example 1, you'll note the rule for the <P> element describes a family of fonts and gives alternatives in case the first font style isn't available. While a discussion of typography is beyond the scope of this handout, you'll find a basic understanding of fonts and typography useful when creating your own styles. Though its CSS coverage is a bit out of date, we recommend the chapter on fonts in Cascading Style Sheets by HŒkon Lie and Bert Bos (Addison Wesley, 1997).

To see the effect that styles have on your HTML, compare the document in Listing One to that in Listing Two.

Listing One

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

<HTML>

<HEAD>

<TITLE>A Conversation with Charles F.</TITLE>

</HEAD>

<B>A Conversation with Charles Goldfarb</B>

</FONT></H1>

<P><FONT SIZE="5"><B>I</B></FONT>t's widely known that when Tim

Berners-Lee created HTML he based his hypertext publishing

language on SGMLStandard Generalized Markup Language. SGML

was already an international standard, and it was being used to

publish very large documents, such as airplane maintenance

manuals. Now, with the emergence of eXtensible Markup Language

(XML), Web developers are about to meet SGMLhead on. </P>

<P>SGML was invented by Charles F. Goldfarb, and it was he who

coined the term "markup language." It all started in

1969 when Goldfarb, leading a small team at IBM, developed a

language called GML. In 1974, he created SGML and subsequently

wrote the first SGML parser, ARCSGML. Goldfarb would also work to

turn SGML into the ISO 8879 standard, and serve as its editor.</P>

</BODY>

</HTML>

Listing Two

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

<HTML>

<HEAD>

<TITLE>A Conversation with Charles F. Goldfarb

</TITLE>

</HEAD>

<BODY>

<H1>A Conversation with Charles Goldfarb</H1>

<P>

<DIV CLASS="DropCap">I</DIV>t's widely known that when Tim Berners-

Lee created HTML he based his hypertext publishing language on SGML

(Standard Generalized Markup Language). SGML, was already an

international standard and it was being used to publish very large

documents, such as airplane maintenance manuals. Now with the

emergence of XML, Web developers are about to meet SGML head on. </P>

<P>SGML was invented by Charles F. Goldfarb, and it was he who

coined the term "markup language." It all started in

1969 when Goldfarb, leading a small team at IBM, developed a

language called, GML. In 1974, he created SGML and subsequently

wrote the first SGML parser, ARCSGML. Goldfarb would also work to

turn SGML into the ISO 8879 standard, and serve as its editor. </P>

</BODY>

</HTML>

Listing One is a typical HTML document with formatting handled inline, while Listing Two is the same document with styles applied. With the exception of the drop-cap we've created for the first letter in the document, the markup in Listing Two is much simpler. (We will more about the drop-cap in a moment.) More importantly, you can create different styles for the same document and present it in different ways without changing the original document.

The CSS specification also describes a "box" model in which a document can be viewed as a box that contains other boxes (or objects). These boxes, which represent elements in the document tree, can also contain other, smaller boxes. For example, the <BODY> of your document can contain a paragraph element (<P>), which can contain a bulleted list, which can in turn contain italicized text (<I>), and so on. Different box types are generated for block-level elements like <P> and inline elements such as <I>. Each box has its own set of properties, including borders, margins, and padding.

Example 2

DropCap { background: red;

float: left;

vertical-align: text-top;

font-size: 24px;

font-style: bold;

You set these properties in your style rules and you can control the creation of new boxes by setting the display property to either block, inline, or list-item (CSS2 adds two more types). The browser uses this information to lay out your document in terms of these boxes. But despite the standard, Internet Explorer and Navigator handle the layout of boxes differently, and you'll have to be careful if you want your styles to look and behave the same in both browsers (see "Browser Support for CSS," next ).

Returning to Listing Two, you'll notice the statement <DIV CLASS="DropCap">. Another important feature of CSS is the ability to define classes for block-level (<DIV>) and inline (<SPAN>) elements. In effect, this lets you create your own formatting tags. For instance, Example 2 shows the rule for the drop-cap. Note that the rule's name, called its "selector," is prefixed with a period. In this case, the properties set the font size and style, create a red background for the drop-cap, and draw a border around it. The float property lets you flow text immediately to the right of the drop-cap, giving the desired affect.

CSS Positioning

One problem with the box model in CSS1 was that boxes could only be positioned based on the borders, margins, and padding of their containing boxes. And while boxes could either be nested or placed below each other, they could not be placed side by side or stacked on top of each other. So the W3C quickly followed CSS1 with an extension, CSS Positioning, that lets you place boxes based on either an absolute position in the document, or a position relative to a containing box.

To demonstrate the usefulness of positioning, let's create a style sheet to render some handouts. Let's assume you have a navigation bar you want to place on the left-hand side of the screen, and further assume that you want to create a left-hand margin so the article doesn't crowd the navigation bar. Currently, everyone on the planet uses tables to achieve both effects. However, we can use absolute positioning to achieve the same result. Example 3 defines new class elements for a headline, subtitle (dek), and copy, which can be used to format the handout, and introduces a new NavBar class to format and position the navigation bar.

Example 3

Headline {

color: #FF0000;

background-color: #FFFFFF;

text-transform: Capitalize;

text-align: Left; }

#Copy {position: absolute;

left: 10em;

top: 25px;

color: black;

font-size: 12px;

font-family: Arial, helvetica, sans-serif; }

.NavBar {

position: absolute;

width: 20%;

height: auto;

top: 0;

left: 0;

right: auto;

font-size: 11px;

font-weight: bold;

font-family: Arial, helvetica, sans-serif; }

.Dek {

font-style: italic;

font-size: 14px;

color: black;

margin-left: 64px;

font-family: Arial, helvetica, sans-serif;}

.Byline {

color: blue;

font-weight: bold;

font-size: 14px;

font-family: Arial, helvetica, sans-serif;}

.TOC { margin-left: 4em;

color: black;

font-size: 12px;

Listing Three shows how you combine these into a Web page to get the desired effect.

Listing Three

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>Interview with Charles Goldfarb</TITLE>

</HEAD>

<BODY>

<P><B><FONT SIZE="+2">InSite</FONT></B> </P>

<P><A HREF="index2.html" TARGET="_top">Presentation</A></P>

<P><A HREF="index3.html" TARGET="_top">Markup</A></P>

<P><A HREF="index4.html" TARGET="_top">Scripting</A></P>

<P><A HREF="index5.html" TARGET="_top">Tools Database</A></P>

<P><A HREF="index6.html" TARGET="_top">Archives</A></P>

<P><A HREF="bio.shtml" TARGET="MainPane">About Us</A></P>

</DIV>

<H1>Beyond HTML</H1>

<DIV CLASS="Dek">A Conversation with Charles F. Goldfarb</DIV>

<P><DIV CLASS="Byline">By C. Goldfarb</DIV></P>

<DIV CLASS="DropCap">I</DIV>t's widely known that when Tim Berners-

Lee created HTML he based his hypertext publishing language on SGML

(Standard Generalized Markup Language). SGML, was already an

international standard and it was being used to publish very large

documents, such as airplane maintenance manuals. Now with the

emergence of XML, Web developers are about to meet SGML head on.

<P>SGML was invented by Charles F. Goldfarb, and it was he who

coined the term "markup language." It all started in

1969 when Goldfarb, leading a small team at IBM, developed a

language called, GML. In 1974, he created SGML and subsequently

wrote the first SGML parser, ARCSGML. Goldfarb would also work to

turn SGML into the ISO 8879 standard, and serve as its editor. </P>

</BODY>

</HTML>

Positioning also introduces a layering model that lets you layer or stack boxes on top of each other. Each box is rendered according to a stacking order and boxes with greater stack levels are formatted in front of boxes with lower stack levels. Through the magic of JavaScript, you can hide and/or reveal the different layers to achieve various effects, including animation. Although a layering model was originally introduced in Navigator, this model varies significantly from that described in the current positioning standard.

New to CSS2

Cascading Style Sheets, Level 2 was released as a W3C Recommendation in March 1998. We're not seeing many examples of CSS2 simply because, until recently, it was virtually unsupported. Nevertheless, CSS2 adds a ton of interesting features including enhancements to CSS positioning. We will provide a quick rundown on the new features and describe some changes from CSS1.

First, CSS2 extends absolute positioning with a new property called fixed. Fixed positioning was added to support the new media types that have also been introduced. These new types let you target scrolling media (the browser window), paged media such as printed documents, transparencies and pages displayed on screen, and other specialized devices such as speech synthesizers, refreshable Braille displays, hand-held devices, projection screens, and even television. This leads to the introduction of another significant addition: aural style sheets.

CSS2 also introduces styles and properties for rendering tables and adds support for list-numbering styles, bidirectional text, and language-sensitive quotation marks. In addition, an enhanced font-selection mechanism now supports downloadable fonts, adjustable font sizes, system fonts, and more. New box types have been added as has a new inherit value for all properties. Selectors have been extended to support child, adjacent, and attribute selectors. And the visual formatting model has been enhanced in many ways. For example, you can now control content overflow, clipping, and visibility, specify minimum and maximum heights and widths, and add text shadows. Finally, new pseudoclasses similar to those found in Internet Explorer 4.x (for example, hover) have been added.

In addition to the new offerings, CSS2 makes minor changes to CSS1. If your style sheets break under the new model, one of the items in Table 1 may be the culprit.

Table 1

CSS Level 1 features that have changed in CSS Level 2.

FEATURE	CHANGE IN BEHAVIOR
:link, :visited, :active	These are no longer mutually exclusive and can occur together with :link or :visited.
clear	Now applies only to block-level elements.
color	Values are clipped based on the device, rather than sRGB.
display	Initial value is inline instead of block.
font-size	The computed value is inherited rather than the actual size. Also, suggested scaling factor between indexes is now 1.2.
!important	User's style sheet now takes precedence over that author's.
margin-right, margin-left	If one margin and width are both set, the other margin is not automatically ignored, depending upon writing direction.
width	Now refers to the width of a block-level element instead of the parent element.

Browser Support for CSS

This all sounds great, but what's in it for us? The answer depends on which browsers your Web site supports. Navigator 4.5 makes little "documented" progress over its older 4.0 precursor. For example, Navigator still employs an incompatible <Layer> model, which, as I mentioned, was introduced prior to CSS positioning. Whenever you define a position as absolute under Navigator, you automatically create a layer. The problem is that layers in Navigator are independent boxes. Worse, layers in Navigator do not inherit from their parents. So, both layout and behavior are affected.

For example, Listing Three nests <H1> and <P> elements along with the Dek, Byline, and DropCap classes all within the Copy class, which are all defined in Example 3. According to the box model, the browser should create the Copy box and place boxes for the other elements within this box. In terms of layout, the elements should be positioned based on Copy. This works in Internet Explorer. Navigator, however, creates each box as an independent layer. So in lieu of any absolute positioning information, everything is positioned from the top-left corner of the document.

Another complaint is that Navigator is far less tolerant of incorrect syntax: Any mistakes will result in the entire style sheet rule being ignored. For example, including height and width properties causes the copy rule to be ignored, so the text will not be properly positioned. Another problem is that Navigator does not appear to properly support <DIV class> for block-level elements. However, Navigator does support <DIV ID>. The difference between the two is that ID must be unique within the document. Thus, you can work around the <DIV class> problem in limited cases. In all fairness, the Mozilla project, Netscape's experiment with the Open Source development community, promises to include a completely reworked "style engine."

Internet Explorer seems to properly handle the way attributes are inherited. However, not everything seems to be implemented. For example, CSS2 includes new support for collapsible lists. That is, when a list element is hidden, its box is no longer considered in the layout. Therefore, the box for the next list element takes its place in the layout, giving the appearance that the list has collapsed. Oddly, Internet Explorer seems able to support the collapse property, at least for lists. You can hide a list item by setting its visible property to none. However, the box for that item will still be included in the layout, leaving a blank line where the item was.

Strangely Quiet

Little is being heard about CSS2. The reason may be that browser support is inconsistent, to say the least. Consider that while CSS2 was issued as a W3C Recommendation nearly a year ago, limited support has appeared in Internet Explorer 5, and is virtually nonexistent in Navigator 4.5. As mentioned above, tests have shown that Navigator 4.5 lagged in its support for CSS1 and maintains features that are incompatible with the specification. In other areas, features are supported, but behave differently under the two browsers. CSS3 is currently under development (see http://www.w3.org/Style/CSS/current-work ).

To use CSS features, Web developers need to know that they will behave predictably in both browsers. With standards in hand, we need consistent browser support to reliably use these features. There are definite compatibility issues between the major browsers and the CSS specification (both Level 1 and Level 2).