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 |