Lab 2 : Coding With Style

Lab Overview

Use CSS to style your webpage creation.
Using CSS in an "unusual" way to create effects.

The purpose of this lab is to let you officially try out CSS rules for your webpage. First, read the CSS Tutorial. If any part of that is unclear, you can also see the W3 Schools Tutorial for a different approach. While you're using that you can use any text editor (including Eclipse) to write your code.

Starting With CSS

In lecture 3 we saw some an example webpage taken from plain HTML to a nice presentation allowed by CSS. Now it's time to play around and see what you can create. Exactly what you create is up to you. You can build on the webpage from Lab 1 or you can create something entirely different. There are no restrictions or requirements on what HTML content you include. However, you will need to include enough to satisfy all of the 5 CSS requirements given below. Include at least one of each:

Change the default text color in some HTML element.
Change the default background color or set a background image for some HTML element.
Modify the margin, padding, and border of some HTML element.
Change the default font family of some HTML element.
Have different presentations for at least two instances of the same HTML element type. (Example: one instance of the <p> element with red text and another instance of the <p> element with blue text.)

Note that the last requirement is intended to make you put in "conflicting" rules so you can see which rule gets precedence. Remember that you can target instances of an HTML element not just with the tag name, but also with what other elements it is contained within or by using a class or id attribute to distinguish it.

A Step Further Down the Road

The requirements above are most of the presentational changes that we saw in Lecture 3. For one extra trick, choose one of the options below to add to your webpage.

A Multi-Column Layout: In class the <div> HTML element was mentioned as a way to group other elements together. Using that technique, we can group HTML content into two or more <div> 's that can form columns in our webpage. The simplest way to do this would be to set the float property of all the <div> elements to the left (or right, if you prefer). Here's an example page that uses the div technique, and here's the code that made it.; Another would be to set the display property to the value absolute. Then fix the width of one column with the width property and position the second column <div> with the margin property or one of the top, left, bottom, or right properties.; If you choose this option, just have your page layed out in 2 or more columns. You can achieve this with either the float or absolute position methods described above or any other method you can come up with. Just get your website to present 2 or more columns when using the Firefox or Safari browsers.
Hidden Treasure: One trick that provides a lot of functionality is using the display property and the hover property together. First, have one element nested inside another. A common example would be when you have a <li> element inside of a <ul> element which happens every time you make an unordered list. Now, try setting the inner element's display property to the value none. It completely disappears from your page as if it never existed.; You can bring it back by setting it's display property to a value like block or inline when the mouse overs over the outer element that contains it. Here's an example page and the code that made it. In this example I'm using a list nested within a list. Note that this trick will not work in Microsoft Internet Explorer. IE only recognizes the hover pseudoclass for the <a> tag.; To complete this requirement option just have some element that is initially invisible but later becomes visible when you hover over some visible element in your page. If you use the hover pseudo-class with anything other than the <a> element, then just get this to work in Firefox or Safari and don't worry about how to get it to function in IE for now.
Position Has Been Fixed: Instead of letting the position property be relative or absolute one other option is the value fixed. This works just like the absolute value... until you start scrolling your page. The absolute value by default positions the HTML element relative to the enclosing <body> element. The fixed value positions the element relative to the web browser's window. So while the rest of the content will move when the page scrolls, any element with the position property set to fixed will stay in the same place in the browser window.; If you choose this option, just have some element that stays fixed within the browser window. Since this option may be a little less involved than the other two, try being creative in what elements you have fixed and what elements you let scroll with the page.