Lesson 4: Creating Style Sheets (CSS)
A. Follow
the step-by-step demo instructions for this chapter exercise (see
Lecture 4 presentation ).
B. Create a
Lesson4 folder on your desktop.
C. Download the attached HTML document zip- (Lesson4.zip). Copy the Lesson4.html file into your Lesson4 folder.
D. Open the HTML document in WordPad.
NOTE: The HTML document you downloaded
contains the tags (i.e. <HEAD>, <TITLE>,
<BODY> <P>, <H1>, <OL>, <LI>, etc ) that you have learned in the
previous chapters.
E. Create an external and internal style sheet in
WordPad. Link your HTML document to the external style sheet.
Add the style rules that are illustrated in this chapter.
See the attached sample
of the external CSS file. Save your external cascading style
sheet as mystyle.CSS in
your Lesson4 folder.
F. View and verify your web page displays
properly in the browser. Attached is the
sample of the
HTML document and the desired sample
of the output Web page.
G. Verify if the HTML document- chapter4.html
passes the W3C Markup Validation
Service. You will need to upload
your HTML document to the site- http://validator.w3.org/.
H. 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/
Submit your work:
a. All the following files
are required- 1) HTML document- Lesson4.html and 2) cascading style sheet - mystyle.css.
b. Zip up and upload your Lesson4 compressed folder to the Canvas Lecture 4 Lab Assignment Drop Box.
|
Lecture 4 Topics
|
Points |
|
1 Create an External Style
Sheet |
4 |
|
2. Link a Style Sheet |
3 |
|
3. Add Comments to a Style
Sheet |
2 |
|
4. Create an Internal
Style Sheet |
3 |
|
5. Create a Class |
2 |
|
6. Apply a Style with the
DIV Tag |
2 |
|
7. Apply a Style Locally |
2 |
|
8. Apply a Style Using the
ID Attribute |
2 |
|
9. HTML document passes W3C Markup Validation Service |
5 |
|
10. CSS document passes W3C CSS Validation Service |
5 |
|
Total |
30 |