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
body
The font-family should be Arial
The text-align should be set to center
div The color should be #ffffff
The font-size should be set to 14pt

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.

position: absolute
top: px;
left: px;
#box1
height: px;
width: px;
background-color: #009900;
position: absolute
top: px;
left: px;
#box2
height: px;
width: px;
background-color: #009900;
position: absolute
top: px;
left: px;
#box3
height: px;
width: px;
background-color: #000099;
position: absolute
top: px;
left: px;
#box4
height: px;
width: px;
background-color: #009900;
position: absolute
top: px;
left: px;
#box5
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