CSci 1001 Problem set 2

CSci 1001 Problem set 2. Due Tuesday, Oct. 1st.

Problem 1 (15 points)

Create CSS formatting for a page about yourself (use the one that you created for problem set 1 or modify it). Specifically, your CSS should satisfy the following requirements:

Use an external CSS file, do not use the style attributes or embedded CSS
Set a background color or an image for your page
Set the text properties (font, color) for the page
Set at least one property of a header
Set the border property of an image or a table
Make links show up differently when the have been visited or when the mouse moves over them.
Set a property for at least one group of tags (separated by commas)
Set a property for at least one tag that appears nested within another tag. You must specify the nesting of tags in your CSS file.
Format a class of tags or an id on a page. If you are formatting a class, make sure that there are at least two different types of tags in it.

Your page will be graded based on correctness of HTML/CSS (make sure it validates as both HTML and CSS) and on the appearance: colors and fonts should go well together and with the images, make sure that the text is easy to read, i.e. it's not too small and has enough contrast with the background, links should go well with the rest of the page and it should be clear which portions of the page are clickable.

Problem 1 (10 points): Using CSS classes and id

Copy/paste this HTML code into a file problemset2.html:


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
A web page to format.
</title>

<link rel="stylesheet" type="text/css" href="problemset2.css" />
</head>
<body>

<div id="menu">
<ul>
<li><a href="http://www.weather.com/">weather.com</a></li> 

<li><a href="http://www.morris.umn.edu/index.php">UMM web
page</a></li> 
<li><a href="http://www.m-w.com/">Merriam-Webster Online
Dictionary</a></li> 
</ul>
</div>

<h1 class="class1">This is the first heading.</h1>

<div class="class2">
First paragraph. Here is a link to <a
href="http://www.w3schools.com/css/default.asp">CSS Tutorial</a> at <a
href="http://www.w3schools.com/">W3 Schools</a>. 

</div>

<div class="class1">
Here is another paragraph. Here is what CSS tutorial says about
advantages of CSS: <cite>CSS is a breakthrough in Web design because
it allows developers to control the style and layout of multiple Web
pages all at once. </cite>
</div>

<h1 class="class2">This is the second heading.</h1>

<ul class="class1">
<li>The first list element</li>
<li>The second list element</li>
<li>The third list element</li>
</ul>

</body>
</html>

Open a new file problemset2.css. Write CSS styles to format the page so that elements in class1 and class2 look very different. You can experiment with fonts, colors, background color. Make sure that link colors (including visited links) go well with the colors of the text.

Also set formatting for the element in the beginning of the page that is marked with id menu. Make it look different from both classes.

Requirements:

At least two CSS properties (such as font, color, text width, border, etc.) must be set for each class and, separately, for the id.
The two lists must be formatted differently from each other.
The headers in each of the two classes must be formatted somewhat differently from other elements in the same class (for instance, they may be displayed in italics or in a different font).
Make sure your CSS file passes the validator.

How to submit

Send me all the files (including images) by e-mail.

CSci 1001 course web site.