me Banner
HOME AUTO FUN GADGETS MOTORCYCLE PERSONAL RACING SEARCH TECH TOOLS TRAVEL LINKS
HARDWARE CISCO LINUX MICROSOFT C++ HTML JAVASCRIPT PERL SHELL SCRIPTING SQL NOTES

CSS Projects

Once upon a time I took a CSS class and these are a couple of my homework assignments. The idea was that we could not edit the .htm file except to add the link th the .css file. The "BEFORE" link shows the original file, the "AFTER" link shows it with the css modifications and the last link is to the actual .css file.

Project 2
An excercise to use a variety of css tags and colors. Color patterns from http://colorblender.com/, http://www.interactive-earth.com/color/color_harmonizer.htm and http://colorschemedesigner.com/.

[BEFORE] [AFTER] [project2.css]

Project 3
Excercise using a variety of tags and colors.

[BEFORE] [AFTER] [project3.css]

Project 4
Here is a list of all the styles added to the CSS file:

  1. page background image
  2. "wrapper" div horizontally centered within page (showing background image equally on each side)
  3. background image on "banner" div, with appropriately contrasting color for "banner" text
  4. horizontal "mainNav" navigation bar with the following features:
    1. different styles for different link states (link, visited, and hover)
    2. link styles should include, at minimum, borders, background colors, and text colors
  5. different styles on links within "mainContent" div
  6. graphic bullets on the unordered list within "mainContent" div
  7. any "fixes" necessary for IE
  8. add a generous sprinkling of previously learned CSS properties to make the page attractive and interesting

[BEFORE] [AFTER] [project4.css]

Project 6
The basic design you want to achieve is a 3-column layout using a fixed-width float method.

  1. The banner should be at the very top and stretch across all three columns
  2. Under the banner should be three columns (you decide their appropriate widths):
    1. left column contains both the site navigation and the useful links
    2. middle column contains the main content ("Jan's Notes")
    3. right column contains the "Have You Seen This?" items
  3. The footer should be at the very bottom and stretch across all three columns
Create a separate print style sheet for your project 6 page that includes:
  1. Link to the print CSS appropriately from the HTML file.
  2. The left column should not print.
  3. The right column should print, and any links in that column should have the URL appear in parentheses after the link. This must be accomplished with CSS, not in the HTML code!
  4. Find some little image that does not appear on the Web page when displayed in the browser, but that will show up when the page is printed. Place it somewhere in the banner.
  5. Follow any other "best practices" for print style sheets mentioned in Chapter 13.

[BEFORE] [AFTER] [project6.css] project6_print.css]

All .htm and .css files validated by http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/