Lab 4 - History with styles
|
Lab 4 objective
|
|
In this assignment, you will modify your lab 3, to add more styles.
|
Build your web page
|
|
Make a copy of your lab3.html page.
Name it lab4.html
Modify your lab4.html page by making the following changes and additions.
In lab 3, you made the background of one paragraph a very light sky blue,
with a dark maroon text color.
Move the style rules from this paragraph into the style container in the head
by doing the following steps:
- Give this paragraph an
id attribute. You might call it sky.
-
Within the style container, in the head container, create a selector for your sky id.
This is similar to what I did with the id selector
for george in my example.
-
Move the background-color and color properties from the paragraph to your new selector,
up in the style container in the head.
Be sure to use braces {} around them, as I did in my george example.
Put both rules within one set of braces.
- Now there is nothing in the style property in the p tag, so you can remove this style property.
Use tags within your html page to accomplish these items.
-
Add a fourth paragraph, containing a short quotation.
A quotation by your historical person, or a quote by some historical person
about your historical topic, would be best.
If you cannot find anything else, use a short amount of text from one of your source web sites.
Make it clear who said, or wrote, the quotation, and where the material can be found.
-
Add a fifth paragraph, containing a long quotation related to your topic.
A length of at least a three lines and not over twenty lines would be good.
Give the author of the quote, and where the material can be found.
In the style container in the head, create style rules for your long quotation.
- Give the long quotation container an id.
- Build a selector for this id in the style container in the head.
-
Provide style rules with this selector to create a solid border that is 8 pixels and a dark color,
but not black.
- Also with this selector, add a style rule for 16 pixels padding, but do not specify a margin.
Be sure to provide links between your index page and your lab4 page.
|
|
|