Exercise 3

The goal of this exercise is to practice using CSS selectors and text properties.

Due Date and Time

Exercise 3 is due by 5:59pm on January 31st, 2019. I will disable submission at the start of class

Instructions

Setup

  1. Download the exercise files from the Box Folder named CS0134-E3-<username> that I shared with you.
  2. Unzip and copy the ‘CS0134-E3-<username>’ folder onto your flash drive.
  3. Open index.html in Notepad++.
  4. Open style.css in Notepad++.

Goals

Each goal is worth 1 point. For CSS, I will give you the property and leave the selector up to you unless otherwise noted.

Do not edit index.html beyond the link goal below

Place all style rules in the style.css file

  • Link style.css to index.html using the link element
  • Use the font-family property to set the body font for the website to a sans-serif font
  • Use the font-size property to change the size of the headings on the page to make “CS0134 Pet Shop” larger than any other heading
  • Use the font-variant property to make “CS0134 Pet Shop” display as small caps
  • Use the color property to make “CS0134 Pet Shop” brown
  • Use the text-shadow property to add a gray shadow to “CS0134 Pet Shop”
  • Use the ::first-letter pseudo-element and the font-size property to make the first letter of “Looking for a pet?” larger than the rest of the heading
  • Use the :hover and :focus pseudo-classes and the text-decoration property to make the links have no underline if they are focused on or hovered over
  • Center align “© CS0134 Pet Shop”
  • Validate index.html with https://validator.w3.org/ and style.css with https://jigsaw.w3.org/css-validator/.

Results

Your site should look similar to the following, your colors and sizes can vary as long as they meet the goals above.

index.html after Exercise 3

How to Submit Your Work

Upload your index.html and style.css files to the ‘CS0134-E3-<username>’ Box folder.

I highly recommend that each time you work on this or any other exercise, that you upload your files to Box even if you are not done with the exercise. In this way, if something happens before the submission deadline that keeps you from uploading the finished exercise, there is still something to be graded.