C15_Exercise15_Baseline / C15_Exercise15_Baseline___ / C15_YourID_Exercise15

Application Development

exercise 15: CSS Layout Part 1 — Header

Name: ____________________________________

PURPOSE

The purpose of this exercise is to practice using the CSS properties we have learned so far to build a website for iCarnegie Global Learning. This is part 1 of a 3-part exercise. In this exercise, we will style the header and navigation bar of the website.

ACTIVITIES

Perform each of the following activities. It is important that you perform these steps in the specified order. If you have questions, issues, or doubts, please ask for help and do not just guess.

1. Unzip the file C15_P02_Baseline.zip

2. The C15_Baseline/screenshot folder contains a file named C15_screenshot.png. This is a screenshot of what today’s completed exercise should look like. Use this screenshot as a guide while completing this exercise.

3. Open the C15_P02_Baseline folder in Brackets, and make the following changes in style.css file:

   1. Create a CSS reset for the following elements: html, body, h1, h2, h3, h4, h5, h6, p, a, div, ul, li

      1. Set the margin and padding to zero

      2. Add the following font family: 'PT Sans', sans-serif;

         1. PT Sans is a Google font. You will need to add the link for this font to your index.html file. We need the Normal 400 and Bold 700 styles.

      3. Set the font-size to 100%

      4. Make the font-weight 400

      5. Make the text color #555

   2. Under the “general styles” comment add the following rules:

      1. html { background: #fff; }

4. Now let’s style the header and navigation bar styles.

   1. Give the header element the following properties:

      1. width: 100%;

      2. height: 190px;

      3. border-top: 11px solid #82c54e;

      4. background: #fff;

5. Okay, let’s style the div with the class of logo.

   1. First, let’s give it the following background image: (We have mostly used the background property for colors, but we can also use it to add images.)

      1. background: url('../images/icarnegieLogo.png') no-repeat;

         1. By the way, why is the “../” in the url path? What happens if we leave this out?

         2. What does the no-repeat mean?

      2. Unlike the HTML <img> tag, the background property requires a width and height property. Use the following settings:

         1. width: 304px;

         2. height: 66px;

         3. What happens if you do not add the width and height properties?

   2. Finally, let’s absolutely position the logo div 49 pixels from the top and 57 pixels from the left relative to the top left corner of the header

6. Next, let’s add these properties to the nav element:

   1. width: 100%;

   2. background: #eee;

   3. position: absolute;

   4. left: 0;

   5. bottom: 0;

7. Okay, we still have a lot of styling to do, but something is already wrong. The nav bar should be positioned at the bottom of the header, not the bottom of the page.

   1. Perhaps something is wrong with the position property of the <header> tag that is messing up the absolute positioning of the nav and the logo. Please fix this!

8. Okay, that looks better. Let’s style some more elements:

   1. nav ul { width: 564px; overflow: auto; } (By the way, what does the auto overflow do again?)

   2. nav ul li { border-right: 1px solid #555; float: left; list-style: none; }

   3. nav ul li a:link, nav ul li a:visited { width: 140px; padding: 6px 0; color: #fff; background-color: #8895a3; font-size: .8em; }

9. We have some more issues. Let’s see if you can fix these problems on your own:

   1. The width of the links has been set to 140 pixels, but the width property is not working.

   2. We do not want the text in the links to be underlined.

   3. Also, we want the text to be centered in the buttons.

10. Great job! That looks good, but let’s center the navigation. Set the nav ul’s margin property so that it is always centered in the browser

11. Good, but we do not need right border on the page 4 button.

    1. Use a pseudo-class selector to eliminate this border

    2. Change the nav ul width to 563 pixels

    3. Also, the nav background is too light. Change the color to #2f4054

12. We are almost done. Let’s provide some user feedback for our buttons:

    1. Have the background color of the links change to #82c54e when they are hovered on or active

13. Finally, let’s come up with a way to let users know what page they are on

    1. In the index.html file, add a class of “current” to the home link.

    2. Now go back to the style.css file and change the background color of the link with the class of “current” to #69737e.

    3. Finally, change the cursor property to default. By the way, why do we want to use the default cursor for this button?

14. Save your work to a zip file and upload it to the LMS