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:

• Selector - that part before the left bracket
• Declaration - that part within the brackets

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

Back Next 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