Ch. 3 Project - Add CSS to NVHS Scholarship page

Hello everyone. Here are the directions:

1. Get a copy of the CSS handout from Mr. West. You'll use the properties listed in the handout to style the scholarship page.
2. Create a new folder in your Project folder called Chapter 3.
3. Copy the contents of your Chapter 2 Project folder into Chapter 3. (Copy all the files created for the NVHS scholarship project and pasted in your new chapter 3 folder).
4. Create a new folder inside Chapter 3 called CSS.
5. Create a new file using Notepad ++. Save the file as, "scholarshipstyle.css" inside the CSS folder.
6. Open the scholarship web page in Notepad ++ for editing.
7. Add the external CSS link tag in the head section of the scholarship web page.
8. Test that the external style sheet is properly "communicating" with the scholarship page by changing the link color, font type,font size, and hover effect. Add the following to the scholarshipstyle.css:

a{font-family: chiller;
font-size: 10pt;
color: red;
}
a:hover{background-color: yellow;}

9.Save your .css file. Open the scholarship page in a browser. Confirm that your links have changed. If the changes don't show, make sure your link rel tag is correct (especially the pathing) and that there are no typos in the .css file.

10. Create various IDs and Classes using font, color, and background properties. Use the following external style coding for generating your own ids and classes.

classes examples:
.westone{
font-family: jokerman;
font-size: 100pt;
color: orange;
font-weight: bolder;
}
.westtwo{
font-family: earwig factory;
font-size: xx-small;
color: gray;
font-weight: bolder;
}

id example
#westone{
font-family: comic sans;
font-size: 35pt;
color: green;
font-weight: bolder;
}

11. Apply the IDs and classes to various tags inside the scholarship coding, not sure what tags to apply it to? Use paragraph, H1, and link tags. Applying the same ID (ex: #west1) to multiple tags will help you. Use a wide range of fonts.

Applying a class attribute to an existing paragraph tag example: p class="westone"

12. Open the web page in a browser to see the applied styles.

13. Apply a background property to the page.

14. Print the code and browser.