Lab 4 - CSS and Presentation Fundamentals

Due: .
Categories:

  3 minute read  

CSS Basics

In this lab, you will use CSS to make a page look better. Specifically, you will create three CSS files that progressively add better aesthetics to a provided HTML file. These CSS files will be added incrementally to the HTML files to layer on improved spacing, colors & borders, and a customized navigation menu.

All code must validate cleanly (no errors or warnings) through the standard validation tools listed below. You must resolve all errors and warnings before submission. For individual CSS properties, please refer to the MDN reference list.

Starting Code

Start by extracting provided source code and opening the files in your preferred text editor:

You will only submit the CSS files, so you will not be able to make any changes to the HTML files. All visual changes must be controlled by CSS only. All CSS rules are based solely on elements, not ID or class.

Step 1: Spacing

Your first task is to define element rules to add spacing throughout the page. You'll also make heading elements use a sans-serif font instead of the default font. For this step, modify spaces.css to define rules that use only the following CSS properties (or variations, such as margin-top, padding-left, etc.):

  • font-family
  • margin
  • padding
  • vertical-align
  • width

Add rules for the <h1>, <h2>, <header>, <main>, <nav>, <p>, and <section> tags to create this layout. Your solution may have slight variations, but it must satisfy all the constraints in this annotated version. Unless specified otherwise, spacing should be in terms of the viewport height and width, with values at least 1% of the viewport dimension. (Note that you can use 0px to refer to any spacing that needs to be zero.)

In the rules for <main> and <nav>, add the rule display: inline-block;. (We will discuss this property next week.)

Step 2: Colors

Your next task is to define element rules to add borders and colors throughout the page. For this step, you will modify colors.css and you may only use the spacing rules from above and the following additional CSS properties and their variations:

  • background
  • border
  • color

Add rules for the <body>, <header>, and <section> tags to create this layout. As before, your solution may have some variation but you must satisfy all the constraints in this annotated version. The borders specified must be at least 2 pixels wide. Note that the curved corners are created by using the border-radius property.

This step also links to the spaces.css to reuse the spacing values from the previous step. You will also need to set body margins in colors.css to make sure that the header covers the full width and top of the page.

In this and the next step, you will need to use combinations of the following colors:

  • #450084
  • #dacce6
  • #dcdcdc
  • #dfd2aa
  • #f4efe1
  • #f5f5f5

Step 3: Customized Navigation Menu

Your final task is to specify custom rules to the navigation menu on the left part of the page. For this step, you will modify navs.css. You must use some descendent or child selectors so that you do not change elements outside of the navigation. For this step, you will need the following CSS properties (in addition to ones mentioned previously):

  • font-weight
  • list-style-type
  • text-align

Add rules for the elements within the <nav> structure to create this layout. You must satisfy all the constraints in this annotated version. Make sure that your rules apply only to the specified element. In particular, be sure to distinguish between the list (<ul>), list item (<li>), and link (<a>) elements.

Submission

When you are finished, create a css.zip file containing only the CSS files. Do not have the files in a subdirectory (folder) within the .zip file. Submit your css.zip file to Gradescope.