Lab 11

This assignment is developed by John and is intended to be done during your regularly scheduled lab section.

The purpose is to give you experience deconstructing someone else's CSS. You will need to use skills similar to those that were demonstrated in lecture on Tuesday, April 7th. Deconstructing an existing CSS file is a good way to further your own knowledge of CSS.

Assignment

Take a look at the following CSS Zen Garden web page, the underlying CSS and the underlying HTML. Then answer the following questions in a file that can be e-mailed to Sindhu by the end of the lab period.

1. At the top of the Zen Garden web page is this picture. Give the exact location on the web (the URL) where this picture is located for the Zen Garden.
2. Consider the phrase on the page, Littering a dark and dreary road. List all of the html tags that could potentially apply to the style of this phrase. The tags should be listed from the one that has the most direct influence on the style (list this first) to the one that has the least direct influence on the style (list this last). (If an html tag has a class or id associated with it, include this information.) Hint: the answer will have 7 tags.
3. For the Littering phrase, identify the entire selector {property: value;} structure that leads to this text being white in color.
4. What is the exact hexadecimal value of the purple color that is in the background of the Littering phrase?
5. For the Littering phrase, list the four typefaces that will be used, from most preferred to least preferred.
6. In the same paragraph as the Littering phrase, notice what happens when you place your cursor above DOMs. Identify the CSS property: value pair and the HTML tag that make this possible.
7. Notice the html file link above the Littering phrase. Identify the entire selector {property: value;} structure that leads to the text turning white and being underlined when a cursor is placed above it.
8. For the html file link, identify the entire selector {property: value;} structure that leads to the text being purple, the background being orange, and no line appearing under the link when the cursor is not above the text.
9. Explain why the list in the SELECT A DESIGN: section has white balls for bullets, but the lists in the ARCHIVES: and RESOURCES: sections have yellow balls.
10. In the CSS file, the html selector has a property named font that starts out with the values 11px/16px. What does 11px/16px mean?

Grading - 10 points

If the answer to a question is fully correct, you will receive 1 point. Otherwise, you will receive 0 points for that question.

Partners

You are required to work with one partner on this assignment.

Submission

To receive credit, e-mail your answers to Sindhu at sindhupriya.karanam@cs.montana.edu before your lab period ends. In the subject of your e-mail, write Web Design Lab 11, your name, your partner's name.

If Time Remains

Spend any remaining time of your lab period working on the draft of your website that is due next Wednesday. If you have questions or want feedback, feel free to ask one of the lab assistants.