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:

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:

  1. At least two CSS properties (such as font, color, text width, border, etc.) must be set for each class and, separately, for the id.
  2. The two lists must be formatted differently from each other.
  3. 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).
  4. 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.

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.