Philip Henslowe Classic TheatreRandall Chen is the media director for the Philip Henslowe Classic Theatre , a regional classical theatre in Coeur d’Alene, Idaho. You’ve been asked to work on the...

Philip Henslowe Classic TheatreRandall Chen is the media director for thePhilip Henslowe Classic Theatre, a regional classical theatre in Coeur d’Alene, Idaho. You’ve been asked to work on the website design for the company. The first page you’ll manage lists the plays for next summer’s repertoire. A preview of the page is shown inFigure 2-54.

The content and layout of the page has already been created for you. Your job will be to create a style sheet for the typography of the page.

Complete the following:

1. 
   1
   

   Using your editor, open theph_plays_txt.htmlandph_styles_txt.cssfiles from the html02 ► case1 folder. Enter
   your name
   and
   the date
   in the comment section of each file, and save them asph_plays.htmlandph_styles.cssrespectively.

   
   


2. 
   2
   

   Go to theph_plays.htmlfile in your HTML editor, and within the document head create links to theph_layout.cssandph_styles.cssstyle sheet files. Take some time to study the content and structure of the document and then close the file, saving your changes.

   
   


3. 
   3
   

   Go to theph_styles.cssfile in your editor, and at the top of the file before the comment section, define the character encoding used in the document as utf-8.

   
   


4. 
   4
   

   Randall has several web fonts that he wants used for the titles of the plays produced by the company. Add the following web fonts to the style sheet, using@font-facerules before the comment section:

   
   
   
   
   1. 
      

      The Champagne font using the cac_champagne.woff and cac_champagne.ttf files

      
      
   
   
   2. 
      

      The Grunge font using the 1942.woff and 1942.ttf files

      
      
   
   
   3. 
      

      The Dobkin font using the DobkinPlain.woff and DobkinPlain.ttf files

      
      
   
   
   
   


5. 
   5
   

   Go to the Structural Styles section, creating a style rule that sets the background color of thehtmlelement to the value hsl(91, 8%, 56%).

   
   


6. 
   6
   

   Add a style rule for thebodyelement to set the background color to the value hsl(58, 31%, 84%) and the font of the body text to the font stack: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif.

   
   


7. 
   7
   

   Create a style rule for theheaderelement that sets the background color to black.

   
   


8. 
   8
   

   Create a style rule for every paragraph that sets the margin space to 0 pixels and the padding space to 5 pixels on top and 25 pixels on the right, bottom, and left.

   
   


9. 
   9
   

   For paragraphs that are direct children of the body element, create a style rule that sets the font size to 1.1em and horizontally centers the paragraph text.

   
   


10. 
    10
    

    Create a style rule for the address element that sets the font style to normal with a font size of 0.9em, horizontally centered on the page. Set the top and bottom padding to 10 pixels.

    
    


11. 
    11
    

    Next, you’ll format the appearance of navigation lists on the page. Go to the Navigation Styles section and create a style rule for thenav aselector that displays the hypertext links using the font stack ‘Trebuchet MS’, Helvetica, sans-serif, and sets the top and bottom padding to 10 pixels.

    
    


12. 
    12
    

    For every unvisited and previously visited hypertext link within anavelement, set the text color to white, remove underlining from the link text, and set the background color to the semi-transparent value hsla(0, 0%, 42%, 0.4).

    
    


13. 
    13
    

    For every active or hovered link in anavelement, set the text color to the semi-transparent value hsla(0, 0%, 100%, 0.7) and set the background color to the semi-transparent value hsl(0, 0%, 42%, 0.7).

    
    


14. 
    14
    

    Go to the Section Styles section of the style sheet. In this section, you’ll define the appearance of the four playbills. You’ll start with the h1 headings from the sections. Create a style rule for thesection.playbill h1selector that sets the font size to 3em and the font weight to normal. Set the margin space around the h1 headings to 0 pixels. Set the padding space to 20 pixels on top, 0 pixels on the right, 10 pixels on the bottom, and 20 pixels on the left.

    
    


15. 
    15
    

    Each playbill section is identified by a different ID value ranging from play1 to play4. Create style rules that set a different background color for each playbill using the following background colors:

    
    

    ID: play1 set to hsl(240, 100%, 88%)

    
    

    ID: play2 set to hsl(25, 88%, 73%)

    
    

    ID: play3 set to hsl(0, 100%, 75%)

    
    

    ID: play4 set to hsl(296, 86%, 86%)

    
    


16. 
    16
    

    Each playbill section heading will also have a different font. For the h1 headings within the four different playbills, create style rules to apply the following font stacks:

    
    

    ID: play1 set to Champagne, cursive

    
    

    ID: play2 set to Grunge, ‘Times New Roman’, Times, serif

    
    

    ID: play3 set to Impact, Charcoal, sans-serif

    
    

    ID: play4 set to Dobkin, cursive

    
    


17. 
    17
    

    Randall has put the author and the director of each play within a definition list. Format these definition lists now by going to the Definition List Styles section and creating a style rule for thedtelement that sets the font size to 1.3em, the font weight to bold, and the font color to the semi-transparent value hsla(0, 0%, 0%, 0.4).

    
    


18. 
    18
    

    Create a style rule for everyddelement to set the font size to 1.3em, the left margin space to 0 pixels, and the bottom margin space to 10 pixels.

    
    


19. 
    19
    

    Save your changes to the file and then open theph_plays.htmlfile in your browser. Verify that the typography and colors used in the document match those shown inFigure 2-54. Also, verify that, when you hover the mouse pointer over an item in the navigation lists for the entire page and for each play, the background color of the link becomes more opaque.