How to make heading appear in different colors

Tags: html,css

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


  <link rel="stylesheet" type="text/css" href="body.css"/>
  <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>
  <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 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"/>
  <div id="center">
  <td> Copyright © 2012</td>



  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% );
  h2{color:black; text-align:center;font-size:27px;font-style:italic;}

  /*Menu Buttons Orange*/
  color: black;
  text-decoration: underline;

  color: black;
  text-decoration: none;
  text-decoration: overline;
  color: black;
  text-decoration: none;

  /*Menu button styles*/
  #nav{text-align:center; font-family:"Bernard MT Condensed"; font-size:30px;
  #picture{background-image: url(nobullying.jpg);
  #content {
  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.

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

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?

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

    How can I resize svg using CSS?

    How to apply css style for HTML element using Mootools

    How to use JavaScript OnResize with delay or less processing intensive

    How to draw a line with css and show text or image on it

    How to create
    with special form in CSS or Javascript

    How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

    How to align things responsive html CSS

    How do you deal with the designing issues of a website?

    CSS: how to keep my text fixed wrt to window size?

    ExtJS - How to style disabled buttons?

    How to force margins to be ready from js before document ready

    CSS - how to style a footer

    How to set CSS property in adjacent elements?

    How to make an svg masked image compatible with Internet Explorer

    What to do to align text as shown in the image using HTML and CSS?

    How to customize Subscribe2 button appearance in WordPress?

    how can I use the CSS selector to solve this [duplicate]

    How can I differentiate Safari and Chrome in CSS?

    How can I style this span for a quote without causing this layout problem?

    How to persist checking the screen width in Javascript

    how to set css and html in textarea [closed]

    How to reference embedded images from CSS?

    How to @import without including all CSS but just the @extends ones

    Using CSS how best to display name value pairs?

    How to know if an element's width is absolute or relative?

    How to increase constant space between li inline-block list elemets?

    How can I toggle the background color of the body of my HTML document, with one button?

    How to refactor an existing project to use Compass?