CS 1100: Web Development: Client-Side Coding

Homework 5: Using CSS for Style and Layout

Submission due Friday, October 4, by 11:59 PM

Instructions

The purpose of this assignment is to give you more practice with CSS, both styling elements and essential layout concepts. You won't write or even change any HTML for this one. Instead, you are given an HTML document and a screenshot of what it should look like after styling. Your task is to come up with CSS code so that the browser displays the HTML document in a way that matches the screenshot.

If you have any questions, or if something doesn't work as expected, please let me know.

Tasks

Set Up Your Files

  1. Download this zip file. You may need to control-click on the link and choose "Download Linked File".
  2. Unzip the file to create the hw05 folder. It contains the files for this assignment: an HTML file, an image used on that page, and an empty CSS file.
  3. Download this image file. (Again, you may need to control-click on the link and choose "Download Linked File".) It is a screenshot of the HTML file from the hw05 folder displayed in a browser.

Create a Style Sheet for the Website

Your main task is to write CSS rules for styles.css so that index.html matches the screenshot.

Do not modify the HTML file. It contains all of the tags and identifiers you need to target CSS rules at specific elements. If you think you need to modify the HTML, contact me.

Do read the HTML file. You will need to know the tags and identifier it uses in order to target your styling.

The following are notes and observations to help you match the screenshot. In most cases, each of these will result in one declaration within a rule for the selector.

Overall
  • The font is sans-serif. You may specify particular fonts, if you'd like, or use the browser default.
Top "Ribbon" Menu
  • The background color is #333333.
  • It spans the entire width of the screen.
  • The links are centered.
  • The links are displayed in a horizontal line.
  • The size of the font is 0.8em.
  • The whitespace between links is 3em. Hint: You'll want to divide this in half before assigning the value to the property, as each link contributes half of the margin.
  • The space between the links and the top and bottom of the ribbon is 0.5em.
  • The links are white.
  • The links are not underlined.
  • When the mouse hovers over a link, its color changes to yellow.
  • The ribbon is "fixed" to the top if the screen even as the user scrolls down the page.
    (We will learn how to fix an item in class next week.)
The Main Content Area

This area consists of the sidebar and page content.

  • The peach-like background color for the main content area is #f0d7be.
  • The space between these areas and the header, the browser window, and each other is 20 pixels.
  • The background of both areas is #e6e9f4.
  • Both areas have a 1 pixel, navy blue border and a border radius of 10 pixels.
  • The page content does not wrap around the sidebar.
  • The sidebar receives 20% of the window, and the page content receives 80%.
Page Content
  • The space between the content and the border is 30 pixels.
  • The color of the headings is #3f5d8f.
  • The font of the headings is bold.
  • The headings have a bottom margin of 1em.
  • The font size of the level-2 heading is 1.8em.
  • The font size of the level-3 headings is 1.2em.
  • The paragraphs have a bottom margin of 1em.
Image
  • The image is 400 pixels wide.
  • The image has a 1 pixel white border.
  • The figure that contains the image floats to the right, with the text flowing around it.
  • The figure's padding is 20 pixels on all sides.
  • The figure has left and bottom margins of 20 pixels.
  • The figure's background color is #6e86c1.
  • The figure's caption text is white.
  • The font size of the caption is 0.8em.

Validate your CSS

  1. Validate your CSS using the W3C CSS validator. This link allows you to upload your styles.css file by selecting it using a file selector.
  2. Fix any errors, then revalidate the file. Remember, you'll have to upload the updated file again each time.
  3. Repeat until you have no errors.

Submission

Submit your styles.css file using the course submission system.

  1. Log in to the submission system using your CatID username and password. The page will open in a new tab.
  2. Select CS 1100 from the course menu.
  3. Select hw05 from the assignment menu.
  4. Follow the instructions to upload the required file.
  5. Review the Uploading the following files page to be sure that your file was uploaded!

Remember: You may replace a file you have already submitted or submit a new file up to the deadline by using the system again.