This lab is under revision and will be posted soon.
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:
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.
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.
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 make sure that your and 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.
