1. Create a folder on your computer named Project4. Download the file Tut04.htm and save as project4solution.htm in your Project4 folder. Download the image file bullet.gif and save in the folder as well.
2. Open the project4solution.htm file in a simple text editor such as Notepad.
3. Open another instance of Notepad and create a file named project4style.css and save this file in the Project4 folder. Add HTML code to the style sheet according to the specifications below:
a. Insert a CSS comment at the top of the document that contains your name and Project 4 Style Sheet.
b. Apply a style to h1 headings that sets the color to #CC3300 and centers them horizontally.
c. Apply a style to h2 headings that sets the color to #333333.
d. Using a contextual selector, change the color of italic text contained in h4 headings to gold.
e. Apply the following styles to all links:
a text-decoration: none color: red font-weight: bold
f. Apply the following styles to the body of the document:
body background-color: #999999 font-family: Verdana, Arial, sans-serif margin: 30px
g. Set the styles for
tags so that the line-height is 1.5, the text is centered vertically in the line, and change the bullet style to the bullet.gif file.
h. Apply a link rollover to all links to create a hover effect that turns the text white with a red background.
i. Apply a style to the class studytip that will change the format of the first line of text to 18pt underlined small caps of the color #660000. (Hint: Use the pseudo-element first-line).
j. Add a callout note to the Web page by setting the following styles for the class notice:
.notice position: relative left: 20px top: 10px font-size: 10pt color: brown background-color: ivory border: 3px inset #CC3300 width: 230px
k. Add a contextual selector to set the p tag inside the class notice to a margin of 15px.
4. Add the code in the
section of the page that will link your CSS file to the project4solution.htm file.
5. View your HTML file in a browser and correct any errors.
6. Print a copy of the code for both files and a copy of the page displayed in a browser.