- Download the html page shown here. Have a look
at the code (disregard the javascript between body and head). Look at the
two div-elements. One has an ID named navigation, the other is a
class of type remark.
- Open Notepad and create a file that you call "Style.css". In
this file you would write all the formatting explained below. You should
only make one change in the HTML file: Open it, and insert the line
<LINK REL=StyleSheet HREF="Slides.css" Type="text/css"
Media="Screen" > inside the head.
- Start by formatting the whole sheet. Use the Body selector---then
everything would apply to the whole body. Define the properties
background-color, and a font-family.
- Next maybe you want to format the headings differently. Use font-family
again, font-weight, font-style, and
font-size. Experiment with color and
background-color.
- Also try line-height, letter-spacing,
text-transform, and font-variant for
some of the headings tags.
- Next format the paragraph tag and the blockquote tag with all of the
properties above.
- For the blockquote tag, try
margins,
border, and
padding with the
properties described there.
- Next format the "navigation" bar. Use margin, border, padding
again, use different font properties, and so on. But most important are the
following two properties: 1) Set the width to some value
(say 30%, or
200px). Have a look on it. It doesn't look good? 2) Set the float property
to left.
- Next please format the remark area. Assign again width and float: right
- Put in a head for the page (giving Franklin College, the semester, your
name). Use absolute positioning for placing this
and the title of the page and the navigation bar.
Project
Please do all these steps above and 10 additional features from the CSS
page. You may have to change the HTML text for this as well, for instance,
inserting a list, and so on. Also put in 3 features that are not covered in my
tutorial, but what you find on any additional CSS tutorial found on the web.
Please tell me briefly, as a comment in your CSS file, what these additional 10
features and the additional 3 features are. The page should also look
"good" at the end.
The project is due on Friday, October 13.
