This webpage is updated by Len Hom on May 1, 1999

Len's Lab 12 - Cascading Style Sheets (CSS)

Introduction

This is a short introduction to styling your Web pages. It will show you how to use Cascading Style Sheets (CSS) language as an alternative to using HTML itself. CSS is developed by the World Wide Web Consortium (W3C) as a means to separate the control of the appearance of a document from its structure, which is defined by standard HTML. By using CSS you can specify everything from typefaces for different HTML elements to font colors, background colors, margins, spacing, etc. Any part of the visual appearance of your document can be defined. Then, in browsers that support CSS, including Netscape and Internet Explorer 4, these style definitions will apply to the final appearance of the document. In this presentation, we will look at various examples of CSS.

Review of Rules and Style Sheets

CSS is based on rules and style sheets. A rule is a statement about one stylistic aspect of one or more elements. A style sheet is one or more rules that apply to the HTML document.

An example of a simple style sheet is a sheet that consist of one rule. In the following example, we add a color to all first-level headings (H1). Here's the line of code (rule) that we add:

H1 { color: red}

A rule consists of two parts:

The selector is the link between the HTML document and the style. It specifies what elements are affected by the declaration. The declaration sets forth what the effect will be. In the above example, the selector is H1 and the declaration is "color: red", which means all H1 elements will be shown in red.

Let's begin with setting the color of the text and the background using style element. Go to the table below and select "Style Sheet 1" or "Next" at the bottom of the page. A sample layout using style sheets is shown below.

Cascading Style Sheets (CSS)
Style Sheet Description
Style Sheet 1 Inline Style Markup
Style Sheet 2 Embedded Style Sheet
Style Sheet 3 Controlling the Font Using Linked CSS
Style Sheet 4 Adding Borders and Backgrounds Using Linked CSS
Style Sheet 5 Further Information on CSS

A Sample Style Sheet Layout - Guy West Bridge

This picture of Guy West Bridge at CSUS was take by Len Hom during 1998 as part of a project of the Renaissance Photography Group. I hope you like the photo.

Thumbnail of GWestbridge





If you have any comments or questions, please send email to:

Len Hom


Back [Back Button] Next [Next Button] Return to Beginning of Page


I take full responsibility for the information posted. The information on this page represents that of myself and not that of California State University, Sacramento or the School of Engineering and Computer Science