COMP 127 Labs
2 Styling

Lab 2 - Style your homepage with CSS

Task

Create a file named index-style.css to improve the appearance of your personal homepage, please place this into a new folder called lab2 within your repo. Make sure that you also copy your existing index.html into the lab2 folder. You will be working exclusively from the lab2 folder this lab. Make sure you do not make any changes to lab1.

Requirements

Your stylesheet should do the following without any modification to your HTML code except that you still need to use the link element to add CSS info to your web page:

  • Change the color of at least two elements
  • Change the font properties (such as family, size, weight, and style) of at least two elements. Here are some standard fonts you may want to use: Arial, Arial Black, Verdana, Trebuchet MS, Georgia, Tahoma, Courier New, Times New Roman
  • Change at least one other thing of your choice such as background color, text alignment, etc.

Validate your HTML and CSS code to make sure they meet the official W3C specifications:

  1. Open W3 Validator (opens in a new tab) (for HTML) or W3 CSS Validator (opens in a new tab)
  2. Click Browse in the Validate by File Upload section
  3. Locate the local file and click Open
  4. Click Check
  5. If there are any errors, fix the first one, then repeat steps 1 through 4.

The key thing is to get the green bar saying that your page is valid. If you see any yellow warnings about being tentatively valid, this is okay. Red errors are not okay.

If your HTML and CSS code has many errors that you feel unsure about how to fix, please review this handy guide from W3C about common validation errors (opens in a new tab)

There are lots of HTML errors that you may come across that you may be unfamiliar with. Do not get discouraged, utilize the link above for any additional assistance that you may need.

Upload your index-style.css into a new folder named lab2 and along with a copy of your index.html from lab1 make sure your styled homepage is viewable by others using a web browser. Make sure the web link of your home page is listed on your wiki page.

Please submit the link to your personal homepage and a list of changes you made to your homepage through index-style.css.

1 Homepage3 Design Layout