Experiment 7
— print (last updated: Jul 6, 2009) — print

1. Open a new document in HTML-Kit and type or copy this content within the body section:

   <h2>H2 Header</h2>
   
   Outside any header.
   
   <h3>A</h3>
   <h3>B</h3>
   <h3>C</h3>
   <h3>D</h3>
   <h3>E</h3>
   <h3>F</h3>
   
   <hr />
   
   

2. Position the cursor before the ending head tag. Open up a new line after the title tags and before the ending head tag like this:

   <title>Untitled</title>
   
   </head>
   

   Position the cursor in this empty line. Select the Style tab and click the first icon from the left, the style icon. It should create this:

   <style type="text/css">
   <!-- 
    
   -->
   </style>
   

3. Type these rules in the opened-up area, one at a time. After each rule is added, check Preview to see the effect.

   body { 
      background-color: #CCCCCC; 
      padding: 0px 20px 0px 20px;
   }
   
   h2 { 
      color: red; 
   }
   
   h3 { 
      text-align: center; 
      color: magenta; 
   }
   
   

   When you use HTML-Kit, be careful to differentiate the curly brackets "{" and "}" from the respective left and right parentheses, "(" and ")". The standard small font makes these characters almost indistinguishable.
4. Add these rules to the style section:

   h3.yb { 
     background-color: yellow; 
   }
   
   .ar { 
     text-align: right; 
     text-decoration: underline;
   }
   
   

   and add these class attribute settings to the document:

   <h3 class="yb">C</h3>
   <h3 class="ar">D</h3>
   <h3 class="yb ar">E</h3>
   <h3 class="yb ar" style="text-align:left">F</h3>
   
   

   HTML-Kit should provide an assist when you select the style attribute; the classes listed should be available from the menu.