Unit 3. Review "A" The Civil War and Reconstruction

Unit 3. Review "A" The Civil War and Reconstruction

Tutorial 3 Review - A

The Civil War and Reconstruction

1.    Open the civilwartxt.htm and cw_stylestxt.css from the Civil War folder found in your Student Data files.  Add your name and the date to the comment section of each file and then save the files as civilwar.htm and cw_styles.css, respectively.

2.    Go to the civilwar.htm file.  Notice that there are two navigation lists in the document. We want the first one to be displayed horizontally and the second one to be displayed vertically.  To do this we will add the class= attribute to each <nav> element. Set the horizontal <nav> class to horizontal and the vertical <nav> list to vertical.

Save your changes.

3.    Go to the cw_styles.css file.  There is another stylesheet (cw_layout.css) created for this web site, however, we are going to add some further changes with our new stylesheet.  We need to import the cw_layout.css stylesheet using the @import rule.  Add the following to the top of the cw_styles.css, directly below the */ closing comment tag:

*/

/* To import the cw_layout.css styles to the Civil War Web page */

@import url(cw_layout.css);

4.    Go to the cw_styles.css file. We are now going to set some styles to the body of the page.  The first style we will add is to set the font list to “Palatino Linotype”, “Book Antiqua”, Palatino and serif.

Note:  Remember to enclose font names that have more than one word in quotation marks!

5.    The next step is going to be to set styles for the h1 through h6 headings. Set the color to hsla (212, 0%, 0%, 0.4).  Set the font to “Trebuchet MS”, Helvetica, sans-serif.  Remove the bold, using the font-weight: 400; style.  Set the kerning and text-indent to 5px.

Note:  Rgb color values and color names have been part of Web page design since the introduction of CSS. To allow designers to create more interesting designs based on color, additional tools have been added.  Colors based on hsl (hue, saturation and lightness allow designers to create more options with colors.  Opacity is also used to set the transparency of color. (When opacity is applied, hsla is written before the values.)

6.    We are going to set a style rule for all h1 headings used as headers within the body of the page.  To do this, you type: body>header>h1{  Set the background-color to hsl (212, 100%, 29%). 

7.    The next style rule is going to be for the unordered list within the horizontal navigation list.  Display the font to “Century Gothic MS”, sans-serif.  Set the font size to 14px. Display the text in bold. Set the kerning to 3px. Set the line height to 20px.  Remove the markers from the list.

8.    For the links in the horizontal navigation list, set the text to hsl(212, 100%, 70%) and remove the underlining.  When the mouse hovers over a link, change the font color to hsl(212, 100%, 29%).

9.    Now we will set styles for the vertical navigation list. Set the background color of the vertical navigation list to hsl(32, 100%, 95%).

10.Create a style rule to set the color to the hsla(32, 0%, 0%, 0.5) for the h4 element within the vertical navigation list. Set the font size to 18px and the text indent to 15px.

11. We are going to display the ordered list items in the vertical navigation list in an outline style with uppercase Roman numerals for the top level and uppercase alphabetic letters for the second level.  Also, set the line-height of the lists to 2em.  To create the outline with the above specifications, type the following style rule:

nav.vertical ol{

list-style-type: upper-roman;

line-height: 2em;

 }

nav.vertical ol ol{

list-style-type: upper-alpha;

 }

12.Set the color of the links in the vertical navigation list to hsla(212, 100%, 29%, 0.6).  Remove the underlining from the links. 

13.Set the style rule for the links to the vertical navigation list to change colors when the mouse hovers over the link.  Set the color to hsla(212, 100%, 29%, 1).  Also display the underline,

14. Now we will write styles for the <section> element. Set the background color of the section element to hsl(212, 95%, 90%). 

15.When writing styles for the first paragraph after the h2 heading within the article element, you would type:  article h2 + p{

     Create a style rule to display the first letter with a font size of 32px. To apply this rule, add the following: 

article h2 + p:first-letter{

font-size: 32px;

}

16. There is a paragraph in the <footer> that we are going to set a style rule that sets the font size to 10px and the line height to 30px.  Also, center the text.  Hint: footer p{

17.Save your changes to the cw_styles.css file.  Return to the civilwar.htm file and link the file to the cw_styles.css and save the changes.

18. Open the civilwar.htm file in your browser and verify that when you hover the mouse pointer over the links in the horizontal navigation list, the text changes color.  Verify that when you hover the mouse pointer over the links in the vertical navigation list, the text color changes and the text is underlined.