JavaJam Case Study Chapter 6

Configure the CSS.

1. Configure the universal selector with a box-sizing: border-box style declaration. * {box-sizing: border-box; }

2. Configure id selectors for the hero image on each page.

a. Configure an id selector namd heroroad. Set the background image to heroroad.jpg. Configure 100% background-size and height of 250 pixels.

b. Configure an id selector namd heromugs. Set the background image to heromugs.jpg. Configure 100% background-size and height of 250 pixels.

c. Configure an id selector namd heroguitar. Set the background image to heroguitar.jpg. Configure 100% background-size and height of 250 pixels.

3. Edit the style rules for the main selector so that the hero image will fill the entire area. Change left padding to 0. Change right padding to 0. Change right padding to 0. Also configure a 200px left margin, 0 top padding and #FEF6C2.

4. Since the main content area no longer has any left or right padding, configure descendeant selectors to configure style rules for the following elements within the main element: h2, h3, h4, p, div, ul, dl. Set left passing to 3em and right padding to 2em.

5. Configure the left-column navigation area. Add style declarations to the nav element selector to configure an area that floats to the left and is 200 pixels wide.

6. Configure the :link, :visited, and :hover psuedo-classes for the navigation hyperlinks. Use the following text colors: #FEF6C2 (unvisited hyperlinks), #D2B48C (visited hyperlinks) and #CC9933 (hyperlinks with :hover). For example, nav a:link { color: #FEF6C2; }

7. You will organize the navigation hyperlinks with an unordered list in later tasks. The navgiation area in Figure 6.50 does not show list markers. Code a nv ul descendant selector to configure unordered lists in the navigation area to display without list markers and with 0 left padding.

8. Modify the wrapper id. Configure a dark background color (#231814) which will display behind the column with the navigation area.

9. Modify the h4 element selector style rules. View the Music page shown in Figure 6.5 and notice that the

tags are styled differently, with all uppercase text (use text-transform) a bottom border, 0 bottom padding. Also configure a style declaration to clear floats on the left.

10. Refer to the Music page shown in Figure 6.52 and notice how the images float on the left side of the paragraph description. Configure a new class named floatleft that floats to the left with 20 pixels of right and bottom padding.

11. Modify the style rules for the details class and add the overflow: auto; style declaration.

12. Add the following CSS to be compatible with most older browsers:

header, nav, main, footer { display: block; }

Task 3: The Home Page.

Open index.html in a textor editor. Edit the code as follows:

1. Configure the left-column navigation area, which is contained within the nav element. Remove any &nsbp; characters that may be present. Code an unordered list to organize the navigation hyperlinks. Each hyperlink should be contained with

tags.

2. Remove the img tag for the windingroad.jpg. Configure a div element assigned to the heroroad id between the opening main tag and the opening h2 tag. There will be no HTML content in this div, which is a container for a background image you configure with CSS in Task 2.

3. Configure the thumbnail images to float to the left. Add class="floatleft" to the image tag for each thumbnail image.