CSS

1. Your job is to style some XHTML documents using css. First, download and install CSSLab.zip in your public_html directory. Think about styling the footer in an interesting way as well.
2. The following references are useful:
   • css lecture notes
   • CSS properties at W3 Schools
   • See New Elements in HTML5 or HTML5 Doctor where you can look up some of the newer semantic tags, ie nav, header, footer.
3. Take home.html, courses.html, news.html and style.css and make them look like the screen shots below by moving the properties in style.css to the appropriate rules. Here are the steps to carry out...
   • Identify the Navigation bar and main content and moved them to their respective positions. Note:Absolute is with respect to some frame of reference. The body is the declared outer frame of reference (position:relative).
     
   • I want the navigation to appear vertically, so I display as a block. I also style the block. A block takes up the full width of its container. Each link is contained in the 'links division' (or nav element if using semantic tags).
     
   • Hovering over a menu item should change its color.
     
   • Some additional styling for the content.
     

   Final screen shots

   
4. See if you can cause the navigation (Home/Courses/News) for the current page to appear differently. Remember, all pages share the same style.css. Hint: Define a class or id and style it. Ideas include, just change the text and background color. Change the size of the box for the page you are on (kind of like the dock in OSX).
5. For a challenge, lookup css media queries and make it responsive.

   For example, when the window becomes narrow, move the navigation to the top, above the section. Hint: Specify width in em units, not in terms of pixels.