Modifying Media Queries
Instructions: Work with the analyze06.html  file in the analyze folder and the
analyzestyles06.css file in the analyze\css folder from the Data Files for Students. The

analyze06.html webpage is a draft template, but must be corrected and improved for

responsive design before presenting it to the client. Use Figure 6–56 and Figure 6–57 as

a guide to correct these files.

1. Correct
     a. Open the analyze06.html file in your editor from the Data Files for Students and then
          modify the comment at the top of the page to include your name and today’s date.
      b. Open the analyzestyles06.css file in your editor from the Data Files for Students and
          then modify and correct the comment at the top of the document to include your name

          and today’s date.
      c. View analyze06.html in your browser and resize the page to display mobile, tablet, and
          desktop viewports. The navigation links for the tablet viewport extend beyond their
          boundary at the current breakpoint.
       d. Open analyze06.html in Google Chrome and use the developer tools to determine
           the dimensions for a tablet viewport.
       e. In the analyzestyles06.css file, modify the tablet media query with a suitable

           breakpoint value.

2. Improve
   a. In the analyzestyles06.css file, pseudo-class properties are included within the desktop
       media query, but they all use the same value. Use #FFCCFF for the hover color value
      and  #9900FF for the active color value.
    b. In the analyzestyles06.css file, add a font-size property with value of 1.05em for the
         :hover pseudo-class.
    c. In the analyzestyles06.css file, create new style rule for the body selector within the
       desktop media query that uses a background property with a value of lineargradient

        (#FFFFFF, #336699); and then add the properties and values needed to accommodate

         the major browseiefe standard syntax at the bottom.
     d. In the analyzestyles06.css file, add the property background-attachment with a value of
         fixed to the style rule for the body selector.
     e. Save your changes and test your webpage. It should look like Figure 6–56 for the tablet
          viewport and Figure 6–57 for the desktop viewport.
      f. Validate your CSS file using the W3C validator found at
          http://jigsaw.w3.org/css-validator/ and fix any errors that are identified.
     g. Validate your HTML webpage using the W3C validator found at validator.w3.org and
          fix any errors that are identified.
     h. Identify other ways to style a pseudo-class and provide an example.