Originally appeared in Netscape World, now archived at Wayback Machine
Web page authors want to control more than what basic HTML provides, yet they also want their pages to display in the same manner across multiple browsers and multiple platforms. HTML provides the tools that allow us to create hypertext links, frames, tables, lists, or forms, but it does not provide fine control over how each object is displayed.
As an example, to create a hypertext link in a page, the Web page author would use the following syntax:
<A HREF="http://www.somecompany.com/index.html"> link page </A>
Interpreted by Netscape’s Navigator and Microsoft’s IE (Internet Explorer), the link would display on the Web page in whatever manner is determined by the browser.
To address this problem, Navigator and IE both support an extension to the <BODY> HTML tag that lets a Web page author change the color of unvisited, visited, and active links, as shown in the following statement:
<BODY link=#ff0000 alink-#00ff00 vlink=#0000ff>
This statement would display unvisited links in red font, visited links in green font, and active links (clicking on a link makes it active) as blue, unless the user overrides this in their browser. Many Web pages now define the color of the links for a page using this technique. However, the technique of providing specific display attributes for a tag becomes less workable when we consider tags such as the paragraph tag, which can be used many times in one page.
Following in the trend set by the <BODY> link attribute, we would need to create display attributes for the paragraph (<P>) tag and then apply these attributes whenever we wish to display text in some manner other than the default. This again, is workable, though the concept starts to become much more involved.
Where the idea breaks down is if the page author wants to change the color attribute of the paragraph, and then has to search through every web page to make look for where the attribute has been applied, and then make this modification. Additionally, if a company would like to provide a standard formatting of all paragraph tags for all web site pages, each web page creator would need to be aware of what the standard was, and remember to consistently apply it. A better solution would be to change the attribute once per page, or even once in a separate document and have it work on many pages.
Another option to apply formatting would be for the Browser creators to create new HTML extensions to be used for presentation, such as Netscape did with the <FONT> element (see “What’s wrong with FONT“). This idea breaks down when one considers that other browsers viewing any material formatted by the new tag will not be able to see the material, or will see it in a manner that may make it illegible.
What is needed is a general formatting tag that one can use to create format definitions, which can be applied to one or more HTML elements. This technique of using one tag to cover extensions was used with the scripting (<SCRIPT>) tag and has worked fairly well.
Enter the concept of style sheets. Style sheets are methods to define display characteristics that can then be applied to all or some instances of an element, or multiple elements. Specifically, the W3C has recommended the adoption of CSS1 (Cascading Style Sheets).
What is CSS1Style sheets provide formatting definitions that can be applied to one or more HTML elements. An example of a style sheet would be the following, which sets all occurrences of the <H1> header tag to blue font:
H1 { color: blue }
CSS1 extends this by defining style sheets that can be merged with the preferences set by both the browser and the user of the browser, or other style settings that occur in the page. The style effect cascades between the different definitions, with the last definition of a style overriding a previous definition for an element.
As an example, the following will redefine the header tag <H1> to be blue, with a font of type “Arial”, size 24 point, and bold:
H1 { color: blue; font-family: Arial ; font-size: 24pt }
With this specification, any time the <H1> tag is used in a page, the text will be displayed in Arial, 24pt, blue font. We define a second style for the <STRONG> tag using an inline definition that will override the first:
<H1 STYLE="color: red">
The difference between this and the first definition is that the latter redefines the formatting for the <H1> tag, but only for that specific use of the tag. This will not impact on any other uses of the H1 tag in the document. If the style definition in the HEAD section had attached a weight to the style, using the important keyword, the original specification would have taken precendence over the second one:
H1 { color: blue ! important;
font-family: Arial ; font-size: 24pt }
Styles can be nested, as follows:
H1 EM { color: red }
Now, if the EM tag is used within a H1 header, the EM specification will apply to the text in addition to any other style specification given for the H1 tag. This type of style property is referred to in the CSS1 style guide as a contextual selector. Each element referenced in the line is analogous to an element within a pattern list, and the browser applys the style to the last element in the list that successfully matches the pattern it is processing
W3C has recommended two levels of compliance for CSS1: core and extended. The standard can be seen at this W3C Web page).
At this time, only IE has partially implemented CSS1 in version 3. However, both Netscape and Microsoft have committed to implementing at least the core specification of CSS1 in version 4.0 of their browsers.
The rest of this article will give examples of using CSS1 that will display using IE 3.x. Unix users can download a testbed client, named Amaya, that will allow them to see the results of the style sheets. Amaya was created by the W3C and can be downloaded from at this W3C Web page.
How CSS1 worksAs shown in the previous section, formatting information can be defined for an existing element and this formatting will apply to all uses of the element unless it is overridden or modified by other definitions.
The definition, delimited by new HTML tags of <STYLE> and </STYLE> can be inserted into the <HEAD> section of the page, into a separate document, or inserted in-line into the element itself.
As an example of embedding style information into the header of a document, the next bit of code will create a style sheet that will modify how paragraphs display in a page:
<STYLE type="text/css">
P { margin-left: 0.5in; margin-right: 0.5in; margin-top: 0.1in; color: red }
</STYLE>
Now, with this definition, any paragraph on the page will have a margin of half and inch for both the left and right margins, a margin of one-tenth of an inch for the top, and will have a red background. No other formatting is necessary to apply this style to every use of the paragraph tag in the entire document.
Another method will allow the Web page author to define style sheets in a separate document that is then imported into or linked to a Web page. To import a Web page, the import keyword is used, as shown in the following syntax:
<STYLE type="text/css"> @import url (http://someloc); </STYLE>
The imported style sheet will merge with any styles defined directly in the existing page, or by the browser/user, and the resultant combined styles will influence page presentation. Note that IE 3.x does not support the import keyword, though this should be implemented in version 4.0.
The second method of including a style sheet file is using the LINK tag:
<LINK REL=STYLESHEET HREF="standard.css" TYPE="text/css">
Using this type of tag will insert a style sheet into the existing Web page that overrides any other style definition for the page, unless style sheets have been turned off for the page. It is an especially effective approach to use when a company may require that all Web pages follow specific formatting.
Let’s see CSS workGranted, if you go a little crazy using CSS1, your page is going to end up looking like something that will land you in a Federal prison if you sent it through the US Mail. An example of this can be seen in a page I call “expressionism with an attitude.”
Impartial observers would call it “the ugliest page they’ve ever seen on the Web.” However, with a little restraint (and of course, we all use restraint in our Web pages), CSS1 can turn a bland page into a grabber.
I have a Web page on my Scenarios site that uses a combination of display properties as defined by Netscape, style sheets as defined by Microsoft, and HTML tables.
Stripping away all but the most basic HTML tags leaves a page that has a lot of content, but without formatting is cold and not very interesting.
Unless the viewer was highly motivated to view the contents, chances are they would skip the page.
The first change to make is to add both a background image and background color to brighten the document up a bit. The full implementation of CSS1 allows the Web page author to specify whether a background image should repeat, and if it does, whether it will repeat horizontally or vertically. This is welcome news for those who have created really long, thin graphics to be able to give that attractive sidebar look to a page. Unfortunately, IE 3.0 does not implement this attribute, nor is it implemented with Preview Release 2 of Netscape Navigator. Instead, the image used in the example is one that can repeat gracefully. The style sheet is:
<STYLE TYPE="text/css">
BODY { background-image: URL(snow.jpg) ;
background-color: silver }
</STYLE>
With the image, the style sheet also adds a default color in case the person accessing the page has turned off image downloading.
Adding the background image is a start, but the text is still a bit overwhelming and rather dull looking (but not reading, of course).
It would be nice to add a margin to the document, as well as changing the overall font to Times 12pt. In addition, modifying the formatting for both the <H1> header and the <STRONG> tags would help add a bit of color and contrast to the document:
<STYLE TYPE="text/css">
BODY { background-image: URL(snow.jpg) ;
background-color: silver ;
font-size: 12pt ; font-family: Times;
margin-left: 0.5in ; margin-right: 0.5in ;
margin-top: 0in }
H1 { font: 25pt/28pt blue ; color: navy ;
margin-top: -.05in ; margin-left: 1.0in }
STRONG { font: 20pt/22pt bold; color: maroon ;
font-family: Helvetica ; font-style: italic}
</STYLE>
At the time this was written, Netscape Navigator Preview release 2, in Windows 95, only implemented size units of em and ex. The first unit definition is the height defined for the font, the second is the height defined for the letter ‘X’ in the font. The results are an improvement, but you still can’t easily spot two sidebars that are inserted into the document.
To correct this, a generic class is created and named “sides”, which will contain a formatting definition that can be applied to any element. This is done by naming an element prefixed with a period (‘.’) to represent the class:
.sides { background-color: white ; margin-left: 0.5in;
margin-right: 1.0in ;
text-align: left ; font-family: "Courier New" ;
font-size: 10pt }
Looking at the page now, the sidebars stand out from the rest of the document.
The class is used with the <DIV> tag, which allows the formatting to span multiple elements until an ending </DIV> tag is reached:
<DIV CLASS=sides> </DIV>
The class could also have been used in each individual paragraph tag that makes up the sidebar:
<P CLASS=sides>
Additionally, instead of a class, we could have created an ID attribute for the style:
#sides { background: white ; margin-left: 0.5in;
margin-right: 1.0in ;
text-align: left ; font-family: "Courier New" ;
font-size: 10pt }
Using the identifier would be:
<DIV ID=sides> </DIV>
W3C wants to discourage use of the ID attribute. The W3C wants people to provide classes for an existing HTML element that only applies to that element. Then if people which to cascade the effect they use the parent-child style specification as stated earlier with the <H1> header and <STRONG> tags.
Notice from the example, and only if you are using IE 3.01, that the background color for the class is only applied to the contents and not to the area represented by a rectangle that would enclose the contents. As this looks a bit odd in the example, it is removed from the definition.
In addition to removing the background color from the “sides” class, the next change to the document will add another definition for the STRONG tag to be used in the sidebars and formatting definitions for the hypertext links.
A hypertext link is referred to in the CSS1 standard as a pseudo-class because browsers will usually implement a different look for a visted link than one that has not been visited. This type of element can take a class style specification, but the browser is not required to implement the specification.
Another change will be a specific class definition of “sides” that differs from the original class definition and which will be used for specific paragraph tags:
.sides { margin-left: 0.5in;
margin-right: 1.0in ;
text-align: left ; font-family: "Courier New" ;
font-size: 10pt }
STRONG { font-size: 22pt; color: maroon ;
font-family: Helvetica ; font-weight: bold}
STRONG.extended { font: 18/20pt bold; color: red ;
background-color : silver; font-style: italic }
P.sides { margin: 0.25in 0in 0in }
A:link { color : red }
A:visited { color : teal }
Using the <STRONG> tag with the extended style would look like:
<STRONG class=extended>
To use the original formatting, no class name is given.
The page is definitely improving.
The sidebars stand out and spacing has improved the ease with which the page can be read. Unvisited links stand out with the bright use of color, yet blend in to be non-obtrusive after the link has been visited.
A final change is made, which is to add formatting to the lists contained in the page. The Web page has both an ordered list, where the elements are numbers, and an unordered list, where the elements are bulleted. Styles are added to each of these list types to display them more effectively. Formatting is added to the generic paragraph tag to indent the start of every paragraph:
OL { margin: 0in 0.5in 0in; font-size: 10pt }
UL { margin: 0in 0.2in 0in }
P { text-indent: 0.2in }
The lists now have new formatting, and all paragraphs are indented. With the cascading nature of CSS1, the paragraphs that are defined with the “sides” style inherit the indentation from the parent style, which is denoted by the use of the ‘P’ classifier without any specific class or identifier selector.
The displayed Web page also makes use of several in-line styles definitions, strategically placed to override some of the generic formatting options. There are a few paragraphs that should not be indented in the first line. Overriding the original paragraph specification is an in-line one that sets the indent to ‘0’:
<P STYLE="text-indent: 0in">
This turns off the text indentation.
The paragraphs that label the two figures that are included in the document are defined to increase the left margin another half-inch. As styles inherit from the parent element in which they are embedded, the figure paragraphs will have a left margin set to one inch rather than a half as the new style is merged with the one specified for the entire document:
<P STYLE="margin-left: 0.5in; color: green; font-weight: bold">
The font for the figure paragraphs is also changed to be green and bold.
The paragraphs at the end of the document that contain the trademark and copyright information are also modified with an in-line style:
<P STYLE="text-indent: 0in ; font-size: 8pt; font-style: italic">
This style sets the font to be smaller, and italic.
Positioning the elementsOne improvement that would have helped the page is being able to position the sidebars to the side of the document and have the rest of the document “flow” around them, as happens with print magazines. Another would be to be able to specify a background color for the sidebars that would have “filled” the rectangle enclosing the contents, not just the contents themselves.
CSS1 defines formatting of elements but does not define positioning of them. To this end Netscape and Microsoft have collaborated (yes, you read that right) on a proposed modification to the CSS1 that would provide a standard specification for how elements can be positioned on the page.
The W3C proposal, “Positioning HTML elements with Cascading Style Sheets”, provides the ability to define areas for the content to flow into. These areas can then be positioned relative to each other, using “relative positioning” or in absolution position to each other using, what else, “absolute positioning.”
From the recommendation, an example of absolute positioning could be:
#outposition {position:absolute; top: 100px; left: 100px }
Using this style sheet in the document as follows:
<P> some contents <span id=outposition> some contents defined for a different position</span> </P>
This code will result in the contents enclosed in the SPAN tag to be positioned in an absolute space beginning at the position defined as 100 pixels from the left and 100 pixels from the top. The enclosing rectangle will extend until it hits the right margin of the parent element, in this case the document. The height will be long enough to enclose all the contents. However, both the width and height of the elements could also have been defined.
Relative positioning allows elements to be positioned relative to each other, even if this means the elements overlap:
#newpos {position: relative; top: -12px }
The contents formatted by this style sheet will position themselves above the rest of the contents, moving the other contents down.
In addition to positioning along the X- and Y-axis (horizontally and vertically on the web page), the elements can also be positioned to each other on the Z-axis. This means that web developers will be able to layer elements on top of each other. An example pulled directly from the positioning paper is:
<STYLE type="text/css">
<!--
.pile { position: absolute; left: 2in; top: 2in; width: 3in; height: 3in; }
-->
<IMG SRC="butterfly.gif" CLASS="pile" ID="image" STYLE="z-index: 1">
<DIV CLASS="pile" ID="text1" STYLE="z-index: 3">
This text will overlay the butterfly image.
</DIV>
<DIV CLASS="pile" ID="text2" STYLE="z-index: 2">
This text will underlay text1, but overlay the butterfly image
</DIV>
With this, the order of the elements would be the image on the bottom then the contents defined by the class “text2”, and finally the contents defined by the style “text1”. The elements are transparent meaning that the bottom elements will show through to the top, though this can also be changed using style sheet settings.
Another recommendation is the ability to define whether an element is visible or not, which would still maintain its position in the document, and whether the element is even displayed which would remove it from the display, including the space reserved from the element.
The ability to position HTML elements, to control their visibility, and to finally control how they overlap is a revolutionary change to HTML document design.
What’s next?With Microsoft and Netscape both committed to the support of CSS1, and both participating in an extension to the CSS1 proposal to provide for positioning of HTML elements, creating HTML pages that display effectively in both browsers should be a snap. However, there is one element that was not discussed in this article and which can tear down the browser truce flag: dynamic movement of HTML elements.
As can be seen with the release of Navigator 4.0, Netscape supports script based movement of elements with their LAYER tag and with a style sheet concept they call Javascript Style Sheets (JSS). With the release of Internet Explorer Preview in March, Microsoft supports dynamic content through their own version of Dynamic HTML, which uses CSS1 elements directly. Unfortunately, neither method will work with the other browser.
As with the problems that have been faced with JavaScript, mentioned in the Digital Cats’ article “Whose JavaScript is it, anyway?” until Microsoft and Netscape agree on a standard scripting Object Model, you and I will continue to have to work around browser differences if we want dynamic content. Or use Java applets, and forgo all uses of scripting.