CSS Exercise

  1. Your job is to style some HTML documents using css. First, download and install CSSLab.zip in your www directory.
  2. The following references are useful:
  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...

    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. If there is still, make it responsive using css media query.

    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.