title: How to make heading appear in different colors
body: <p>I want my title "Bully-Free Zone" to appear in different colors. I put five titles in order to assign a color for each so that they can kind of look like a gradient. For example, the firs title I want to appear light gray, the second one gray, the third one dark grey, the fourth one gray, and the fifth one light gray. How do I go about assigning different colors because they are all h1  <a href="http://imgur.com/tiU0z" rel="nofollow">http://imgur.com/tiU0z</a></p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;html&gt;
    &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="body.css"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1&gt;Bully-Free Zone&lt;br/&gt; Bully-Free Zone &lt;br/&gt; Bully-Free Zone &lt;br/&gt; 
    Bully-Free Zone &lt;br/&gt;
    Bully-Free Zone &lt;/h1&gt;
  
    &lt;h2&gt;"Online harassment lhas an off-line impact"&lt;/h2&gt;
    &lt;!--Menu--&gt;
    &lt;div id="nav"&gt;
    &lt;a href="mainpage.htm" class="nav-link"&gt;HOME&lt;/a&gt;
    &lt;a href="page1.htm" class="nav-link"&gt;ASSISTANCE&lt;/a&gt;
    &lt;a href="page2.htm" class="nav-link"&gt;CYBER-BULLYING SIGNS&lt;/a&gt; 
    &lt;a href="page3.htm" class="nav-link"&gt;REPORT&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt; Your Content Here Your Content Here Your Content Here &lt;br/&gt;
    Your Content Here Your Content Here&lt;br/&gt;
    Your content here &lt;/div&gt; 
    &lt;img src="nobullying.jpg" id="picture"/&gt;
    &lt;!--Copyright--&gt;
    &lt;div id="center"&gt;
    &lt;td&gt; Copyright © 2012 Bully-FreeZone.net&lt;/td&gt;
    &lt;/div&gt;
  
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  body{/* IE10 */ 
    background-image: -ms-linear-gradient(top left, #555BB5 0%, #FC5B5B 100%);
  
    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top left, #555BB5 0%, #FC5B5B 100%);
  
    /* Opera */ 
    background-image: -o-linear-gradient(top left, #555BB5 0%, #FC5B5B 100%, );
  
  
  
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top left, #555BB5 0%, #FC5B5B 100%);
  
    /* Proposed W3C Markup */ 
    background-image: linear-gradient(top left, #555BB5 0%, #FC5B5B 100% );
    }
    h1{color:black;text-align:center;font-size:40px;font-family:broadway;
    }
    h2{color:black; text-align:center;font-size:27px;font-style:italic;}
  
    /*Menu Buttons Orange*/
    a.nav-link:link
    {
    color: black;
    text-decoration: underline;
  
    }
    a.nav-link:visited
    {
    color: black;
    text-decoration: none;
    }
    a.nav-link:hover
    {
    color:black;
    text-decoration: overline;
    }
    a.nav-link:active
    {
    color: black;
    text-decoration: none;
    }
  
    /*Menu button styles*/
    #nav{text-align:center; font-family:"Bernard MT Condensed"; font-size:30px;
    }
    #center{text-align:center;}
    #picture{background-image: url(nobullying.jpg);
    width:200px;
    height:400px;
    position:absolute;
    left:10px;
    Top:190px;
  bottom:10px;
    }
    #content {
    text-align:left;
    width:550px;
    margin:20 auto;
    }
  </code></pre>