---

What are Cascading Style Sheets?

The term Cascading Style Sheets, or CSS, refers to a type of coding that works with existing HTML and changes its behavior. It allows you to refine and embellish the appearance and layout of your Web pages beyond the capabilities afforded by HTML alone. Together with Javascript, CSS is a component of DHTML (or Dynamic HTML).

There are several ways to implement CSS:

• EMBED a stylesheet within the HEAD section of an HTML document to control the entire page.
• LINK to an external stylesheet from the HTML document.
• Add styles inline that affect individual occurrences of a tag within the HTML document.
  (Example: <h1 style="color: red; font-family: helvetica">)

---

What are the advantages of using CSS?

• - offers more precise stylistic control than simple HTML
• - can modify things you can't modify with simple HTML
• - can make "global" changes in one place instead of in many
• - can control the style of many pages
• - leaner, cleaner code
• - can custom-create specialized tags for specific purposes

What are the disadvantages of using CSS?

• - CSS is not understood in the same way by different browsers and browser versions
• - can get very complicated if you let it

Return to top

---

What does CSS look like?

This particular page is an example of a document that uses an EMBEDDED stylesheet.

CSS expressions are called rules, which are made up of:

a Selector (or HTML tag) a Property (similar to HTML attribute) Value/s (specific size, color, weight, etc.)

The property and the value/s together are called a declaration.

Here's the rule that made the title of this page:

h1 { color: #8c0021; font-family: arial ; font-size: 22pt ; }

And here's what it means:

h1	= the HTML tag being affected (size 1 header)
color	= the first property (color) being specified
#8c0021	= the RGB value of the color
font-family	= the second property (font style)being affected
arial	= the value of the font
font-size	= the third property, or how large or small the font will be displayed
22pt	= the exact size of display (22 points)

Punctuation and spacing are important! Use the following syntax:

[selector][space][curly bracket][space][property name][colon][space][value][semi-colon][space][curly bracket]

For example: body { margin-left: 25px; }

Return to top

---

Style Properties

There are more than 100 properties that can be applied to a variety of HTML tags, all of which are listed in the official W3C property index. The most commonly used affect:

• - appearance of font or text

• - alignment and spacing of text

• - colors and backgrounds

• - positioning of things on the page

Note that properties consisting of two words are hyphenated (e.g., margin-left).

Here are some properties you can experiment with, or go to the Web Design Group's Properties Page for more:

Property name	Possible values
font-size	px, pt, em, %, small, medium, large
font-weight	normal, bold, bolder, lighter, 100-900
font-family	helvetica, courier, arial, etc.
text-decoration	none, underline, overline, line-through, blink
text-indent	em, px, pt, mm, cm, %
text-transform	uppercase, lowercase, capitalize
vertical-align	top, text-top, middle, bottom, text-bottom
word-spacing	em, px, pt, mm, cm, %
letter-spacing	em, px, pt, mm, cm, %
line-height	em, px, pt, mm, cm, %
color	name of color (16), hex code, RBG value
background-color	same as above
background-image	url w/ file name; e.g., url(folder/file.name)
border-style	solid, double, inset, outset, groove, ridge
padding	em, px, pt, mm, cm, %

Return to top

---

Embedded Style Sheets

Here's how to include style sheet information for a single Web page:

• Within the HEAD element, include the following:
  <style type="text/css">
  (Where style is the tag, type is the attribute, and "text/css" is the value.)

• Then add the HTML tag to open a comment:
  <!--

• Then add the style sheet rules you want:
  body { border-width: 50px; font-family: Helvetica; }
  a:link { text-decoration: none; }
  center { font-color: red; }

• Then close the comment:
  -->

• Then close the style tag:
  </style>

The complete embedded style sheet for this page looks something like this:

<head>

<title>Using Style Sheets with HTML: Class Outline</title>

<style type="text/css">
<!--
body { border-left-width: 5%; border-color: #8c2001; background-color: white; }
table.green {background-color: #ccffcc; padding: 10px; width="60%"; }
a:link { color: green; text-decoration: none; font-weight: bold; }
a:visited { color: green; }
h1 { color: #8c0021; font-family: arial; font-size: 22pt; }
h1.first { color: red; font-family: arial; font-size: 18pt; }
h1.second { color: gray; font-family: arial; font-size: 18pt; }
hr { color: green; width: 90%; }
tr.first { background-color: #ffffcc;}
tr.second { background-color: #eeeeee; }
p.first { color: #2f4f2f; font-weight: bold; }
p.second { color: gray; font-weight: bold; }
p.third {color: red; text-transform: uppercase; text-decoration: underline; font-weight: bold; }
span { text-align: center; font-weight: bold; }
div { background-color: yellow; color: purple; font-weight: bold; }
-->
</style>
</head>

---

****Hands on: embedding styles****

If you don't have your own page to work on, you can go to this sample page, view the HTML source, and cut and paste the code into a new Note Tab screen.

Return to top

---

Using division elements (DIV, SPAN, P)

You can define and control sections of a document by using tags (selectors) that define that section. The most common are P, DIV, and SPAN. For example:

div {background-color: yellow;
color: purple;
font-weight: bold;
}

The text in the section above appears in the source code between <div> and </div> tags. Return to top

Which tag -- SPAN or DIV -- should you use?

The SPAN tag in itself has no visible effect on the formatting of the page, whereas the DIV tag will create a line break, similar to the <BR> tag. SPAN is preferred when you want to apply styles within a section of your page that is not visually separate from what surrounds it, e.g., a part of a sentence. SPAN is also used often to affect styles in part of a page containing images.

---

Creating Class Attributes

What if you want your <h1> tag to create blue text in one instance and red text in another? Suppose you want the test in one section of a document between <div> tags to be in one font style, but another section of text on the same page to be in another font style? Here's where creating class attributes comes in.

This page uses three different "classes" of the h1 tag, indicated as follows in the style sheet:

h1 { color: #8c2001; font-family: arial; font-size: 22pt; }
h1.first { color: #8c2001; font-family: arial; font-size: 18pt; }
h1.second { color: gray; font-family: arial; font-size: 18pt; }

h1 is red. h1.first is also red, and uses the same font, but is a different size. h1.second is the same font and size as h1.first, but it displays gray text instead of red.

To create a class attribute for a selector or tag with different properties than those already assigned to it in your style sheet:

• add a period after the name of the selector, followed by a name or series of characters to give it its own identity.

• indicate the class attribute at the point where you want to use it in the document in this form:

<[selector name] class = "[characters entered after the period]">

EXAMPLE: A selector named h1.red in the style sheet would be indicated in the coding as

<h1 class="red">

Return to top

---

Linking to an External Style Sheet

• requires a separate style sheet document with the extension .css
• requires that the path to the external style sheet appears in the HEAD element of the page using the stylesheet.
  Example of coding:

<head>

<title>Title of page</title>

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

</head>

---

****Hands on: linking to a style sheet****

You need to create a separate web page with the extension .css

---

Stuff to Worry About

• Inheritance - see Steve Mulder's explanation
• Cascade Order - see Steve Mulder's When Style Sheets Fight It Out
• Browser Compatibility - all CSS properties do not work the same way -- or even at all! -- with all web browsers and versions. Luckily, number of compatibility charts are available on the web. See: CSS Compatibility Listings & Charts
  For compatibility with older browsers, see Eric Meyer's Master Compatibililty Chart

---

Validating HTML and CSS

W3C HTML Validator

W3C CSS Validator Return to top

---

Where to Learn More About CSS

CSS Frequently Asked Questions (HTML Writers Guild)

Cascading Style Sheets (Web Developers Virtual Library)

WebMonkey Style Sheets Tutorial

The House of Style

W3C Specifications for CSS 2

"Style Guide for Online Hypertext"

CSS Zen Garden

---

Go to Current Internet Workshop Page

Go to HTML Resources Page

---

Last updated on July 17, 2007 (fm)
Fred Muratori
Reference Services Division, Olin*Kroch*Uris Libraries
Cornell University Library
URL: http://www.library.cornell.edu/olinuris/ref/ws/html/stylesheets.html