Cascading Style Sheets

Style via a STYLE tag

This document includes the following style declaration in its HEAD section:

<style type ="text/css">
H1 {color:red}
H3 {color:green}
P  {font-size:14pt; font-family:Arial}
B  {color:blue}
</style>

--which produces red H1's, green H3's, 14 point Arial text, and boldfaced items rendered in blue.

Style via a STYLE attribute

To indent the displayed text above, I surrounded it with a DIV tag which carries a STYLE attribute:

<DIV style = "border-left-width:50; border-color:lightyellow">
</DIV>

These are the two primary ways we assign styles. Note the the second way overrides the first:

This paragraph is in Times font, not Arial

<P style="font-family:Times">This paragraph is in Times font, not Arial

Which STYLE attributes can be changed?

Here is a representative list of style attributes. For more detail, look at www.coolnerds.com and check out their JavaScript Mega Xref.

Which elements can support a STYLE attribute?

Almost every element that contains text can support a STYLE attribute, including:

Which way should you use?

Using the STYLE attribute of a regular tag is quicker and easier. However, using a separate STYLE tag allows you to separate style from content, which is the trend in Web design.

Browser incompatibilities

Unfortunately, these exist because the STYLE attribute is part of the "Intermediate DOMs." This list item is defined by the tag

<li style="font-family:Arial;font-size:14pt"> A list item</li>

• A list item

It shows up in the desired font under IE 5 and Netscape 6, but not Netscape 4. On the other hand, the preformatted HTML text is correctly indented in IE5 and Netscape 4, but not in Netscape 6.

Defining subgroups of HTML elements

Let's say you want some paragraphs to have a different style. Then you can define a subclass of the paragaph style.

Use this technique when, for example, you want some paragraphs to have a different formatting from other paragraphs. For example, let's say you want some paragraphs to have a green border, red text, and a light blue background.

To get this effect you would put the following declaration in the STYLE tag:

P.important {color:red; background-color:lightblue; border-width: 5px; border-color:green}

and the paragraphs you want to have this special style would be declared like this:

<P class =important>Use this technique when, for example...

Note that Netscape 4 browsers always put a 3-pixel transparent padding between any content and the border surrounding it. There is no way to override this.

Positioning elements

There are two ways to control the positioning of HTML page elements:

• Use the CSS-P syntax from W3C;

• Use the Netscape 4 layer syntax.

In the interest of compatibility we will focus on CSS-P. However the word "layer" tends to crop up because it is so inherent in the Netscape 4 DOM. Just remember:

A layer is nothing but a chunk of positionable content.

Absolute and relative positioning

• Absolute positioning means assigning a page element a specific location on the page.

• Relative positioning means assigning a page element a position relative to its container element.

Relative positioning example

The ninth word of this sentence has been dropped by 20 pixels. I know you can find a cool use for this technique!

The ninth word of this sentence has been <span style="position:relative;top:20">dropped</span> by 20 pixels.

Absolute positioning example

The images are contained within a DIV element and have been absolutely positioned from the top of the DIV.

<div style="position:absolute">

<span style="position:absolute;top:50">
<img src="images/Image1.gif">
</span>

<span style="position:absolute;top:90;left:150">
<img src="images/Image2.gif">
</span>

</Div>

These buttons are scripted using the IE DOM. They won't do a thing in Netscape 4 browsers.

Cross-platform scripting