Fundamentals of Computer Science I (CS151 2003F)

Laboratory: Cascading Style Sheets

Summary: In this lab, you will experiment with simple Cascading Style Sheets, which permit you to associate interesting formatting with Web pages.

References:

Supplies:

Contents:

Exercises

Exercise 0: Preparation

a. Make a copy of each of the following files in your public_html directory. (Recall that you can make copies by clicking and holding with the right mouse button and then selecting Save Link Target As ....

b. Share each of the files.

c. Read through sample.html to ensure that you understand the structure of the document.

d. Open your copy of sample.html in your Web browser.

Exercise 1: Adding A Style Sheet

a. Open sample.html in gedit.

b. Add the following line to the head of the document.

<link rel="stylesheet" type="text/css" href="sample0.css">

c. Reload sample.html in your Web browser and observe any changes.

Exercise 2: Coloring Text

a. Open sample0.css in gedit.

b. Add code to have my name printed in some color of your choice. (You can use names, like blue, or red-green-blue combinations, like RGB(100,200,100), in which each portion is between 0 and 255, inclusive.

c. Check the effects of your changes.

Exercise 3: Changing Style Sheets

a. Update sample.html to use sample1.css rather than sample0.css.

b. Reload the page in your browser to see the effect.

(No, I don't claim that my ability to design pages is very good. The new style sheet is just intended to show you some alternatives.)

Exercise 4: Borders

a. Open sample1.css in gedit.

b. You will note that there is a line in the section for DIV.qanda that reads

  border-width: 10px 10px 10px 10px;

Determine experimentally what each of the four values represents.

Exercise 5: A New Property

a. Scan through the CSS Recommendation from W3C and find some property that I haven't used in the samples.

b. Update one of the style sheets to use that new property.

c. Be prepared to present the property to the class.

Exercise 6: Anything Goes

Spend some time experimenting with the sample page (or one of your own design) to see if you can come up with an appropriate design.

Exercise 7: Lists

a. Make a list of particular logical components you might use in the Web pages you create.

b. Make a list of interesting formatting attributes that you might employ as you make visually appealing Web pages.

 

History

Monday, 27 January 2003 [Samuel A. Rebelsky]

Wednesday, 3 September 2003 [Samuel A. Rebelsky]

 

Disclaimer: I usually create these pages on the fly, which means that I rarely proofread them and they may contain bad grammar and incorrect details. It also means that I tend to update them regularly (see the history for more details). Feel free to contact me with any suggestions for changes.

This document was generated by Siteweaver on Tue Dec 9 13:58:59 2003.
The source to the document was last modified on Wed Sep 3 21:51:13 2003.
This document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2003F/Labs/css.html.

You may wish to validate this document's HTML ; Valid CSS! ; Check with Bobby

Samuel A. Rebelsky, rebelsky@grinnell.edu