Overview

In this exercise, you'll be creating an external stylesheet using IDs, and applying it to a play. Since it is external, it could be applied to any file containing a play, if the corresponding ID divisions are coded into the file.

Save your XHTML template file as x21j.htm, and title the page, "Sarah Strong x21j" (changing Sarah Strong to your own name). Make sure your name is listed as author.

1. Open the file as-you-like-it.txt. This is the file you'll be working with. It contains a one-act play by Rabindranath Tagore, a well-know playwright of India who lived during the 19th and 20th centuries. The file contains HTML code, but is not a complete HTML document.
2. Copy the contents of as-you-like-it.txt and paste it into your x21j.htm file.
3. In the head portion of x21j.htm, put in a link to an external file named drama.css.
4. Create a new file named drama.css. Start by entering comments to mark the beginning of each of the major sections of the stylesheet. There will be a section for the body, and one for each of the ID divisions. You can copy-and-paste these:
   
   /* Body */
   /* Navigation Division */
   /* Title Division */
   /* Preface Division */
   /* Cast Division */
   /* Play Division */
   
5. In the Body, create rules as follows:
   1. Give the background bisque color whose hex number is #FEC
   2. The font should be Garamond, Georgia, or serif
   3. Padding around the body should be 20 pixels
   4. Overall color should be Maroon.
6. For the Navigation Division, create CSS ID rules using as follows:
   1. Make the background color "maroon';
   2. Set the color to "yellow";
   3. The font family should be Verdana, Helvetica, Arial, or sans-serif;
   4. Make the font weight bold;
   5. Create a border of medium thickness consisting of a solid line;
   6. Put padding of 3 pixels around the inside of the border;
   7. Align text in the center
   8. In the Navigation Division, give the links a distinct style:
      1. From all variants of links, remove the underline and instead give them a thin, solid border. They should have padding and margins of 3 pixels and the left and right, but not on the top and bottom.
      2. Change the colors of the text and background like this:
         
         Normal link: color "yellow", background "maroon"
         Visited link: color "yellow", background "maroon"
         Link when the mouse hovers over it: color "maroon", background "yellow"
         Active link: color "red", background "white"

      Note: due to an anomaly in CSS, you must define the rule for visited links immediately after defining the normal link, in the order shown here.

      Links to show the Navigation and Title Divisions for a different play in three browsers:
      Internet Explorer 6.0	Netscape Navigator 7.1	Opera 6.2

7. In the Title Division, create ID rules as follows:
   1. Align the text in the center;
      Make the background color a deep forest green with the hex code #060;
      Put a thick double border around it;
      Color text and border "yellow";
      Pad the inside with 10 pixels of empty space.
   2. Heading 1 in the Title Division is special:
      Give it extra padding of 40 pixels;
      Create a thin, solid border around it;
      Make its left and right margins 25% each to center it
8. In the Preface Division, create ID rules as follows:
   1. Give it a thin dotted border;
      Put margins and padding of 40 pixels all around it;
      Set the font family to Georgia, Times New Roman, or serif; and the font style to italic.
   2. Center-align Heading 2 in the Preface Division.
      
      

      Links to show the Title and Preface Divisions for a different play in three browsers:
      Internet Explorer 6.0	Netscape Navigator 7.1	Opera 6.2

9. In the Cast Division, which displays the cast of characters, create ID rules as follows:
   1. It should have a thin, solid border;
      The margin and padding should be 40 pixels all around;
      Make the background color a slightly lighter beige with hex code #FFD.
   2. Heading 2 in the Cast Division should be center-aligned.
      

      Links to show the Title and Preface Divisions for a different play in three browsers:
      Internet Explorer 6.0	Netscape Navigator 7.1	Opera 6.2

10. The Play Division, the main part of the document, we'll make slightly contrasting styles. Again, use IDs to code these rules:
    1. We'll give it a thick, double, maroon border;
       Pad it 10 pixels on all sides;
       Color it a dark green, hex number #060.
    2. Heading 2 marks the beginning of each Act, or if there is only one Act, the beginning of the play itself.
       Align the text in the center;
       Make the background color "Maroon";
       Create a border that is medium double;
       Give it margin and padding of 40 pixels all around;
       Color the text and border "yellow".
    3. Heading 3 marks the beginning of Scenes within each Act.
       The background should have a deep green color, hex code #060;
       Text color should be "yellow";
       Extend this beyond the normal margins by using a negative margins: -10 pixels;
       Pad it all around with 30 pixels;
       Make a thin solid maroon border;
       Text should be aligned in the center.
    4. Heading 4 gives the names of the characters speaking.
       Set font weight to 100, font style to italic, and font variant to small-caps;
       Make the bottom margin 0 and the top margin 15 pixels;
       Give the background very light yellow color, hex code #FFC;
       Pad it 3 pixels all around.
    5. Normal paragraphs contain the speeches of the characters and the stage directions (for which we'll create a special class).
       Make the margins as follows: top 0, left 100 pixels, right 30 pixels;
       Align the text to justify.
    6. Blockquotes have these margins: top 0, left 200 pixels, right 30 pixels;
       font style is italic.
       

       Links to show the Title and Preface Divisions for a different play in three browsers:
       Internet Explorer 6.0	Netscape Navigator 7.1	Opera 6.2

11. Create a class for the stage directions:
    Make a thin, solid border around it;
    Set the background color to light yellow, hex code #FFC;
    Color it "Maroon";
    Pad it with 3 pixels on the left and right only;
    Give it a font family of Georgia, "Times New Roman", or serif;
    Make the font style italic and font size 80%.
    

1. Create internal anchor links from the navigation section to beginning of the Preface, the Cast and each of the Scenes. You'll need to put in both the href anchor and the name anchor.
2. Create divisions within the document as shown by the comments. Each division should have its ID set to the same name as the name of the divisions you created in the stylesheet. For example, <div id="navigation">
3. Find the stage directions, which are all enclosed in [square brackets]. Use appropriate tags to mark these as stage direction class, using the name of the class you created in the stylesheet.
   
   Tip: There are many stage directions, so using find-and-replace is the only practical way to locate them and mark them up. However, some complete paragraphs, marked up like this:
   <p>[Enter CORIN]</p>
   while others are part of a paragraph
   <p> [Aside] A material fool</p>
   and should be marked up differently.
   When they occur inside a paragraph, stage directions have a space in front of the first square bracket; when they are complete paragraphs, the square bracket immediately follows the closing angle bracket at the end of the <p> tag.
4. Validate your file to make sure it's valid XHTML 1.0 transitional.

When you're done, double-check that the assignment meets the specifications above, and that all links are functional.

Upload your work to your WCC student Website, and send email to the instructor with the URIs for both x21j.htm and drama.css. Be sure your email meets the formal requirements: name, class, section and exercise (X21j), and that it follows standard business-email practice.