Using Cascading Style Sheets (CSS)

 

Why use style sheets? In one sentence, it’s because CSS enhances a Web page creator’s control over the appearance of a Web page. And also:

Most importantly, the use of style sheets contributes to the universal accessibility of your Web pages.

 

HTML was never designed to be a formatting language. It's a language that defines the structure and function of elements on a page. It lets the Web browser decide how those elements should actually appear. In contrast, a style sheet gives direction to the Web browser to override its defaults (e.g., underline links) in favor of your own style (e.g., don’t underline links). For an example of a plain vanilla file that uses browser defaults, see http://www.csudh.edu/webdevgrp/css/css_1.htm. (In Internet Explorer, click View > Source to see the HTML underlying the displayed page.)

 

Chances are you’ve styled a page with formatting elements such as FONT, B, and CENTER. See http://www.csudh.edu/webdevgrp/css/css_2.htm for an example of a formatted page that doesn’t use style sheets.

What is a style sheet?

A style sheet is a list of style rules, for example:

H1 {color; red;}

H2 {color: maroon; background: white;}

body {color: white; background: black; font: medium Helvetica;}

The first rule specifies red text on the default background color for H1 elements. Rule two says H2 elements will show maroon text on a white background. The third rule applies to the body of a Web page: text color is white, background color is black, and the font will be medium-sized Helvetica.

The Cascade

CSS provides resolutions to conflicting rules through the cascade. Local rules override imported rules which override default (browser) rules. In addition, Web surfers (page readers) can, in some browsers, specify their own style sheets, which override all of the above. This is the feature that allows a disabled page reader to impose her own styles onto a Web page. For example, a color blind page reader might use this style to make a hyperlink more readable:

            A:link {color: white; background: black;}

Goodbye, <font> <center> <u>, …

The whole point of style sheets is to separate form and structure. With style sheets, I can have all the pages on my site point to a single CSS document. If I want to change the body text, all I do is change one line in this style sheets document, and the entire site instantly changes.

Further, the <font> element is deprecated, meaning it will disappear in some future version of the World-Wide Web Consortium (W3C) HTML standard. Note: Other deprecated elements include <center> and <u>.

How to define a style sheet:

A style sheet is a simple ASCII text file to which you’ll assign a filename extension .CSS, rather than .HTM or .HTML.

How to refer to a style sheet:

There are three ways to refer to a style sheet:

Inline Style

Here’s the style definition at http://www.csudh.edu/default.htm:

 

<STYLE>

A

{

    TEXT-DECORATION: none

}

A:active

{

    TEXT-DECORATION: none

}

A:link

{

    TEXT-DECORATION: none

}

A:visited

{

    TEXT-DECORATION: none

}

A:hover

{

    COLOR: #990000;

    TEXT-DECORATION: underline

}

</STYLE>

This style sheet specifies that hyperlinks are not underlined unless the mouse is hovering over the link. Note that the CSUDH style definition uses the widely-used convention of placing { and } on separate lines.

Embedded Style Sheet

Use the STYLE element to embed a style sheet in the current HTML document, for example:

<style type=”text/css”>

body {background: yellow;}

</style>

See http://www.csudh.edu/webdevgrp/css/css_3.htm for an example of an embedded style sheet.

 

Within the STYLE element, use the @import directive to cause an external style sheet to be loaded. For example:

            <style type=”text/css”>

            @import url(sheet.css);

            H1 {color: gray;}

            </style>

 

An @import directive must precede any other statements in the STYLE container. The container can include more than one @import directive; and all specified sheets will be loaded, and all of their rules will be used to display the current document. The cascade will resolve any conflicts.

External Style Sheet

Refer to an external style sheet file with the LINK tag. Example:

<link rel=”stylesheet” type=”text/css” href=”sheet.css” title=”default” />

The <link> tag must be placed in the HEAD element of the HTML file but may not be placed inside any other element.

 

rel stands for “relation”, and in this case the relation is “stylesheet”.

 

See http://www.csudh.edu/webdevgrp/css/css_4.htm for a file that uses an external style sheet.

Best Practices and Conventions

References