CECS 470 Lab Assignment 3: HTML and CSS Due date: Wednesday, 2/13/2019

40 points

1. [ 3 points] Use the embedded style, style the web page in the lab assignment 2 with the following styles:  h1 - color: blue; background -color: yellow  h1, h2, h3 - family: "Trebuchet MS", " Grande", , sans-  body – font family: , , "", serif

2. [6 points] Use the separate CSS file, style the web page in the lab assignment 2 with the following styles:

 header, footer - color: white; background color: 213643;  nav - background color: 728B96;  h1, h2, h3 - font family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;  body – font family: Georgia, Cambria, "Times New Roman", serif;  Change the text Review to red  Class first to color: 728B96; font style: italic;

1

3. [ 31 points] This problem updates your existing web page from the lab assignment 2 to add some visual stylistic improvements with CSS.

Instructions

Create an external style sheet called reset.css that removes all the browser formatting from the main HTML elements and reference inside the html file as follows:

html, body, header, footer, main, nav, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img

{ margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; border: 0; }

Create another external style sheet named lab3.css and link to it in your HTML file. Add styles to lab3.css so that it looks similar to that shown in Figure below. Do not modify the markup within the element.

2

Be sure to group your style rules together in appropriate commented sections and to make your sizes scalable (i.e., try to avoid using pixels for font sizes, padding, or margins).

Here's a hint for the header and footer. header, footer {

color: white;

background-color: #1A237E;

3

margin: 0em 4em 0.25em 4em;

}

Grading  Demonstrate the lab assignment to the instructor to the lab  Return the print out of html file and css file for each problem  Submit html file and css file for problem 3 to the BeachBoard

4