Introduction to Cascading Stylesheets

Yonghui Zhang

Sample Page

HTML wasn’t really designed to control the form or appearance of Web pages. Rather, it’s a language that defines the structure and function of elements on a Web page. It is the browsers that decide how these elements are actually rendered. Commercial Web publishing tools promise "what you see is what you get", however, most of them base their options on basic HTML; the users are limited to do what HTML allows them to do. Cascading Stylesheets, on the other hand, let the users themselves decide how their pages should appear in the browsers (the new FrontPage 2000 actually integrates with CSS2 pretty well).

I will demonstrate some of the desirable controls that CSS has made available to Web page authors in this short paper. Because different browsers tend to support the CSS specification to different extents, I will only explain those options that work for both Netscape(4.0 and above) and Internet Explorer(4 or 5).

Basic Terminology Of CSS:

  1. Rules, Selectors, Declarations, Properties
  2. Rules are statements that instruct the browser what to do when it encounter a HTML tag. Here is what a rule would look like:

    H1, H2, H3 {color: red}

    When the browser sees tags like <H1>…..</H1>, it will display the enclosed text in red. Each rule consists of one or more selectors, that is, the HTML tags the style will be applied to. In the case above, H1, H2, H3 are all selectors. Declaration is the text inside the curly braces that defines what the style really is. A declaration consists of one or more Property-Value pairs. For example, the only defined property in the declaration above is "color" which has a value "red".

  3. Classes
  4. Cascading Stylesheets allow declaring different classes, either associated with certain tags or not. For example, there could be two classes of <P> tag:

    P.green {color: green; font-size: 12}

    P.gray {color: gray; font-size: 14}

    When the browser sees <P CLASS = "green">, it will display the text in green at a size of 12 points. Whereas when it sees <P CLASS = "gray">, the text will be in gray at a size of 14 points.

    There could also be classes that aren’t associated with any tags. For example:

    .first {color: blue} /* note the dot notation */

    Any tag that has the class "first" (for example, <H CLASS = "first">) will have its tagged text displayed in blue.

  5. Contextual Selectors

For example, P B { color: red} means to tell the browser to make bold text red only if

it appears within <P> text.

Styles Can Be Added To Web Pages In Four Different Ways:

  1. Embedding a stylesheet between the <HEAD> </HEAD> tags, for example,
  2. <HTML>

    <HEAD><TITLE>Introduction to CSS</TITLE>

    <STYLE TYPE = "text/css">

    <!- -

    H1 { color: blue; font-family: courier}

    P {background-color: yellow}

    - ->

    </STYLE></HEAD>

    <BODY>……</BODY>

    </HTML>

  3. Linking to a stylesheet, for example,
  4. <HTML>

    <HEAD><TITLE>Introduction to CSS</TITLE>

    <LINK REL = stylesheet HREF = "style1.css" TYPE = "text/css">

    </HEAD>

    <BODY>……</BODY>

    </HTML>

    where style1.css is a simple text file that defines certain rules and resides in the same directory as this html file. A number of html files can link to this style1.css file. If one rule has been made to this stylesheet, all html files linking to it will be updated. This is what makes stylesheet powerful.

  5. Importing a stylesheet
  6. This method works similarly to linking, but it is not yet supported by Netscape Communicator.

  7. Adding styles inline

Means inserting a style property inside a HTML tag, for example,

<H1 STYLE = "color: gray; text-decoration: underline">……</H1>

Cascading Order Of Importance Of The Rules:

If a html file gets its rules for one tag in all aforementioned ways, there is an order of importance: the inline styles outweigh embedded styles, which in turn outweigh linked styles, which outweigh imported styles. There are actually more complicated situations in which rules conflict with each other. The official specification has a set of rules dealing with them. However, different browsers implement the specification differently and none of them 100%, making things even more complicated. For the time being, it is advisable to stick to just one way of adding styles, especially when you expect that there will be conflicts.

Useful Properties:

A stylesheet can define properties that relate to the font, typography, layout, color, background, positioning of text as well as other HTML elements. It would be worthwhile to familiarize oneself with most of the properties. However, I am only going to illustrate a few properties that can certainly help us solve the problems we once discussed in class and maybe a few other neat ones.

  1. text-decoration: this property can be used to get rid of the underlines underlining hyperlinks. Possible values of this property include underline, overline, line-through, blink, and none. Take a look at this example:
  2. A: link { text-decoration: underline; color: red}

    A: visited {text-decoration: none; color: yellow}

    These rules can be embedded in your html file or can be linked, imported from a standalone css file. The declaration can also go into a regular HTML tag like this:

    <A STYLE = "text-decoration: none; color: green" HREF = "http://www.berkeley.edu/">UC Berkeley </A>

  3. font-size: this property allows the author to specify the size of the text arbitrarily in a variety of ways, for example,
  4. H1 { font-size: 25pt}

    H2 { font-size: 20px}

  5. line-height: you can use this property to specify the spacing between lines as you wish, for example,
  6. P { line-height: 8 pt}

    This will make the line spacing smaller than it usually is (default).

  7. text-align: with this property, you can control the horizontal alignment of paragraphs as well as other HTML elements such as images, Java Applets, and so on. Possible values of this property include left, right, center, justify.
  8. Background-color: with this property, you can color the background of anything on a Web page.
  9. Position: this property allows you to position a HTML element anywhere you want on the Web page. You can do both absolute positioning and relative positioning. It is a good idea to enclose the elements you want to position in a pair of <DIV>…</DIV> tags because Internet Explorer has problem with directly absolute-positioning individual elements.
  10. Z-index: this property allows you to do layering on a Web page, for example,

H2.layer1 {position: relative; left: 10pt; top: 10px; z-index: 1}

H2.layer2 {position: relative; left: 10pt; top: -10px; z-index: 2}

………

<H2 CLASS = "layer1">This is layer1</H>

<H2 CLASS = "layer2">This is layer2</H>

The H2 header text of class "layer2" will be rendered on top of the H2 header text of class "layer1" because layer2 has a larger z-index value.

There are many other properties that can be defined in a stylesheet. The official specification on the W3 Web site is certainly a good place to check them out.

Conclusion

Cascading Stylesheet is designed to give Web page authors more precise control of the layout of their page elements. It also help us make smaller, faster, and more readable pages. More importantly, it nicely solves many problems we could do using plain HTML. It is noteworthy, however, that both major Web browsers don’t support all the CSS functionality. Therefore it is always advisable to check your stylesheet against both Netscape Communicator and Internet Explorer. Hopefully, as CSS progresses from CSS1 to CSS2(finished) and CSS3(started) and becomes more mature, the major browsers will be able to fully support the specification. That will make our life a lot easier.

Sample Page