LESSON PLAN: Cascading Style Sheets (CSS)

LESSON PLAN:  Cascading Style Sheets (CSS)

Lesson Overview:

Students will gain knowledge of the use of Style Sheets to format the content of their Web pages.  Style Sheets are the new standard for creating a "look and feel" for Web pages that is separate from the content of the pages themselves.  Herein lays the strength of Style Sheets over the previous use of HTML tags to try to format Web page content.  Style Sheets have freed the Web designer to separate Web page contend from Web page display.  Style Sheets were created to stop the spiraling proliferation of new HTML tags created constantly to help designers create better looking Web sites within the limitations of HTML itself.

Length of Lesson:

One two-hour session

Notes:

This lesson is number five in a series of five lessons that comprise the basic HTML learning model.

Instructional Objectives:

Students will:

• Use Notepad to write code for their HTML pages
• Use Internet Explorer Web browser to display HTML pages
• Use the Style attribute to format individual HTML tags
• Use the <STYLE> tag in a HTML page to format various sections of the page

Supplies:

Computers with Microsoft Notepad and Internet Explorer installed.  Students will need a storage device such as a floppy disk or CD ROM to store projects.

Instructional Plan:

Style Sheets versus traditional HTML formatting tags

The instructor will discuss the evolution of Style Sheets as an answer to the problem of the ever-increasing number of HTML tags created to help designers format the content of Web pages more easily.  Deprecation of existing HTML version 4.0 tags will be discussed and demonstrated.  The instructor will discuss and demonstrate the three methods of inserting Styles into Web pages.  The instructor will also discuss and demonstrate the proper formation of Style Sheets.

The Style attribute

The Style attribute is used within an existing HTML markup tag to change the output of the tag from what the browser default settings are.  The Style attribute has the following format"

            <TAGNAME  style="stylename:stylevalue;stylename:stylevalue">

Students will complete Exercise 1 – Using the "style" attribute.

Internal Style Sheets

The Instructor will discuss and demonstrate insertion of the <STYLE> tag into HTML pages to create what is termed an "internal" style sheet.  Associating styles to HTML tags, creating classes and the use of the <DIV> and <SPAN> tag will be discussed and demonstrated.

Students will complete Exercise 2  - Internal Style Sheets

Sources:

Print

• LeMay, Laura, Teach Yourself Web Publishing with HTML 4 in 14 Days. Indianapolis: Sams.net 2000.

Assessment:

Students will complete the Assessment 1 exercise to demonstrate understanding the use of the style attribute and the internal <STYLE> tag.

Author:

Norman W. Benton

Lehigh Valley College

Center Valley, PA