Lab Exercise 3: Add CSS styles to a web page

Due at the end of class session.

Get started

For this lab, begin by making a copy of the official sample solution to the Lab 2 exercise page. (Save from the file menu or view the source code and copy and paste into the editor.)
- Alert! If you save through the file menu, use Firefox and select "Web Page: HTML only" for the "save as type" option. DO NOT USE INTERNET EXPLORER - IT CHANGES THE SOURCE CODE.
- You may change the name to something shorter if you wish. However, Do NOT use spaces in the file name.
Edit the "Page author" and "Last updated" lines at the end to insert your own name and today's date.
Do NOT make any other changes to the HTML or content.

Your task is to add style rules to the document. The result should be approximately like the one shown in this screenshot of a finished page.
The <style> section has already been provided in the <head> section. Just add the rules.
You should
- Provide styles for the body.
- Style headings, paragraphs, and other elements where they need to differ from the body, including font-family, colors, width, margins, etc.
- Create the indentation using left margin settings for the paragraphs.
The exact appearance of the colors and fonts depends on monitor settings and other factors. You do not need to use the exact same colors, but you should demonstrate that you can specify colors for the different parts of a document, as illustrated. If you want to check some color values, you can find a color chart at http://lynda.com/value.html. (The four color values used in the sample were #ffffcc, #ff0033, #ffccaa, and teal.)
As you work, save your changes and refresh the view in the browser to see the effect.

The colored squares are the original horizontal rules with height, width, and background color styled.
Notice that there are two different fonts--a serif one for the headings and a sans-serif one for all of the other text.
You can use style rules to change the presentation of any element. For example, em is usually italic font-style and normal font-weight, but you can change it to be normal font-style and bold font-weight.
Remember - you are to use my sample solution to lab 1 and you should not change the HTML, only add the style rules.

Comments to: dong@hood.edu

Last Modified: 07 July 2015. 13:23