Cascading Style Sheets

Web Style Sheets "W3C has actively promoted the use of style sheets on the Web since the Consortium was founded in 1994"..."By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags."

And The Next Big Thing In Style: XSL

The W3C Style Activity is also developing XSL (Extensible Stylesheet Language), which consists of a combination of XSLT (Extensible StyleSheet Language Transformation) and "Formatting Objects" (XSL-FO).

What two style languages?

CSS XSL
Can be used with HTML? yes no
Can be used with XML? yes yes
Transformation language? no yes
Syntax CSS XML

CSS and Hakon Lie

In 1994 Hakon proposed the concept of Cascading Style Sheets to aid web authors produce more consistent and expressive HTML pages. [CSS can control style issues in one huge HTML file as well as maintain a consistent style among many HTML pages.]

"Traditional typography, as in old print-based typography-like typesetters, have been doing with their lead based layouts for centuries. We tried to re-create some of the beauty and feeling that goes in to a beautifully laid out book. Aesthetically, I think the web is a nightmare, even today. Perhaps it's slightly better than it used to be. You can find sites that are aesthetically quite pleasing, but it's still in the early days, and the aesthetics have room to improve." Interview


 

Something to think about:

HTML was originally designed to handle only the logical structure of a document: headings, paragraphs, links, quotes, etc. Web authors wanted more expressive documents so HTML acquired more and more tags devoted to fonts, margins, colors, etc., hence the development of style sheets. Style sheets can be used to give a common or consistent "look and feel" to either one very voluminous web page and/or thousands of web pages.

What if an organization (e.g., Ford motors, a law firm, etc.) has thousands of web pages available and everybody was doing their own thing? Different fonts, different colors, different logos, etc. Common Look and Feel (CLF) becomes important in creating and maintaining a certain image, or to use a big word, aesthetic. Examples: UW promotes CLF and so does Canada.

 

Some Implementation Mechanics of CSS

One: Inline style:

<p style="color:red">This line has been styled red.</p>
This line is black.
is presented by an HTML browser as:

This line has been styled red.

This line is black.

Two: Style tags in head of document

<head>
<style type = "text/css">
	p { color: red }
</style>
</head>
Your HTML browser will color text inside paragraph tags as red.

Three: Linking to an external style sheet

First create a style sheet file

The file "style.css"
p { color: red }


In your content file, create a link to this style sheet file:

<head>
<link rel=stylesheet href="style.css" type="text/css" />
</head>


Your HTML browser will color text inside paragraph tags as red.

 

Some Examples of CSS


<style type="text/css">
	h1 {background-color: yellow}
	p {background-color: rgb(250,0,255)}
</style>

This a header 1

This is a paragraph.

 
	
<style type="text/css">
	h1 {color: green}
	p {color: red}
</style>

This is a green header

Red text in this paragraph.

 

<style type="text/css">
	h3 {text-decoration: underline}
	a {text-decoration: none}
</style>

Is this a link? No,just underlined text

Is this a link? Yes, but underlining missing 
<style type="text/css">
	p {border-style:outset}
</style>

This is an outset border.

 

<style type="text/css">
	p {margin-left:30px}
</style>

Just a regular paragraph.

Paragraph with 30px margin.