HW03: CSS Selectors due Tue 19 Sep 13:20


This assignment continues the use of CSS selectors provided in an external document. Finally, you will use a validating parser to check your code.

Part 1

This assignment continues the work started on lab day. Continue to refer to the diagram provided in


As with lab day instructions this diagram serves to provide the big-picture structure of the assignment while the instructions below contain the specifics. All CSS commands should be placed in the external document (i.e., do not use any inline CSS). Make the following changes to your HTML document started in lab day:

  1. (3 pts) Provide a logo or image in the left panel of the header. The image should be sized appropriately.
  2. (1 pt) Give a title to the page in an h1 in the center header panel. Title should be something about poems. Apply a CSS border of your choosing to the h1 tag.
  3. (2 pts) Put some contact info as an unordered list (ul) in the right header panel. Give your name a different color/look than the rest of the entries.
  4. (2 pts) Modify your menu to remove the underlining of the links and be sure to specify a hover option so the links should change color when hovered over with a mouse.
  5. (2 pts) In the aside add haiku of your choosing. Be sure to include title, author, and use proper formatting.
  6. (2 pts) Customize the content and look of the footer which will identify you as the brilliant builder of the page.
  7. Set the max width of the page to 960px instead of 800px. Also set the min width to 400px.
  8. (6 pts) Add media queries to provide at least two breakpoints in the page so that the page looks nicely formatted for various screen sizes all the way down to a typical phone screen. Feel free to consult responsivelayout.jpg for one idea of layouts for various screen sizes.
  9. (2 pts) Once you have the page looking the way you want. Take a moment to check the validity of your code by running it through the W3C Markup Validation Service: https://validator.w3.org/. Make whatever changes are recommended until there are no errors. NOTE: Warnings and Info messages are okay.

Part 2

We are going to start organizing your personal site a bit. Inside the hw03 directory create a folder called mysite. Within mysite create subfolders called images and css. The HTML files for your project should be in mysite. The images for your site should be in mysite/images and all CSS documents needed by your site should be found in mysite/css. Go ahead and get all the files for your site set up according to this plan.

Next, modify your site so that all CSS commands are issued in an external CSS document found in the mysite/css directory. When you finish with this transformation there should be no inline CSS commands and no style section at the top of the HTML code and the site should look just as it used to.

NOTE: You do NOT need to create media queries to handle mobile layouts on your personal site as part of this assignment.


All work should be committed and pushed before the due date. Your homework will be graded as follows:

Part 1 20 pts
Part 2 10 pts
Total 30 pts

As always, have fun!