<html>
  <head>
    <style>
      /* Uncomment #1 - Tag selector
      div { 
        border: 5px solid black;
        margin-bottom: 20px;
        padding: 10px;
        width: 50%;
      }
      */

      /* Uncomment #2 - Class selector
      .border { border: 5px dotted #D7A3EE }
      */

      /* Uncomment #3 - Class selector chaining
      .green { border: 5px solid #689A09 }
      */
      
      /* Uncomment #4 - Id trumps them all
      #rainbow { 
        border: 10px solid;
        border-color: #4E1DD9 #D7A3EE #ED240E #689A09; 
        border-radius: 5px;
      }
      */
    </style>
  </head>   
  <body>
    <h1>CSS Selector Practice</h1>
    <div class="border green" id="rainbow">
      <p>I am a paragraph inside the div with a class name of "border".
      I also have a second class name "blue", and an Id of "pink"</p>
    </div>  
    <div class="border">
      <p>I am a paragraph inside the div with a class name of "border"</p>
    </div>  
  </body>
</html>