Chapter 6: Formatting Text with Style Sheets 

 

A.  Create a Chapter6 folder on your desktop. 

 

B.  Download the attached HTML document zip- (chapter6.zip). Copy the chapter6.html file into your Chapter6 folder.

 

C. Open the HTML document in WordPad.

 

D. Copy the style sheet to your Chapter6 folder.

NOTE: In this lab assignment, you will be using the external style sheet- mystyle.css that you created in the Chapter 5 assignment. 

 

E. Detatch and save the image file called error.gif.  on your desktop.

 

F.   Link the HTML document to the cascading style sheet.   Type the following style sheet link tag in between the <HEAD> and </HEAD> tags.

                   <LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">

 

G.  Open the mystyle.css in WordPad.   Format your text in your HTML document by adding all the style sheet rules illustrated in this chapter.   Follow the step-by-step demo instructions for this chapter exercise (see chapter 6 lecture presentation under Course Documents). Save your style sheet as a text file with a file name of mystyle.css.   See the attached sample of the CSS file

 

H.  Review and save your html document.   See the attached sample of the html document.

 

I.  View and verify your web page displays properly in your browser. See the attached sample web page output.

 

J.  Verify if the HTML document- chapter5.html passes the W3C Markup Validation Service.  You will need to upload your HTML document to the site-  http://validator.w3.org/.

 

K. Verify if the CSS document – mystyle.css passes the W3C CSS Validation Service.  You will need to upload your CSS document to the site-  http://jigsaw.w3.org/css-validator/

L. Submit your work:
a. All the following files are required- 1) HTML document-
Chapter6.html, 2) cascading style sheet - mystyle.css, and 3) error.gif

b. Zip up and upload your Chapter6 compressed folder to the Canvas Chapter 6 Assignment Drop Box.

 

Chapter Topics

Points

1  Add Bold to Text

2

2  Italicize Text

2

3. Indent Text

2

4. Change the Font Size

2

5. Change the Font

2

6. Change the Text Case

2

7. Change the Text Alignment

2

8. Control Line Spacing

2

9. Set Margins

2

10. Add Padding

2

11. Add Color to Text

2

12. Add a Border

2

13. Control Element Position

2

14. Wrap Text Around Elements

2

15. Change Vertical Alignment

2

Total

30