CSci 1001 Lab 2
Experimenting with CSS
In this lab you will test CSS features by creating a CSS file for
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
- Change the line
in the head of the document to use a CSS file
<link rel="stylesheet" type="text/css" href="first_style_classes.css" />
Go to File -> New menu in jEdit and create a
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:
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.
- 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
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.
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
em, you write
in CSS and then set the property.
Set a border property for an image. Border properties are listed
a different style than the one given in the in-class example (for instance,
a dashed border instead of a double one).
Try applying a border property to other elements, such as a paragraph
or a header.
Set font properties for one of the tags. Set font family, font size,
and one more property. You can look up font properties
Set list numbering or bullet point style for one of the lists in the
page. Consult this
page for ideas.
- 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
even, upper, the id is
footer) or define your
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 try to make your page visually appealing, just experiment with
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
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
This page is a part of CSci 1001
course web site.
The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.