Assignment Description

Cascading Style Sheets (CSS) are used to provide style, presentation, and layout for the HTML content of a Web page. You will develop an external CSS to provide style, presentation, and layout to an HTML document. Click HERE to download a Project containing HTML and images which will be used as the foundation to build your CSS upon. Complete the following for this assignment:

1. Download the above file, save it on your computer and extract the contents.
2. Locate the folder "ITCO381_IP2_Starter" (depending on how you extracted the ZIP there may be two folders with this name. Open the first one so that you can see the second one, then continue to the next step. If theres only one folder, select it and continue to the next step).
3. In the folder, create a new text document, then rename it to "styles.css" (note that .css replaces the .txt on the end; a confirmation dialog box may appear).
4. Edit Unit2.htm and styles.css in Notepad++.
5. In Unit2.htm use the link HTML tag to connect the CSS file to the HTML file.
6. Your HTML page will need to have the link to the CSS file added and the below updated:
   • Required: Title: Add your name and IP2
   • Required: Headings: Your name in the H1, University name in H2, and courses in H3
   • Required: Paragraphs: Please describe details about the courses that you are taking at the university.
   • Optional - Link: Include links to your favorite websites.
   • Optional - Images: You may update the header image to include a selfie/profile picture and the image in the body to reflect a picture relevant to your courses
7. Add style rules in the CSS file to accomplish the following:
   • Set the width of the page to 700px
   • Use the font family starting with Verdana
   • Set the width of the header image to 200px
   • Float the header image to the right
   • Add a margin of 10px to the header image
   • Change the color and font of the header text
   • Add a border and background color of your choice to the header
   • Ensure the contents of the section does not float into the header
   • Center all headings
   • Ensure paragraph text is not centered
   • Set the width of the paragraph image to 175px
   • Float the paragraph image(s) to the left
   • Add a margin of 10px to the paragraph image
   • Set the nav links to text-decoration:none and change the color
   • Set the nav links to change to a color of your choice when hovered or focus or active
   • Align the footer text to the right
   • Set the footer text to 80% size
8. Validate the CSS style rules.
9. Validate the HTML document, and make sure the CSS updates are showing.
10. Zip (compress) the folder and output screenshots into a .zip file to submit them. Ensure HTML, CSS, and all screenshot images are included.