CSci 1001 Lab 2

Experimenting with CSS

In this lab you will test CSS features by creating a CSS file for the page we have been working with in class.

Open this page in a separate tab, press Ctrl-U to view source.
Start jEdit or another paintext editor. Copy the source of the page into a new file, save it with an extension .html
Change the line
```
<link rel="stylesheet" type="text/css" href="first_style_classes.css" />
```
in the head of the document to use a CSS file lab2.css instead of first_style_classes.css.
Go to File -> New menu in jEdit and create a lab2.css file in the same directory (folder) where your web page is.
Add the following to your CSS file, saving it and reloading the page in the browser after every change:
1. Set the text color and the background color of the entire page by setting properties of body tag in the CSS file (see the example given in class). You might want to look up color values here.
  Save the CSS file, reload the page, and make sure that the colors appear. Also upload your CSS file to the CSS validator to make sure that it is correct. Repeat these steps with every addition to the CSS file.
2. Set a different color for the header and one other tag in your page in one CSS declaration. For instance, if you are setting a property for h1 and em, you write h1, em in CSS and then set the property.
3. Set a border property for an image. Border properties are listed here. Try a different style than the one given in the in-class example (for instance, a dashed border instead of a double one).
4. Try applying a border property to other elements, such as a paragraph or a header.
5. Set font properties for one of the tags. Set font family, font size, and one more property. You can look up font properties here.
6. Set list numbering or bullet point style for one of the lists in the page. Consult this page for ideas.
7. Set a property of a class in the page. You can use the classes or an id that are already defined there (some classes are odd, even, upper, the id is footer) or define your own.
8. Experiment with CSS by adding two more settings for any element or elements in the page. Please write (in comments or in your email) what you tried and how it worked. Recall that CSS comments are
```
/* comment text */
```
Don't forget to reload and revalidate after every change. Remember to separate CSS properties in the same group with semicolons. Also, if you add or change classes and id, check that your html is still valid using the HTML validator.

Don't try to make your page visually appealing, just experiment with CSS settings.

At the end of the lab

Send your HTML and CSS files and all the images that you downloaded by e-mail to me elenam at morris.umn.edu and to your partner if you worked with another person. Please use the subject "CSci 1001 Lab 2". If your lab is not finished, the subject should be "CSci 1001 Lab 2 (Unfinished)".
If you are not finished with all tasks, you may continue working on the lab. In this case please submit it together with the problem set.

This page is a part of CSci 1001 course web site.