This lab helps you to master CSS selectors. Put your work in a new folder called lab2 (no spaces, all lowercase), which you should create inside your cs1109 folder, which is inside your public_html folder.

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. Put your answers into a file called quiz.txt, which you should store in your lab2 folder. When you have completed all eight, call one of us over and we will correct your answers.

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

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

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

```
li {color: red;}
ul {color: blue;}
```
```
#menu {color: blue;}
ul {color: red;}
```

#menu {color: red;}
.food {color: blue;}

li {color: green;}
ul {color: red;}
body {color: blue;}

```
ul {color: red;}
body {color: blue;}
```

This week's work

(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 rainbow.html and save it in your lab2 folder. (Right-click the link and choose Save Link As….) It contains a couple of tags that we haven't covered but that should not be a problem in tackling this lab.

Important.

For this lab, you must not modify rainbow.html.
For this lab, you must use an up-to-date version of Chrome. Due to differences in the way browsers work, there is no guarantee that you will get the answer right if you use a different browser.

In your lab2 folder, create a CSS stylesheet, rainbow.css (no spaces, all lowercase) that, from the point of view of colours and background colours, causes rainbow.html to appear as it appears below.

The more elegant your stylesheet is, the better!

You only need to write rules that change color and background-color. The colours I have used are: black, white, red, purple, lime, blue, aqua, and yellow.

Deadline: 1pm, Tuesday 23rd October.

If you have named your files and folders correctly, your work will be collected automatically at that time by my software.

A screenshot of how rainbow.html should appear when this exercise is complete.

Challenge exercise

Challenge exercises are always optional. They do not form part of your year's work and they are not worth any marks. They are designed for those students who finish the main exercise quickly and easily, and wish to explore further.

This challenge is to find the shortest CSS stylesheet that can do the job. You can interpret short in one of two ways: fewest rules or fewest characters.

Place one rule per line. Do not put all rules onto a single line, as this is too unreadable for me.
Remove as many spaces as you can.
The main idea is to make it small by making clever use of inheritance, blocking of inheritance, and conflict.
But there may be some other ways you can find to cut the size too.

We'll make this a competition. If you think you've got a potential winner, before the submission deadline (above), create a subfolder of your lab2 folder, call it challenge, and put your short version of rainbow.css into it. The shortest may or may not win a prize. Judge's decision (my decision) is final.

CS1109 Lab 2

A preliminary exercise

This week's work

Challenge exercise