How to make heading appear in different colors

Problem :

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 http://imgur.com/tiU0z

HTML

  <html>
  <head>
  <link rel="stylesheet" type="text/css" href="body.css"/>
  </head>
  <body>
  <h1>Bully-Free Zone<br/> Bully-Free Zone <br/> Bully-Free Zone <br/> 
  Bully-Free Zone <br/>
  Bully-Free Zone </h1>

  <h2>"Online harassment lhas an off-line impact"</h2>
  <!--Menu-->
  <div id="nav">
  <a href="mainpage.htm" class="nav-link">HOME</a>
  <a href="page1.htm" class="nav-link">ASSISTANCE</a>
  <a href="page2.htm" class="nav-link">CYBER-BULLYING SIGNS</a> 
  <a href="page3.htm" class="nav-link">REPORT</a>
  </div>
  <div id="content"> Your Content Here Your Content Here Your Content Here <br/>
  Your Content Here Your Content Here<br/>
  Your content here </div> 
  <img src="nobullying.jpg" id="picture"/>
  <!--Copyright-->
  <div id="center">
  <td> Copyright © 2012 Bully-FreeZone.net</td>
  </div>

  </body>
  </html>

CSS:

  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;
  }

Solution :

Add a span around each of the titles and assign a different class to each one. Then you can change the colors via CSS.

<h1>
   <span class="gray1">Bully-Free Zone</span><br/>
   <span class="gray2">Bully-Free Zone</span><br/>
   <span class="gray3">Bully-Free Zone</span><br/>
   <span class="gray2">Bully-Free Zone</span><br/>
   <span class="gray1">Bully-Free Zone</span>
</h1>

And the CSS...

.gray1 { color: #efefef; }
.gray2 { color: #aaaaaa; }
.gray3 { color: #999999; }

CSS Howto..

How to make a hyperlink navigation bar active in CSS or javascript?

Try this: function clicka(num) { var nav = document.getElementById('navbar'), c = nav.children, l = c.length, i; for( i=0; i<l; i++) c[i].className = "unactive"; document.getElementById(num).className = "active"; } // <ul id="navbar"><li...>...</li></ul>...

How to make each element to be fully independend with CSS?

The problem is that you are not closing your wrapping <div> tags. This should work: <div class="sidebarimagesupermsg"> <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" /> <h3 class="h3sidebarimagesupermsg"><span>super<span...

Something like this perhaps?: HTML: <div id="header">LE BON REFLEXE</div> CSS: div#header { display:inline-block; width:auto; height:20px; padding:5px 20px 5px 10px; background:none #3476A9; color:#fff; font-weight:bold; font-family:arial; position:relative; overflow:visible; } div#header:after { content:'';...

If you are using JavaScript, this code fragment will distinguish Safari from Chrome: if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { $('html').addClass('safari-only'); } For a CSS-only hack, try this...