Lab 5

Introduction to CSS

Overview
This lab will exercise your knowledge of the content in the CSS first steps and CSS building blocks
chapters of MDN’s Learn web development tutorial series, specifically the following sections:

 What is CSS?
 Getting started with CSS
 How CSS is structured
 How CSS works
 Cascade and inheritance
 CSS selectors
 The box model
 Overflowing content
 Values and units
 Sizing items in CSS
 Styling tables
 Debugging CSS
 Organizing your CSS

NOTE: The above list does not include all the sections of the two chapters mentioned above.

IMPORTANT: Before you attempt this lab, you are expected to have read through the above sections
and completed the hands-on exercises and self-assessments throughout the readings to gain more
hands-on experience.

Lab Deliverables
 Do all your work for this lab in the CSD112Labs folder you created in Lab 1
 After completing this lab, your CSD112Labs folder should contain the following file structure:
o CSD112Labs
 images
 logo.png
 …
 styles
 main.css
 normalize.css
 index.html
 links.html
 glossary.html
 survey.html
NOTE: It is a good idea to commit your work to Git periodically as you complete significant portions of
the lab. For example, you might commit your work after finishing all the tasks in each major section
below. You do not have to push each time you commit, (but you may). You only need to push when you
really do want your GitHub remote to be up to date (for example, when you are ready to submit your
lab to LMS, or when you want to view your updates on your GitHub Pages site). When you do so, ALL
the commits that are not yet in your remote will be pushed up automatically.

Setup
1. If you have not already done so, complete Lab 4
2. Note any Lab 4 feedback given by your instructor by navigating to your repository on GitHub,
and opening the ‘lab 4 notes’ pull request in the Pull Requests tab.
3. Also review any suggested changes from your instructor by viewing the Files Changed tab inside
the pull request. (Any comments from your instructor will also appear here.)
4. Merge the instructor’s suggested changes by navigating back to the main ‘Conversation’ tab of
the pull request and scrolling down to click the green ‘Merge pull request’ button.

IMPORTANT: If you have pushed code to the repository that involves changes to the same lines
as the changes suggested by your instructor, you will instead be informed that the merge cannot
be done automatically, and you will need to do the merge manually. Follow the instructions
provided by GitHub. You will be presented with any conflicting lines of code in which both you
and your instructor have made changes. It is up to you to determine whether to keep one or
the other of the changes, or some combination of both. If you would like assistance or
verification that you have done the merge correctly, don’t hesitate to ask your instructor!

5. Finally, pull the merged pull request down to your local repository using the pull command in
VS Code

IMPORTANT: If you have committed code in your local repository that involves changes to the
same lines as the changes suggested by your instructor, the pull will fail and you will be
informed that there were conflicts. Use VS Code’s interface to locate the conflicting regions of
code and choose whether to keep your code, your instructor’s code, or some combination of
both.

IMPORTANT: If you had to resolve conflicts, you

MUST COMMIT any changes
you made when resolving conflicts in order to proceed; until you do, Git will be in
a ’resolving conflicts’ state, which will prevent you from doing further pushes or pulls with a
remote.

6. Excellent! You have now integrated all changes suggested by your instructor into your local
repository, and your code is in a good state to start on this lab!
Instructions
IMPORTANT: Be sure to use appropriately specific selectors for any CSS rules you create. For example, if
you are asked to add a rule that applies to the hyperlinks in the header make sure that your rule does
NOT apply to hyperlinks NOT in the header.

1. Add external stylesheets

1.1. In your main website directory (the same one in which index.html is located) create a
directory named ‘styles’
1.2. In the styles directory, save a copy of normalize.css
1.3. Also in the styles, create a new CSS stylesheet named ‘main.css’
1.4. In ALL your existing HTML files, include both normalize.css AND main.css
1.4.1. All else being equal, rules in main.css must override rules in
normalize.css (I.e. include the stylesheets in an appropriate order)

2. Add basic styles to main.css

2.1. Using the technique discussed in class, add the rules that will cause all elements to be
sized relative to their border box instead of the default, content box.
2.2. Give the element with the class ‘width-wrap’ a maximum width of 960 pixels

OBSERVE: Your web page content should no longer fill the whole width of the browser
after it gets bigger than 960 pixels wide, but it is not centerd. Let’s fix that...

2.3. Using auto margin technique discussed in class, make the ‘width-wrap’ element
centered if the browser is wider than the maximum of 960 pixels

OBSERVE: Your text content extends right to the edge of the browser window when the
browser is narrower than 960 pixels. It also extends all the way to the bottom. Yuck!

2.4. Add a padding of 2 ems to the left, right, and bottom sides of the 'width-wrap' element
2.5. Add border around the ‘width-wrap’ element with the following characteristics
2.5.1. It is 1 pixel wide
2.5.2. It is solid
2.5.3. It is black, with an alpha value of 0.3
2.5.4. There is NO top border

OBSERVE: When the page content is longer than the browser viewport, the bottom
border is against the bottom edge of the browser viewport.

2.6. Fix this by adding a bottom margin of 3 ems to the width-wrap element so that there is
always space between the bottom of the width-wrap and the bottom of the body.
2.7. Add a rule that targets the <hr> element in your footer with the following styles:
2.7.1. It has a width half that of the viewport, but never less than 300 pixels
and never more than 890 pixels
 2.7.2. It has a 3 em top margin and a 2 em bottom margin
2.7.3. Has ONLY a bottom 3 pixel dotted bottom border that is of a color of
your choosing
2.7.4. IMPORTANT: Be sure to clear the default borders that exist on <hr>
elements
2.8. Add a rule that appends a colon (:) after the text content of each term element in a
definition list. (Use the definition list in your glossary.html file to verify that your rule is
working.)

3. Give your site a color scheme.

3.1. Use your browser dev tools or a tool like https://paletton.com or
https://www.canva.com/colors/color-palette-generator/ to choose a color scheme for
your website. (Perhaps use one of the images on your website as the source in the
latter link.)

Some tips to keep in mind:

3.1.1. To maximize your website’s accessibility, pick a background/foreground
color combination that is either dark text on light background or vice versa
3.1.2. Don’t use too many colors. A set of 2 to 4 complementary colors for
background, body text, heading text, and link text is usually enough.
3.2. Give your width-wrap element your selected background color
3.3. Set the background of your body element to a color different than the width-wrap
background. (Perhaps a shade lighter or darker than the width-warp background, or
completely different but complementary color.)
3.4. Make the default text color in your website non-default
3.5. Give your headings from level 1 to 3 a non-default color
3.6. Give hyperlinks in your site a non-default color
3.7. Give hyperlinks in the header navigation of your site a different color than the hyperlink
color you chose above
3.8. Use a pseudo element to give selected text in your site a non-default background color

4. Layout your site header

In this section, you are working toward a header that looks something like the image below.
Note that the navigation links are arranged horizontally instead of vertically. There is a top bar
that extends the full width of the width-wrap element; when a navigation link is hovered, the
section of the top bar above the link is colored to highlight that link (in the image below, the
‘Links’ hyperlink is being hovered). Finally, a dotted line below the header extends only to the
padding of the width-wrap.

NOTE: In many places you will be given a description of how elements are to be spaced, but you
will not be told which box-model property (padding vs margin) to set to achieve the spacing.
This is to give you practice solving layout problems using these properties, a valuable skill in web
development.
OBSERVE: Use your browser dev tools to verify that the ugly gap currently at the top of your site
is due to the top margin in the navigation <ul> element collapsing with its ancestor elements
that have no padding or border

4.1. Fix this problem by giving your header element (an ancestor of the <ul>) a 4 pixel top
border that is black with an alpha value of 0.1

OBSERVE: The top border of the header element doesn’t extend to the edge of the
width-wrap as it should

4.2. Fix this by giving the header negative left and right margins that are the same as the left
and right paddings of the width-wrap
4.3. To create the line beneath the header, give the header nav element a 1 pixel wide
dotted bottom border that is black with an alpha value of 0.3

OBSERVE: The bottom line you just added extends the full width of the width-wrap, but
you want it to only extend to the padding of the width-wrap

4.4. Fix this by adjusting the left/right box model of the header nav element such that there
is space between its border and the edge of the width-wrap equal to the width-wrap's
padding

4.5. Set the margin and padding of the unordered list in the header nav to 0

OBSERVE: There is no longer any space above and below the unordered list in the
header. In the next several steps, you will alter the box models of the list items (and
their nested hyperlinks) such that there is a large clickable area for each navigation link,
and hovering over a link with the mouse pointer displays the colored bar above the link
as in the preview image above.

4.6. Alter your header list items so that they are displayed inline

OBSERVE: Your navigation links should now be arranged horizontally, and should no
longer have bullet points

4.7. Add a top border to your navigation hyperlinks (NOT the list items) with the following
characteristics:
4.7.1. 4 pixels wide
4.7.2. It is solid
 4.7.3. When the hyperlink is NOT being hovered over by the mouse pointer it
is completely transparent
4.7.4. When the hyperlink IS being hovered over by the mouse pointer it is
completely opaque. (You may choose whichever color you like.)

4.8. Alter the box model of your navigation hyperlinks (NOT the list items) such that
4.8.1. They are displayed inline but vertical box dimensions DO have an
effect. (You are about to apply several vertical box dimensions that won’t have
any effect if you leave the hyperlinks as plain inline.)
4.8.2. The top border of the hyperlink overlaps perfectly with the top bar of
the header
4.8.3. There is a 1 em space between the hyperlink text and the top border
you just added
4.8.4. There is a 0.5em space between the hyperlink text and the line below
the header.
4.8.4.1. IMPORTANT: hovering the mouse pointer in this space MUST
cause the hyperlink’s top border to appear.
4.8.5. There is 1em of horizontal space around each hyperlink BUT the top
border of the hyperlink does NOT extend beyond the edge of the hyperlink text
(see the image above for reference)

5. Style your tables

In this section you will be working toward styling tables in your webiste something like the
image below.
 5.1. Give all table data AND header cells a top/bottom padding of 0.3 em and a left/right
padding of 1em
5.2. Give ALL cells in thead and tfoot and all HEADER cells in tbody a black background with
an alpha value of 0.2
5.3. Give all data cells a black background with an alpha value of 0.05
5.4. Give all data cells in even-numbered rows of the table body a black background with an
alpha value of 0.15

NOTE: If you chose a dark background for your width-wrap in your color scheme you
may replace the table background-colors above with white instead of black (but the
same alpha values should be applied).

6. Style your form

6.1. Give labels a display value such that they appear on their own line
6.2. EXCEPT, labels that come immediately after a radio or checkbox <input> must remain
inline
6.3. Give any controls with the type ‘submit’ the following styles
6.3.1. No border
6.3.2. 1 em top/bottom and 3 em left/right padding
6.3.3. Non-default color and background color
6.4. Give any form controls with an invalid value a non-default background color
Submission
1. Validate ALL your HTML files using the w3.org validator service. Submitting invalid HTML will
result in a lower lab grade
2. Format ALL your code files using the “Format Document” command found in the Command
Palette (View -> Command Palette -> Format Document). Submitting poorly formatted code will
result in a lower lab grade.
3. Save all your work in VS Code.
4. Commit all your changes in Git.
5. Push all your commits to GitHub.
6. Submit the latest commit ID AND your GitHub URL to the submission folder for this assignment.