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:

• CSS Recommendation from W3C

Supplies:

• sample.html
• sample0.css
• sample1.css

Contents:

• Exercises
  • Exercise 0: Preparation
  • Exercise 1: Adding A Style Sheet
  • Exercise 2: Coloring Text
  • Exercise 3: Changing Style Sheets
  • Exercise 4: Borders
  • Exercise 5: A New Property
  • Exercise 6: Anything Goes

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

• sample.html
• sample0.css
• sample1.css

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.