CS1115/CS5002 Lab 4

This lab helps you to master CSS selectors.

A preliminary exercise

Consider the following fragment of HTML: 

<body>
    <ul id="menu">
        <li class="food">badger burgers</li>
        <li class="food">wombat waffles</li>
    </ul>
</body>

Without using your computer, work out the colour of the phrase "badger burgers" for each of the following stylesheets. Write your answers on a sheet of paper. When you have completed all 8, call one of us over and we will correct your answers.

  1.   
    .food {
    color: red;
}

.food {
    color: blue;
}
  2.   
    li {
    color: red;
}

.food {
    color: blue;
}
  3.   
    body ul li {
    color: red;
}

.food {
    color: blue;
}
  4.   
    li {
    color: red;
}

ul {
    color: blue;
}
  5.   
    #menu {
    color: blue;
}

ul {
    color: red;
}
  6.   
    #menu {
    color: red;
}

.food {
    color: blue;
}
  7.   
    li {
    color: green;
}

ul {
    color: red;
}

body {
    color: blue;
}
  8.   
    ul {
    color: red;
}

body {
    color: blue;
}

The main exercise

(My thanks go to the fine men and women of the National Weather Service Forecast Western Region Headquarters in Salt Lake City for their description of rainbows, which I have adapted for use in this worksheet.)

Download the following file to your public_html directory and fix its permissions:

Important. For this lab, you must not modify rainbow.html.

Use Kate to create a CSS stylesheet called rainbow.css in your public_html directory. (Fix its permissions.) Your goal is to write a stylesheet that makes rainbow.html appear like this:

The goal of this exercise
A screenshot of what we're aiming for

You only need to set the color and background-color properties. And the colours I have used are:

Your work will be checked by Derek Bridge some time after Friday 25th October.

Challenge exercise

Challenge exercises are always optional. They are designed for those students who finish the main exercise quickly and easily, and wish to explore further.

Download the following file to public_html:

challenge.html is basically identical to raninbow.html.

The challenge is to find the smallest stylesheet that can do the job. Put your stylesheet into a file called challenge.css in your public_html. As before, you must not edit the HTML.

Here's what I mean by shortest: the one with the fewest characters. But note that each rule in your stylesheet must start on a separate line. As a guide to how well you're doing: the shortest is well below 200 characters!

We'll make this a competition — a competiton with a big money prize. If you think you've got a potential winner, then email me your challenge.css as an attachment by Friday 25th October.