Overview

Cascading style sheets (CSS) is a powerful tool for formatting Web documents.  In this lesson, you’ll take a look at sample style sheets and consider the risks and benefits of developing with CSS.  You’ll also observe style sheet syntax and create simple style rules.

Objectives:

To become familiar with the function of style sheets and style sheet syntax, you will:

1          Examine sample style sheets

To understand how style sheets merge with HTML to format Web documents, you’ll observe the separation of style rules from the body of an HTML document and the transformation of a Web page when linked to an external style sheet.

2          Explore the advantages and disadvantages of designing with style sheets

Until the 4.x browsers (Netscape Navigator and Microsoft Internet Explorer) are phased out, you should consider several important issues before using CSS as your primary design tool.  You’ll demonstrate your knowledge of these issues by listing two advantages and two disadvantages of developing with CSS.  You’ll also explore the four different style sheet types.

3          Explore style sheet syntax
            You will learn intuitive structure of CSS rules and the simplicity of attaching rules to page elements.

Introduction to Cascading Style Sheets (CSS)

You’ve probably heard a thing or two about cascading style sheets and the promise the technology holds for developers and designers seeking precise control over the appearance of the Web documents.  Gone are the old HTML workarounds that often result in cluttered, cumbersome code--right?

Well, not quite yet.  True, cascading style sheets (CSS) is a powerful standard for controlling the design and layout of Web documents.  But browsers have been slow in keeping up with the evolving standards, and in many cases, as you’ll see, their interpretation of the spec has made some CSS features unusable.  Still, the future of CSS is bright, and there’s not better time than now to prepare for the better way.

CSS and DHTML

CSS is a core technology of dynamic HTML (DHTML), which also includes HTML, the document object model (DOM), and scripting languages like JavaScript.  Together, these technologies allow for the manipulation of Web content and the creation of dynamic and interactive pages.

What’s a Style Sheet?