CSS exercise two.

COMM 260, Principles of Internet Web-Based Design
Instructor: Ross Collins

CSS exercise two

You would like to set up a home page using css. You want a menu bar running down the left side of the page. You want room for pictures and text on the right. Set up an HTML page, and make specifications as indicated.

I. Links and pseudo-classes.

In the <head> section, set up your css. First, you'd like to spiff up your links with a color for active link (alink), visited link (vlink), and mouseover. Within a <style> tag pair, (see exercise one for sample code) copy and paste this code:

a:link
{color: midnightblue;}

a:visited
{color: #FFFFFF;}

a:hover
{color: peachpuff;}

a:active
{color: #0000FF;}

Note: We've already talked about css classes, that is, attributes (properties) and values you define for certain kinds of tags (selectors). For instance, p.general could be a class for normal black text, and p.special, a class for text emphasized in red. (Syntax note: no space between selector such as p, the dot, and the name you give to the class.) A pseudo-class is a special class already set up by the people who wrote the css, to add some handy design elements, such as attributes for links. Note in the code above that first the link is listed, then v-link, then mouseover (hover), then active link (as you're clicking on it). This list must be set up in this order, and must be first of your css style rules. After that, though, unlike regular classes, you don't have to specify these pseudo-classes for each link. It works automatically, way cool.

II. Div classes.

Next you want to set up your web page so that a menu bar appears at left in one color, and a block for other elements at right, in another color. Copy and paste this code:

div.menubar
{position: absolute; background-color: plum; top: 0; left: 0; width: 100px; height: 75%; padding-left: 6px; padding-right: 4px; padding-top: 6px; font-family: verdana, sans-serif; color: midnightblue; font-size: 10px;
}

div.maintext
{position: absolute; background-color: peachpuff; top: 0; left: 110px; height: 75%; width: 75%; font-size: 8pt; padding-left: 10px;
}

Note: The <div> tag sets up a block. You are positioning the menu bar block:

at top left;
100 pixels wide (syntax note: no space between number and px, meaning pixels);
height 75 percent of the browser window;
padding on left and right so text doesn't touch edges of block;
verdana font, a common sans-serif font designed for the web.

The second div class sets up the main block as indicated, 110 pixels to the right of your menu bar block. Try changing some of these values, see what happens to your page.

To quickly see how your page will look in a browser, use the keystroke Save command (Apple + s or Command +s), click on your browser icon, and click on the Refresh or Reload icon.

III. Relative class for image.

You want to position a photo roughly in the middle of the second box. Copy and paste this code:

img.relative
{position: relative; left: 10%; padding-top: 12px;
}

Note: This sets up your photo relative to the text, with space ("padding") at the top and on the left. Experiment with this by changing the position to absolute, or adding the <p> tag pair to the text, see what changes.

More on positioning:
If you simply put elements on a page, the static HTML default is to stack elements against the left side, one after the other. This generally gets pretty bland and ugly after a while. HTML tables offer a (convoluted) way to avoid this. But css offers more. In css you can either "float" or "position" your elements. No more HTML tables!

Css allows you to set up a position no matter what the size of the browser window. For instance, you want a picture a half inch from the left side, no matter how big the browser window is. In css, you just use a selector. You can make elements relative to others (will move around), absolute (will not move) or fixed (will not move even if you scroll down the page). We just touch the surface of this topic. For more information on css positioning, a critical concept in web design, see the W3 consortium tutorial, or other information on the web or in textbooks.

IV. The HTML page.

Now close your head tags, and begin your content:
</style>
</head>
<body>

Copy the code below. Change the wording in the content, and add a link, so that you don't just copy and paste all my code. Here's the cat photo for you to download.

<div class="menubar"> Some webmasters like to run menu bars down the left side of a home page.<br><br>
<a href="http://www.ndsu.edu/communication/collins/resources.htm">Class web site</a><br><br>
<a href="http://www.w3.org">W3 Consortium</a>
</div>
<div class="maintext">

This is Al's cat, Perry.

What will it look like? It oughta' look something like this. Mouse over your links to see if the pseudo-class works.