CSS Lab Assignment

Learning Objectives:

By the end of this assignment, you will be able to:

1. Add external, internal and inline styles to web pages

2. Use CSS for horizontal and vertical text alignment, text indentation, text spacing, text effects, fonts, color, size, layout, margins, padding and spacing

3. Use CSS styling for links

4. Select a harmonious color scheme for your pages

Overview

You will be adding an external style sheet to your assignments page and you will be adding an internal style sheet to the <details><summary> page you created in last weeks lab assignment.

To see a video overview, watch: https://youtu.be/oJ4Aj3xrMgQ

Part 1  Creating an internal style sheet (10 points)

Minimum requirements:

1.  Copy the <details><summary> file  you created last week from the Lesson3 folder to the Lesson4 folder

2.  Copy the images used in your page from the Lesson3/media folder to the Lesson4/media folder

3.  Select a color scheme for the page:

• Decide which harmonious complementary scheme you want to use (monochromatic, analogous, alternate complement, split complement etc)  NOTE:  You may find the adobe color wheel helpful: https://color.adobe.com/create/color-wheel/   The hex# is displayed near the bottom of the screen (you can jot down the numbers and use them in your CSS)
• Decide what your primary colors will be
• Select a color scheme and apply the colors from your scheme to the color requirements below:

4.  Create an internal style sheet that applies the following CSS properties:

• For at least one heading tag, minimum requirements include:
  • font-family   
  • font-size
  •  padding 
  •  color and/or background color 
  •  font-weight 
• For the body tag, minimum requirements include:
  • font-family 
  • font-size  
  • left margin 
  • background color 
• For the summary tag, minimum requirements include:
  • font color  
  • font-family 
  • font-size 
  • background color 
  • padding
• For the details tag, minimum requirements include:
  • width 
  • background color 
  • padding
• For the hr tag, minimum requirements include:
  • height 
  • background color 
• For the article tag, minimum requirements include:
  • width 

NOTE:  You decide what the settings should be.  You can include more styling than the required list (the list is the minimum)

5.  View the page offline and make adjustments as needed

Example of a completed page:

6.  Transfer the page to the Lesson4 folder on the web

7.  Transfer the images into the Lesson4/media folder on the web.

Part 2  Updating your assignment page with links and CSS styling (10 points)

We are going to 1)  add assignment 4 links to the page; 2)  select a color scheme for text and links; 3) create an external style sheet; and 4) link the stylesheet into the page.

1)  Add the following code to assignments.html for lesson4 links:

2)  To create a color scheme you can use any of the websites discussed in the lecture OR you can upload your background graphic to LunaPics and pull colors from the graphic (the adobe site above also lets you upload a graphic and pull colors from it).  To see a video demonstration showing how to do that, watch: https://youtu.be/_eH8OiLcPJk

3)  Create an external style sheet named assignments.css and save the file into the CIT180/css folder.    Add a link to the assignments.css file below the <title> tags.  

a) Minimum style requirements include:

body

• font-family 
• font-size 

a:link

• color 
• text-decoration 

a:visited

• color 
• text-decoration 

a:hover

• color 
• text-decoration 
• background-color

a:active

• color 
• text-decoration 

h1

• font-size 
• color 
• text-shadow 

h2, h3

• color
• font-size
• text-shadow
• width
• background-color
• padding

In the example below, additional styling was added to section and paragraph. To see the styling that was used, view: assignment.css Minimum requirements are the bare minimum you need to include to receive all the points. It is ok to do more than the minumum!

b)  Add an inline style for the footer that changes the alignment, background-color, color , width and padding  1 point

Example:

4.  Save your changes.

Part 3  Transferring and viewing your pages

1.  Transfer the revised assignment page and the assignment css to the server.

2.  Open the Lesson4 folder and transfer the <details><summary> page to the Lesson4 folder on the server.

3.  Go to your website and view the assignment page live, select the links to make sure they work and that your pages look correct.

Grading: