By Prof. Marc Abrams, Computer Science Department, Virginia Tech
References Introduction/history Simple CSS Examples of CSS Browser Settings Related to Style Sheets Complex CSS Exercises for you to try!
[BO] David D.Busch & J. W. Olsen, Cascading Style Sheets - Complete, McGraw Hill, 1998. [W3C] WWW Consortium, Web Style Sheets. [Activity] WWW Consortium, W3C activity: Style Sheets. [Spec1] Håkon Wium Lie, Bert Bos, Cascading Style Sheets, level 1, W3C Recommendation 17 Dec 1996, REC-CSS1-961217, rev. 11 Jan 1999. [Spec1] Cascading Style Sheets, level 2, W3C Recommendation 12 May 1998, REC-CSS1-980512
When you view a Web page, the page has certain visual properties or presentation formats: colors, fonts, background colors and textures, shape of bullets in lists (e.g., circle or square), and so on. These properties are known as style. In fact, all of the properties needed to lay out the visual appearance of a Web page comprise the style properties. These include properties like the distance between lines of text on the screen, the size of margins, and the amount of white space around page elements like images.
Prior to HTML version 4, style information was "hard-wired" into an HTML document, for example using the <font> tag or attributes like bgcolor in the <body> tag. This is undesirable if the same HTML document is to be displayed on computer monitors of different sizes and resolutions, or on mobile devices such as PDAs and handheld computers. To make a document portable to allow different presentations on different devices, one would like to associate multiple styles with a single HTML document. Therefore the style information should separated from the rest of the HTML document, and this is what a style sheet does.
A final motivation for style sheets is accessibility of Web pages for people with disabilities. For example, a blind individual could use a Web page if a style sheet were created that described auditory properties, rather than visual properties. For example, a bullet in a list could be presented as a tone in a Web browser that speaks the content of a Web page, rather than a black circle in a traditional Web browser.
With the proposal of the Web in 1989 at CERN, a simplified version of SGML was proposed for representing Web pages: the hypertext markup language (HTML). HTML in its early versions (1 and 2) was a simple language that contained a small number of tags.
Today, HTML is viewed as a special case of an SGML document. This is because HTML is a Document Type Declaration (DTD) of SGML. That's why some Web page authoring tools, such as Netscape Composer, will insert a line near the top of an HTML document similar to the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
The sudden popularity of the Web in the mid 1990's created a crisis for HTML. On the one hand, the original goal for the Web at CERN was to have documents that could be displayed on any type of computer (e.g., UNIX, Macintosh, DOS and later Windows). Therefore HTML 1.0 and 2.0 described content, and not presentation format. On the other hand, a number of Web page designers creating Web sites wanted control over the exact appearance of a page in a user's Web browser. That control was important to achieve high-quality graphic designson the Web similar to what on sees in printed publications. These designers needed to specify what we know today as style.
To woo Web page designers to their products, Netscape and Microsoft addeda short-term solution to HTML. They added non-standard tags and attributes specifying formatting information to HTML, violating the rule of content and not format. An example is the <font> tag:
<FONT=+2> </FONT>
The problem with tags like <font> is that they are interleaved throughout an HTML document, aggrevating the problem of creating different presentations for different output devices or for accessibility.
The group responsible for CSS stated the need as follows:
"On the Web, content providers do not have the control they have in print media over color, text indentation, positioning, and other aspects of style. A style sheet language offers a powerful and manageable way for authors, designers and typographers to create the rich visual effects." [Activity]
Format info appears in either a separate document, or a separate area of a .html file, called a style sheet. A style sheet lists, for many tags (e.g., <P>), how the tag should be rendered. For example: Render <H1> as red, bold Helvetica 48 pt.
Render <H1> as a deep man's voice.Tags may be subclassed, so that each subclass specifies a different presentation format (e.g., Regular H1 headings in black versus really important H1 headings in a red font).
Also, you can use the !important annotation (discussed
below) to let style on the reader's style sheet override the author's style
sheet. So you could avoid small fonts, render pages as audible, etc.
Here is a simple style sheet. It specifies that any use of <H1> in the document will generate blue type.
H1 { color: blue }
The general format of a line of style is the following:
selector declaration
So in "H1 { color: blue }" the "H1" is the selector and "{ color: blue }" is the declaration.
You can use any tag in HTML as a selector. [Spec]
H1, H2, H3 { font-family: helvetica }
Second, the declaration can contain multiple style properties and values:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
There are also some special-purpose syntax conventions, such as the use of the traditional typographer's notation for font height and line height:
H1 { font: bold 12pt/14pt helvetica }
In this case H1 headings will use a 12 point font inside a line height of 14
points, so that there are two points of white space (known as "leading")
between the lines.
Earlier we mentioned that tags can be subclassed. The example given was the desire to make some H1 headings black and some red. In this case, we want to make two sub-classes of the H1 tag. To do this, HTML 4 allows tags inside <body> to have a new attribute called CLASS. When you author an HTML document, you can define classes of a certain tag (such as H1) by giving names of your own choice to the CLASS attribute.
In the example below, a class of H1 tags is defined and named urgent. The style sheet uses the selector H1.urgent to specify style for only those H1 tags which have attribute CLASS=urgent. The result of the document below is a red heading that says "I am in red because I am urgent".
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.urgent { color: #FF0000 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=urgent>I am in red because I am urgent</H1>
...
</BODY>
</HTML>
There are four different ways that a style sheet can be added to an HTML document. In two of the ways, the style sheet is in an external file. (The external file must only contain lines of the form "selector declaration." The external file must not contain any HTML tags, such as <style>.) In the other two, the style sheet is internal to the HTML file.
The HTML document below illustrates all four methods:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import
url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph
is green.
</BODY>
</HTML>
Here is a very simple example of an HTML file with an internal style sheet.
<html>Click here to see the result!
<style type="text/css">
<!--
BODY {color: red}
-->
</style>
<head><title>Test</title></head>
<body>
<h1>Heading</h1>
<p>This is some text.
</body>
</html>
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
Microsoft Word in Office 2000 can generate HTML documents that use a style sheet. The HTML generated is fairly complex, and this example shows that style sheets can be complex. In the example below, we see a variety of style properties set for H1 headings, such as the use of 16 point Arial font, and properties for anchors in Web pages that are visited -- they are in purple when displayed.
<head>
...
<title>The Underlying Technology of the
Web</title>
...
<body lang=EN-US link=blue vlink=purple style='tab-interval:.5in'>
...
<h1
align=center style='text-align:center'>The Underlying Technology of the
Web</h1>
...
</body>
</html>
Next we will discuss the features that exist in Web browsers to use style sheets.
In IE5 or Netscape4.x, there are dialog boxes to specify your preferences for colors and fonts. These in essence form the "user agent style sheet".
Then click on the "Accessibility" button above to expose the dialog box below:
Choose Edit->Preferences to display the box below, and click on "Advanced":
Click on "Enable style sheets" to change the setting.
Hint: Sometimes you visit a Web site and nothing appears in your
browser window. Try disabling style sheets and reloading the page;
this sometimes displays the page (perhaps when the style sheet contained
an error).
Children of a node inherit properties of their parent
-- unless the style sheet or cascading says otherwise.
Now suppose we add a <style> section as follows:
Note: This is true if you use Internet Explorer 5.0. If you use Netscape 4.7, you do not see italics for the heading. Perhaps Netscape incorrectly implements style, or perhaps there is some option in Netscape that is overriding the style. No matter what the reason, it shows how hard it is to get consistent-looking documents across browsers!
Why? Well, first of all the tree structure of the above html
document is this:
The inheritance mechanism says that H1 and P must have font-style:italic because they inherit from the BODY tag.
Now suppose you modify the example as follows:
What if there is a conflict, and author's style says 18 point, and reader's is 10 point?
Otherwise, the order of rules is this: