Lesson Plan
Course Title: Web Technologies
Session Title: Beginning Cascading Style Sheets (CSS)
Lesson Duration:
3 hours
Performance Objective:
Upon completion of the lesson, students will understand the basic format and structure of
cascading style sheets and learn how to create containers and position them onto a
webpage.
Specific Objectives:
 Students will understand how style sheets can enhance a web page.
 Students will understand the benefits of using style sheets.
 Students will be able to create and position content containers onto a web page.
Preparation
TEKS Correlations:
•
8: The student demonstrates knowledge of Internet programming strategies. The
student is expected to
(8)(A) recognize the importance of Internet programming standards;
(8)(B) differentiate among various web coding standards such as HyperText
Markup Language, Extensible HyperText Markup Language, and Cascading Style
Sheets;
(8)(C) Use standard applications such as text-based editing
programming, word processors; and web authoring software; and
(8)(D) compare and contrast the impact of different browsers on web
development.
Instructor/Trainer
References:
• Using your favorite web browser, perform a search on “cascading style sheet tutorials” or
“beginning cascading style sheets”.
Instructional Aids:
• Beginning CSS Presentation
• Student Files Folder
• CSS Activity
• CSS Lesson Quiz & Key
IT: Web Technologies –Cascading Style Sheets Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
1
Materials Needed:
• Printouts of the CSS Activity
• Printout of the presentation
• Quiz following the activity
Equipment Needed:
 Computer with a text editor and a web browser for each student
Introduction
MI
Introduction (LSI Quadrant I):
1. Start out by showing the student example.htm in the browser with the style
sheet link removed. Explain that the page is without style and only contains
the html structure and content. The idea of Cascading Style Sheets is to
separate style and design layout from structure and content.
2. Next, display the code for the page and attach the example1.css style
sheet to the page.
3. Refresh the browser and explain how the style sheet controls the look of the
site. Also, explain that the style and layout are defined in a separate page; it
only needs to be done once and can be attached to all the pages of their
sites.
IT: Web Technologies –Cascading Style Sheets Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
2
Outline
Outline (LSI Quadrant II):
Instructor Notes:
I. Introduction to style sheets
A. What style sheets are used for and
their purpose
B. Benefits of using style sheets
C. How style sheets are used with
web pages

Have a copy of the
presentation printed out
in the notes pages
format prior to starting
the presentation.

Students should open
their text editor and
practice creating the
boxes shown in the
presentation.
II. Style sheet structure
A. Structure of the style rule
B. Property groups
C. Multiple styles on a single rule
III. Applying style sheets
A. External style sheets
B. Embedded style sheets
C. Inline style sheets
IV. Positioning content
A. Absolute positioning
B. Relative positioning
V. Students complete hands-on labs on their
own
A. Incorporating the embedded style
sheet on a web page.
B. Incorporating the external style sheet
on a web site
Application
MI
Guided Practice (LSI Quadrant III):
The instructor will present the presentation while students follow along taking
notes and completing the example shown in the slides.
MI
Independent Practice (LSI Quadrant III):
IT: Web Technologies –Cascading Style Sheets Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
3
Each student should be provided with a copy of the CSS Activity. The students
should create the web page and style sheet described in the activity.
IT: Web Technologies –Cascading Style Sheets Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
4
Summary
MI
Review (LSI Quadrants I and IV):
Following the activity, the instructor should discuss any difficulties students had with
the exercise. The instructor should also ask students why using style sheets to
control layout might be a more efficient method of web design.
Evaluation
MI
Informal Assessment (LSI Quadrant III):
While students are working on the activity, the teacher should observe the students’
performances and take notice of any areas of difficulty.
MI
Formal Assessment (LSI Quadrant III, IV):
1. The instructor should check the completed CSS Activity for each student,
verifying both the appearance in the browser as well as the code usage.
2. The instructor should give the students a short quiz following the lesson.
Extension
MI
Extension/Enrichment (LSI Quadrant IV):
Following the lesson, students can locate websites online that use table layouts, and
they could attempt to recreate the same layout using style sheets.
IT: Web Technologies –Cascading Style Sheets Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
5
Icon
MI
Verbal/
Linguistic
Logical/
Mathematical
Visual/Spatial
Musical/
Rhythmic
Bodily/
Kinesthetic
Intrapersonal
Interpersonal
Naturalist
Existentialist
Teaching Strategies
Personal Development
Strategies
Lecture, discussion, journal
writing, cooperative learning,
word origins
Reading, highlighting, outlining,
teaching others, reciting information
Problem solving, number
games, critical thinking,
classifying and organizing,
Socratic questioning
Mind-mapping, reflective
time, graphic organizers,
color-coding systems,
drawings, designs, video,
DVD, charts, maps
Use music, compose songs
or raps, use musical
language or metaphors
Organizing material logically, explaining
things sequentially, finding patterns,
developing systems, outlining, charting,
graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing
with color, mental imagery (drawing in
the mind’s eye)
Use manipulatives, hand
signals, pantomime, real life
situations, puzzles and board
games, activities, roleplaying, action problems
Reflective teaching,
interviews, reflective listening,
KW L charts
Cooperative learning, roleplaying, group brainstorming,
cross-cultural interactions
Natural objects as
manipulatives and as
background for learning
Socratic questions, real life
situations, global
problems/questions
Creating rhythms out of words, creating
rhythms with instruments, playing an
instrument, putting words to existing
songs
Moving while learning, pacing while
reciting, acting out scripts of material,
designing games, moving fingers under
words while reading
Reflecting on personal meaning of
information, studying in quiet settings,
imagining experiments, visualizing
information, journaling
Studying in a group, discussing
information, using flash cards with
other, teaching others
Connecting with nature, forming study
groups with like-minded people
Considering personal relationship to
larger context
IT: Web Technologies –Cascading Style Sheets Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
6
Cascading Style Sheet Activity
This lab will walk you through creating content containers and placing them in specific locations on your web
page.
1. Open a blank document in a text editor.
2. Set up the basic html tags for a blank web page.
3. We will create an embedded style sheet in the heading of the document. Inside the heading of the
document, add a set of opening and closing style tags.
4. Create the following style definitions within your embedded style sheet. Be sure to use the proper style
rule structure when writing your styles.
Set the background-color to #ff6600
The font-family should be Arial
The text-align should be set to center
The color should be #ffffff
The font-size should be set to 14pt
body
div
5. Create 5 ids to size and position 5 content containers on your web page.
50px
50px
Box 2
Box 1
100px
100px
Box 3
Box 4
Box 5
NOTE: All the containers are the same size.
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
7
6. Add the following ids to your embedded style sheet. You will need to calculate the appropriate top and
left position based on the diagram on the previous page.
#box1
#box2
#box3
#box4
#box5
position: absolute
top:
px;
left:
px;
height:
px;
width:
px;
background-color: #009900;
position: absolute
top:
px;
left:
px;
height:
px;
width:
px;
background-color: #009900;
position: absolute
top:
px;
left:
px;
height:
px;
width:
px;
background-color: #000099;
position: absolute
top:
px;
left:
px;
height:
px;
width:
px;
background-color: #009900;
position: absolute
top:
px;
left:
px;
height:
px;
width:
px;
background-color: #009900;
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
8
7. Move down to the body section of your document.
8. Within the body, create 5 div containers.
a. Within the first div container, apply the box1 id, and between the opening and closing div tags,
add the text “Box 1”.
<div id=”box1”>Box 1</div>
b. Within the second div container, apply the box2 id, and between the opening and closing div
tags, add the text “Box 2”.
c. Within the third div container, apply the box3 id, and between the opening and closing div
tags, add the text “Box 3”.
d. Within the fourth div container, apply the box4 id, and between the opening and closing div tags,
add the text “Box 4”.
e. Within the fifth div container, apply the box5 id, and between the opening and closing div tags,
add the text “Box 5”.
9. Save the document as CSS_Activity.htm and preview it in your browser. Your version should resemble
the example below.
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
9
NAME:
DATE:
Beginning Cascading Style Sheets — Quiz
Select the best answer choice for each of the following questions.
1. What is the purpose of HTML?
a. To define the style of a web page
b. To view web pages
c. To define the content on a web page
d. To add interaction to a web page
2. A style sheet consists of what?
a. HTML tags
b. Multiple style rules
c. The content of the
paged. Only the style
properties
3. What are the two parts of a style rule?
a. External and embedded styles
b. Properties and tags
c. Tags and attributes
d. Properties and values
4. To apply a style rule to a single tag, which style sheet level would you use?
a. Inline
b. Embedded
c. External
5. To apply a style rule to an entire web site, which style sheet level would you use?
a. Inline
b. Embedded
c. External
6. To apply a style rule to a single web page, which style sheet level would you use?
a. Inline
b. Embedded
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
10
NAME:
c. External
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
11
7. What file extension should external style sheets be saved with?
a. .css
b. .htm
c. .js
d. .php
8. What HTML tag is used to attach an external style sheet to a web page?
a. The <a tag
b. The <link tag
c. The <embed tag
d. The <import tag
9. Which style sheet property is used to modify the color of text?
a. color:
b. text-color:
c. font-color:
d. letter-color:
10. Which tag is used to create content containers that can be sized and positioned onto the page?
a. <p> .. </p>
b. <span> .. </span>
c. <div> .. </div>
d. <h1> .. </h1>
11. Which position value would specify that the element should be moved from its original position
without affecting the remaining objects on the page?
a. Absolute
b. Relative
c. None; the placement cannot be done
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
12
12. Which position value would specify that the element should be placed
independently of the other objects on the page?
a. Absolute
b. Relative
c. None; the placement cannot be done
13. Which symbol is used to define an ID?
a. . (period)
b. # (number sign)
c. { } (curly braces)
d. < > (angle brackets)
14. Which style sheet rule property specifies a background image?
a. background: design.gif
b. background-image: design.gif
c. background: url(design.gif)
d. background-image: url(design.gif)
15. Embedded style rules are placed between which set of tags?
a. <style> .. </style>
b. <div> .. </div>
c. <body> .. </body>
d. Tags are not paced around embedded style rules
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
13
Beginning Cascading Style Sheets – Quiz -- KEY
Select the best answer choice for each of the following questions.
1. What is the purpose of HTML?
a. To define the style of a web page
b. To view web pages
c. To define the content on a web page
d. To add interaction to a web page
2. A style sheet consists of what?
a. HTML tags
b. Multiple style rules
c. The content of the page
d. Only the style properties
3. What are the two parts of a style rule?
a. External and embedded styles
b. Properties and tags
c. Tags and attributes
d. Properties and values
4. To apply a style rule to a single tag, which style sheet level would you use?
a. Inline
b. Embedded
c. External
5. To apply a style rule to an entire web site, which style sheet level would you use?
a. Inline
b. Embedded
c. External
6. To apply a style rule to a single web page, which style sheet level would you use?
a. Inline
b. Embedded
c. External
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
14
7. What file extension should external style sheets be saved with?
a. .css
b. .htm
c. .js
d. .php
8. What HTML tag is used to attach an external style sheet to a web page?
a. The <a tag
b. The <link tag
c. The <embed tag
d. The <import tag
9. Which style sheet property is used to modify the color of text?
a. color:
b. text-color:
c. font-color:
d. letter-color:
10. Which tag is used to create content containers that can be sized and positioned onto the page?
a. <p> .. </p>
b. <span> .. </span>
c. <div> .. </div>
d. <h1> .. </h1>
11. Which position value would specify that the element should be moved from its original position
without affecting the remaining objects on the page?
a. Absolute
b. Relative
c. None; the placement cannot be done
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
15
12. Which position value would specify that the element should be placed independently of the other
objects on the page?
a. Absolute
b. Relative
c. None; the placement cannot be done
13. Which symbol is used to define an ID?
a. . (period)
b. # (number sign)
c. { } (curly braces)
d. < > (angle brackets)
14. Which style sheet rule property specifies a background image?
a. background: design.gif
b. background-image: design.gif
c. background: url(design.gif)
d. background-image: url(design.gif)
15. Embedded style rules are placed between which set of tags?
a. <style> .. </style>
b. <div> .. </div>
c. <body> .. </body>
d. Tags are not paced around embedded style rules
Web Technologies –Cascading Style Sheets
Copyright © Texas Education Agency, 2013. All rights reserved.
16