Cascading Style Sheets Tutorial and Slides

Style Sheets, or CSS for Cascading Style Sheets, are sets of rules that allow you to control how your web document will appear in the web browser. CSS overrides the browser's default settings for interpreting how tags should be displayed, letting you use any HTML element indicated by an opening and closing tag (including the <p> tag) to apply style attributes defined either locally or in a style sheet. Style sheets contain rules, and a rule has several component parts. The first part of the Rule (<p> <H1> is called the Selector. This tells the browser which element on the page to work with. The curly bracket pair contains the Declaration, which is comprised of a Property (color) and a Value (#333333). Here's the basic syntax of a rule defined:

Selector { property: value }

Examples:

P {font-family: Times, 'Times New Roman', serif; font-size: 8pt; color: red; }

You can specify several properties on one rule:

H1 { font-family: Times, serif; color: black; font-size: 2em; }

You can group tags:

H1, H2, H3 { font-family: Times, 'Times New Roman', serif; }

You can also be very specific (contextual selector). In the example below, the rule will only be applied to emphasized text inside of a Heading1 tag. <h1>Heading <em>One</em></h1>

H1 EM { font-family: Times, serif; color: maroon; font-style: italic; }

To apply style sheets to an HTML document you can use a single linked (or external) style sheet. Use a single style sheet (in a separate file, saved with the .css suffix) to define multiple pages. A typical .css file is a text file containing only style rules (No javascript comments, no HTML or anything else, only CSS), as here:

P {font-family: non-serif; font-size: medium; color: red}
H1 {font-family: serif; font-size: x-large; color: green}
H2 {font-family: serif; font-size: large; color: blue}

To apply a linked .css style sheet ("stylesheetname.css" in the example below) to an HTML page, a <link> tag is added to the page header:

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

Creating a linked style sheet allows you to define your CSS rules in one place. Linked style sheets ease web page maintenance, reduce file size, and increase accessibility.

Why use style sheets?

• create a set of web pages with consistent appearance
• easier maintenance
• separate page structure from page appearance
• ADA compliance
• reduce web page file size
• reduce your reliance on non-standard tags such as <center> and <font>

The following CSS Tutorial Workshop and Slide Presentation, from West Virginia University, will teach you more on how to use and code web Style Sheets. The CSS workshop contains illustrated explanations and examples of the concepts being taught, followed by detailed learning activities.


Cascading Style Sheets Tutorial and Slides

• Workshop Handout  [pdf, 11 pages, 145kb]
• What are style sheets?
• How CSS Works
• Why use style sheets?
• How to add style sheet rules to your web page
• Linked or External Style Sheet
• Activity 1: Apply a variety of external style sheets to the sample html file
• Inline or Local Style Sheet
• Activity 2: Add an inline style
• Embedded or Global Style Sheet
• Activity 3: Create a simple embedded style sheet
• Text Properties
• Activity 4: Add style rules to control text appearance
• Margins, Indent, Alignment
• Borders
• Shorthand properties
• Activity 5: Margins, Alignment, Indent
• Activity 6: Borders
• Class
• Pseudo-class for links
• Activity 7: Class and Pseudo-class for Links
• Validation
• Create different style sheets for print and screen
• Using Style Sheets in Dreamweaver
• References
  
  
• CSS Workshop PowerPoint Presentation
  
• CSS Workshop Data Files [zip]
  
• Validate your CSS