What are Cascading Style Sheets (CSS)?
Cascading: Multiple style sheets can be applied to one document.
Style: The appearance of a document. CSS allows you to separate appearance from structure: CSS covers the appearance, HTML covers the structure.
Sheets: Guidelines.
As Håkon Lie and Bert Bos, creators of CSS, write, "A style sheet is a set of stylistic guidelines that tell a browser how an HTML document is to be presented to users" (2; see Further Resources for full reference).
Why use CSS?
- Increase accessibility
- Style sheets can be turned off
- Multiple style sheets can allow one page to be rendered in many different formats (different size screens, print, aural)
- Increase user control
- Minimize reliance on deprecated elements and attributes
- Increase the ease of changing the look of your web site (theoretically)
- The World Wide Web Consortium is behind CSS and web browsers are increasingly supporting style sheets
Internal and External Style Sheets
- Internal style sheets: style sheets that exist within an html document. For example:
example1.html
<html>
<head>
<title>Internal Style Sheet Example</title>
</head>
<style>
h1 { color: #990033; }
</style>
<body>
<h1>This header should be red</h1>
<p>The style for this paragraph is not defined.</p>
</body>
</html>The style tag indicates an internal style sheet: a (short, in this case) style sheet stuck at the top of an html document.
Another way to do an internal style sheet is to use style as an attribute for other tags. For example:
example2.html
<html>
<head>
<title>Internal Style Sheet Example</title>
</head>
<body>
<h1 style="color: #003366">This header should be blue</h1>
<p>The style for this paragraph is not defined.</p>
</body>
</html>This example should do the same thing as the previous one (except for color); the internal style sheet is just in a different place (it's analogous to the attribute size in the element <font size="+2">).
- External style sheets are separate files that live outside of the html document and are called by the document. Since external style sheets are, for the most part, more useful than internal style sheets--external sheets can be applied to multiple documents while internal sheets cannot--and since I mostly use external style sheets, I'm going to focus on those in the Examples below.
Examples
We can take what we did above and use an external style sheet. Thus, we'll have an html document with our content, structured in the way that we want to structure it--
<html>
<head>
<title>External Style Sheet Example</title>
</head>
<body>
<h1>This header should be red</h1>
<p>The style for this paragraph is not defined.</p>
</body>
</html>
--and then we'll have a separate css document (we'll call it practice.css) with information on how we want our document to look:
practice.css
/* Practice style sheet */
h1 { color: #990033; }
A few things about the style sheet:
- The /* and */ surrounding Practice style sheet are comment tags; everything between them is a comment and will be ignored when the style sheet is rendered.
- h1 { color: #990033; } is called a rule.
- h1 is a selector
- color: #990033 is a declaration
- color is a property
- #990033 is a value.
- Declarations are separated by semicolons.
At this point the html document doesn't know anything about the style sheet and will render the h1 in whatever way the browser is set to do so (probably in large black bold font). But add <link rel="stylesheet" type="text/css" href="practice.css"> to the head part of your html document:
example3.html
<html>
<head>
<title>External Style Sheet Example</title>
<link rel="stylesheet" type="text/css" href="practice.css">
</head>
<body>
<h1>This header should be red</h1>
<p>The style for this paragraph is not defined.</p>
</body>
</html>
- link is an element like head; its function is to link to the style sheet designated at the end of the link element: practice.css.
- rel="stylesheet" tells the browser what kind of thing it's linking to
- type="text/css" tells the browser what kind of style sheet language is being used (in this case, css).
Now, when your style-sheet enabled browser displays example3.html, the linked external style sheet practice.css will determine the color of the h1 headings.
Let's look at a slightly more complicated style sheet, a condensed version of the one for the Peabody Library's staff web (http://staffweb.library.vanderbilt.edu/education/).
staff.css
/* Peabody Library Staffweb web site style sheet */
a:link { font-family: arial, helvetica, sans serif; color: #669966; text-decoration: underline; }
a:visited { font-family: arial, helvetica, sans serif; color: #996699; text-decoration: underline; }
body { background: #ffffff; margin: 3%;}
h1 { color: #996699; font-size: 200%; font-family: arial, helvetica, sans serif; text-align: center; }
h2 { color: #669966; font-size: 150%; font-family: arial, helvetica, sans serif; }
h3 { color: #996699; font-size: 140%; font-family: arial, helvetica, sans serif; }
hr { padding: 20px 0px 0px; }
img { float: left; }
ol { list-style-type: decimal; font-family: arial, helvetica, sans serif; }
p { font-size: 100%; font-family: arial, helvetica, sans serif; clear: both;}
.foot { font-size: 85%; font-family: arial, helvetica, sans serif; text-align: center; }
.updated { font-size: 75%; font-family: arial, helvetica, sans serif; text-align: center; }
ul { list-style-type: disc; font-family: arial, helvetica, sans serif; }
Further Resources
Lie, Håkon, and Bert Bos. Cascading Style Sheets: Designing for the Web. 2nd ed. Harlow, England; Reading, Massachusetts: Addison-Wesley, 1999.
Web
"A List Apart Home Page." A List Apart. Online. Available http://www.alistapart.com/.
Bos, Bert. "Cascading Style Sheet Home Page." World Wide Web Consortium. Last updated October 10, 2005. Online. Available http://www.w3.org/Style/CSS/.
"Reference: Stylesheets Guide." Webmonkey. Online. Available http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/.
Stringer-Hye, Suellen. "Cascading Style Sheets." LITS. Online. Available http://staffweb.library.vanderbilt.edu/libtech/tutorials/css/.
"Welcome to CSS School." W3Schools.com. Online. Available http://www.w3schools.com/css/default.asp.
Created by Chris Benda