CSS

Home     Building Blocks     HTML Documents     Tags     Hyperlinks     CSS     Forms

Cascading Style Sheets

HTML was designed to describe content, not describe how the content looks. Up until now, most Web developers have used "work around" HTML techniques to improve the looks of their Web pages, but the new XHTML standards are forcing the move to CSS.  Cascading Style Sheets (CSS) are a robust set of tools designed to define the appearance of Web pages by assigning styles to specific HTML tags and portions of pages. This topic is fairly advanced in the Web-authoring environment so we won't actually be "doing" CSS, but we will take some time to explore what it looks like to see CSS in action.

CSS uses HTML to identify page elements.  The style sheet itself is stored in the <head> of the HTML document or in a separate style sheet document.  One change to the style sheet document, changes the respective tagged elements.

A CSS style sheet is made up of one or more rules. Each rule is comprised of a selector which identifies the parts of a Web page that should be affected, and one or more declarations, which specify the formatting which should be applied. The following styles will illustrate this:

This rule makes all of the h1s in a document red.

This rule specifies that the paragraphs should all be set in 12-point Verdana or some other sans-serif font.

Applying Style Rules

There are three ways in which style sheet rules can be applied to an HTML document:

  • External Style Sheets
    External style sheets save the rules in a separate style sheet document (named with the suffix .css). The .css document is then linked to one or more HTML documents. In this way, all the files in a web site may share the same style sheet. The code for the link typically looks like this:

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


See an example of the contents of an external style sheet.

  • Embedded Style Sheets
    Embedded style sheets are placed in the <head> of the HTML document using the <style> tag. Rules in an embedded style sheet apply only to that HTML document. You can view the styles for this Web page by choosing "view" then "source" from the menu.

  • Inline Styles
    Style sheet properties can be applied to a single page element using the style= attribute right within its opening HTML tag. Inline styles apply only to that element.

Style Sheet Hierarchy

Styles applied at the more specific level have more weight and override more general style sheets, that's why they have the name Cascading Style Sheets. The following list illustrates the style sheet hierarchy where items lower in the list will override items above them:

  • Browser default settings

  • User style settings (set in a browser as a "reader style sheet")

  • Linked external style sheet

  • Imported style sheets

  • Embedded style sheets

  • Inline style sheets