University of Rochester
EMERGENCY INFORMATIONCALENDARDIRECTORYA TO Z INDEXCONTACTGIVINGTEXT ONLY

Style Sheets — The Basics

This page only scrapes the surface of what you can do with style sheets. If you are interested in learning more, see Designing for Web Standards by Jeffrey Zeldman, or CSS Pocket Reference by Eric A Meyer.

Introduction

Cascading Style Sheets (CSS) are a Web standard used to control the visual appearance of content on your Web pages. Style sheets allow you to control the look of elements on your Web pages across your whole Web site, instead of defining elements one at a time. They make your pages leaner, cleaner, and easier to maintain.

For example, imagine you want to change the way the H2 headers are displayed. Without style sheets, you would add code to each H2 tag on your pages, like this:

<h2><font face="Georgia, Times New Roman, Times, serif" size="+1"
color="red">This is My Header</font></h2>

With style sheets, you can control the look of all the H2 tags in your Web site with one simple rule like this:

h2 {font-family: Georgia, "Times New Roman", serif; 
	font-size: 125%;
	color: red;
	padding-bottom: 0px;}

The style sheet is maintained separately from your Web page. So on your Web page, all you will see is:

<h2>This is My Header</h2>

Much simpler, yes? And if you ever want to change your H2 headers—make them purple instead of red, for instance—you can do that in one place—your style sheet—instead of finding and changing each H2 tag on your Web site.

Adding styles to Web pages

There are three ways styles can be added to your Web page:

Inline styles

Inline styles can be applied to individual HTML tags within your Web page. This can be a good method to use if you are applying a different style to just one element on your site, but it should not be used across the whole of your site, since it is not much of an improvement over the old way of doing things.

<h1 style="color: red; font-family: Georgia, Times, serif;
font-size: 150%;">This is my Header</h1>

Embedded styles

A style sheet can be embedded into the <head> element of an HTML page. This is a good method to use if your Web site only contains one or two pages, or if you only want to apply styles to one or two pages in your site.

<html>
<head>
<style type="text/css">
h1 {color: red; font-size: 150%; }
p {margin-bottom: 10px; }
</style>
</head>

...
</html>

External style sheets

For most average-sized Web sites, the best way to add styles to your Web pages is to maintain them in a separate text document and then reference them from your HTML page. There are two ways to do this. This first way creates a link to the style sheet in the <head> of your page.

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

The second way is to import an external style sheet using the @import directive.

<head>
<style type="text/css">
@import url(mystylesheet.css)
</style>
</head>

NOTE: Style sheets that are imported cannot be seen by older Web browsers, like Netscape 4.0. This may actually come in handy, if there are styles that you want newer browsers to see but older browsers to ignore. For much more on this "Two-Sheet Method" see Jeffrey Zeldman's article on A List Apart.

Applying styles to sections of your Web pages
(id and class)

In all of the examples above, we show how to apply styles to an element across your whole Web site. But what if you only want your H2 headers to be red if they appear in the main body of your page, but not in a sidebar, for example? Style sheets allow you to define sections of your Web site, so that the style will only be applied to that element if it appears in that section.

id selectors

On pages that use style sheets, id selectors allow you to define sections of your page and the styles that will apply to elements in that section. In CSS, id selectors are indicated by a pound sign (#).

#sidemenu {font-style: italic;
		   text-align: right;}

The styles in the preceding example will apply to the entire element whose id is sidebar. That element could be a table, a table cell, a paragraph, etc.

<table id="sidemenu">
	<tr>
		<td>Your content here. This text will be in italics
and aligned right.</td>
	</tr>
</table>

Or the element could be a div. Use a div to define a large section of content on your site that will encompass several elements (paragraphs, tables, images, headers, etc.) and fulfill one specific function (side menu, sidebar, main content, etc.)

<div id="sidemenu>
<h2>My Side Menu Heading</h2>
	<a href="link1.html">The first link</a>
	<a href="link2.html">All of this content is in italics and
aligned right</a>
	<a href="link3.html">That includes the heading and these links</a>
</div>

What if you want your H2 headings to be treated differently in the sidebar element? No problem.

#sidebar h2 {font-style: normal;
		color: purple;
		font-size: 150%;}

This style will only affect H2 headings in the sidebar element. Other H2 headings will not be affected, and other content in the sidebar will not be affected.

id selectors can only be used once in your HTML document. You cannot have multiple divs called sidebar.

class selectors

Specific HTML elements can be grouped into classes using the class selector. In CSS, class selectors are indicated by a dot.

.emphasis {color: #FF0033"; 
		background: #333399";
		font-weight: bold;}

Any element with a class of emphasis will display bold, red text on a blue background.

<h1 class="emphasis>Heading is bold red on blue</h2>
<p class="emphasis>So is this paragraph</p>

Like id classes can also be applied only to specific elements.

td.emphasis {color: #FF0033"; 
		background: #333399";
		font-weight: bold;}

In the example above, the rules will only apply to table cells with a class emphasis. Table cells without a class of emphasis will not be affected by the rule. By the same token, paragraphs, headings, and other elements with a class emphasis will also not be affected by this rule.