Use of CSS for website development

Client: Orinoco Chocolate

Goal is to Create:

The goal of this first exercise is to have a page that looks like the following image:

Site content in content.txt

Development Instructions:

1. Site Basics
1. Content for the site:  content.txt
2. Images:  images directory
2. Basic Layout
1. Masthead - masthead
1. Company logo
2. Navigation
2. Content Area - content
3. Right side information - sidebar
1. Site search
2. News item
3. Archive calendar
4. Footer - footer

Implementation Steps:

Create a folder to store your work. Within this folder create two (2) directories: images, and styles. Place your HTML files in this folder and all images and styles in appropriate sub-directory.

Start an HTML page including the following data:

• Title of the page must be: Orinoco Chocolate: History of Cocoa
• Link to an external stylesheet named ex0001.css in a styles directory
• Create four (4) div tags in the body with the following ID names: masthead, content, sidebar, and footer
• In each of the div tags insert an image tag with spacer.gif having the class 'spacer'

Start the ex0001.css file and place in the file the appropriate style commands to create the following elements:

General Style Definitions

body tag

• margin : 0
• padding : 0
• background : #EEBB88
• color : #333333
• font : small "Lucida Grande", Arial, sans-serif

anchor tag - no underline

images in anchor tags have no border

paragraphs have magrins of 0 0 1em

Masthead Style Definitions

masthead id should have bottom margin of 1.75em and a top padding of 1 pixel

Images inside of masthead having the spacer class:

• 100% wide and 100 pixels high with background color of #446699
• a solid border of 1 pixel in color #555555

Footer Style Definitions

Content Style Definitions

content id should float left with padding of 0 20em 2em 3em

Images inside of content having the spacer class:

• 100% wide and 400 pixels high
• a solid border of 1 pixel in color #555555

Sidebar Style Definitions

sidebar id should be 17 em wide, float left with margin of 0 0 2em -18em

Images inside of sidebar having the spacer class:

• 100% wide and 400 pixels high with background color of #446699
• a solid border of 1 pixel in color #555555

Footer Style Definitions

footer id should clear : both

Images inside of footer having the spacer class:

• 100% wide and 50 pixels high with background color of #996633
• a solid border of 1 pixel in color #555555

The resulting page should be very similar to the following image:

Make sure you show your result and code to the instructor to receive credit for this assignment.

The next step: add content (CSS_Exercise_2.html)