Your Portfolio Exercise

Your Portfolio

1. Create an external style sheet and save it as Portfolio.css in the Portstyles folder. An easy way to generate some basic css code in this new css file is to simply copy the code that you created in your style sheet for the procedures site and then make any changes to that code (i.e. background will need to be changed) that would be required through the application of the remaining instructions on this page.

2. Open index.html from the Portfolio folder and create a link to Portfolio.css in the appropriate place in your code using the appropriate type of html link (for a css file).

3. In the CSS file (Portfolio.css):

   • body - define a background color at your discretion

   • h1 - define color of the font and the size

   • p - define the font size

4. Even if you borrowed the CSS coding from you style sheet in procedures, you may need to conduct a bit of research to dig up some options for different CSS color codes, coding for different fonts, etc. Of course, the w3schools website is a great spot for stuff like this (as indicated with the hyperlink below). You can also refer to this quackit page for some help with CSS color options.

5. Save the changes to your CSS file and then preview your index page in a browser. Assuming that the link to your CSS file is properly included in the head tag of your index page, you should see the new colors and font properties. If all is good and you have seen the formatting changes resulting from your Portfolio.css file, link ALL the web pages you've created for your Portfolio site to Portfolio.css (this includes contact, education, and employment)! If you didn't see any formatting changes in index in the browser, you need to fix the CSS link in index.html to Portfolio.css before you copy and paste that link into your other three pages.

Need Help? As always, you can use www.3schools.com as a reference or refer back to the instructions in the procedures portion of this module.

Experiment and have fun.