Fundamentals of Computer Science 1 (CS151 2003S)

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

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 ....

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.

 

History

Monday, 27 January 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 May 6 09:28:42 2003.
The source to the document was last modified on Mon Jan 27 14:36:51 2003.
This document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2003S/Labs/css.html.

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

Samuel A. Rebelsky, rebelsky@grinnell.edu