Skip to content

Lab 4: Incremental CSS

Due: Monday, Feb 17th

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

Browser Tools

All code must validate cleanly with both Nu (HTML checker) and WAVE (accessibility). You must resolve all errors and warnings before submission. If you haven't already, please install (and use) these browser extensions:

For standard CSS properties, please refer to the MDN CSS reference.

Preliminaries

This lab requires working with CSS to specify very exact values. The test cases provide some small amount of variation, but you should not just guess at the values required. All test cases assume as 1280x720 layout dimension. The provided screenshots go to a top and bottom image that were generated using Firefox's responsive design mode tool to specify these exact dimensions. You are encouraged to use this tool as well.

Note that there are some natural variations that cannot be controlled. Specifically, the system fonts used to generate these images may differ from the fonts on your machine slightly. There is no easy way to avoid this. However, if you pay close attention to the annotated version of the layouts, you should be okay. In particular, pay attention to the units implied. You should know when to use 10%, 10vw, 10px, or other such units.

Starter Code

Download the following files to get started:

Generally speaking, you must not make any changes to the HTML file except to include a CSS file. All visual changes must be controlled by CSS only. All CSS rules are based solely on elements, not ID or class.

Throughout this lab, you will need to use certain color values that we refer to by their color names. The colors consist of the following RGB values in hex format:

  • #450084 – indigo
  • #dacce6 – thistle
  • #dedede – gainsboro
  • #dfd2aa – wheat
  • #f4efe1 – oldlace
  • #f2f2f2 – whitesmoke

Step 0: Linking to CSS

Edit the index.html file to include the styles.css stylesheet. Then edit styles.css to add a minimal rule set:

  • Make the <body> element use a serif font by default.
  • Make <h1> and <h2> elements use sans-serif.

The provided styles.css already includes the necessary rules. You just need to provide the values. After you do this, your page should look like these screenshots:

Step 1: Spacing

Copy index.html as spaces.html, and create a new spaces.css file. Change spaces.html so that it only links to spaces.css. However, your page must still use the same color schemes from above. To do this, you can tell spaces.css to include the original styles.css file:

@import 'styles.css';

Your task in this step is to define element rules to add spacing throughout the page. Modify spaces.css to define rules that use only the following CSS properties (or variations, such as margin-top, padding-left, etc.):

  • margin
  • padding
  • vertical-align
  • width

Add rules for the <h1>, <h2>, <header>, <main>, <nav>, <p>, and <section> tags to create the layout in the screenshots below. Your solution may have slight variations, but it must satisfy all the constraints in the annotated version.

  • Spaces top / bottom
  • Annotated Version
    • Header has no margin. Vertical padding is 1% of viewport and horizontal is 2%.
    • Main is 85% of parent's width and nav is just less than the remainder. Both are vertically aligned to the top.
    • Main and sections each have padding 1% of the viewport on all sides. Main has no padding but sections do on the top.
    • Paragraphs have horizontal padding that is 2% of the viewport.

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

Copy spaces.html as colors.html, and create a new colors.css file. Change colors.html to add a link to colors.css (still also linking to spaces.css).

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 use the spacing rules from above and only the following additional CSS properties (and their variations):

  • background
  • border
  • color

Add rules for the <header> and <section> tags to create the layout in the screenshots below. As before, your solution may have some variation but you must satisfy all the constraints in the annotated version.

  • Colors top / bottom
  • Annotated Version
    • Header has indigo background and whitesmoke text.
    • Body has no margin.
    • Header has 5-pixel thistle-colored bottom border.
    • Sections have oldlace-colored background and a 3-pixel border that has 15-pixel rounded corners.

The borders specified must be at least 2 pixels wide. Note that the curved corners are created by using the border-radius property.

To make the page look truly correct, you will need to add a rule for <body> to set its margin to 0. Otherwise, you may see a bit of the background color around the header.

You should reuse the spacing values from the first step, rather than repeating them here. In this step, you will only need to use spacing to make sure that the header covers the full width and top of page.

Step 3: Customized Navigation Menu

Copy colors.html as navs.html and create a new navs.css file. Change navs.html to add a link to navs.css (still also linking to spaces.css and colors.css).

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 the layout in the screenshots below. You must satisfy all the constraints in the annotated version.

  • Navs top / bottom
  • Annotated Version
    • Nav has a 2-pixel border with 10-pixel rounded corners, no padding but margins 1% of viewport all around. Background color is gainsboro.
    • Nav list has no padding or margins, but the items each have 1% of viewport padding. Items are centered and do not have bullet points. All items except the last have a bottom border that is 2-px whitesmoke. Lists and list items outside the nav are not affected.
    • Links in the nav use bold sans-serif font with no underline and indigo color. Note that other links are not affected.

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

Submit your index.html and all four CSS files to Gradescope.