Edit in JSFiddle

<div class="wrap">
  <div class="h1">1 Artificial surfaces</div>
  <div class="h2">1.1 Urban fabric</div>
  <div class="h3" id="c_111">1.1.1 Continuous urban fabric</div>
  <div class="h3" id="c_112">1.1.2 Discontinuous urban fabric</div>
  <div class="h2">1.2 Industrial, commercial and transport units</div>
  <div class="h3" id="c_121">1.2.1 Industrial or commercial units</div>
  <div class="h3" id="c_122">1.2.2 Road and rail networks and associated land</div>
  <div class="h3" id="c_123">1.2.3 Port areas</div>
  <div class="h3" id="c_124">1.2.4 Airports</div>
  <div class="h2">1.3 Mine, dump and construction sites</div>
  <div class="h3" id="c_131">1.3.1 Mineral extraction sites</div>
  <div class="h3" id="c_132">1.3.2 Dump sites</div>
  <div class="h3" id="c_133">1.3.3 Construction sites</div>
  <div class="h2">1.4 Artificial, non-agricultural vegetated areas</div>
  <div class="h3" id="c_141">1.4.1 Green urban areas</div>
  <div class="h3" id="c_142">1.4.2 Sport and leisure facilities</div>
  <div class="h1">2 Agricultural areas</div>
  <div class="h2">2.2 Arable land</div>
  <div class="h3" id="c_211">2.1.1 Non-irrigated arable land</div>
  <div class="h3" id="c_212">2.1.2 Permanently irrigated land</div>
  <div class="h3" id="c_213">2.1.3 Rice fields</div>
  <div class="h2">2.2 Permanent crops</div>
  <div class="h3" id="c_221">2.2.1 Vineyards</div>
  <div class="h3" id="c_222">2.2.2 Fruit trees and berry plantations</div>
  <div class="h3" id="c_223">2.2.3 Olive groves</div>
  <div class="h2">2.3 Pastures</div>
  <div class="h3" id="c_231">2.3.1 Pastures</div>
  <div class="h2">2.4 Heterogeneous agricultural areas</div>
  <div class="h3" id="c_241">2.4.1 Annual crops associated with permanent crops</div>
  <div class="h3" id="c_242">2.4.2 Complex cultivation patterns</div>
  <div class="h3" id="c_243">2.4.3 Land principally occupied by agriculture, with significant areas of natural vegetation</div>
  <div class="h3" id="c_244">2.4.4 Agro-forestry areas</div>
  <div class="h1">3 Forest and seminatural areas</div>
  <div class="h2">3.1 Forests</div>
  <div class="h3" id="c_311">3.1.1 Broad-leaved forest</div>
  <div class="h3" id="c_312">3.1.2 Coniferous forest</div>
  <div class="h3" id="c_313">3.1.3 Mixed forest</div>
  <div class="h2">3.2 Scrub and/or herbaceous vegetation associations</div>
  <div class="h3" id="c_321">3.2.1 Natural grasslands</div>
  <div class="h3" id="c_322">3.2.2 Moors and heathland</div>
  <div class="h3" id="c_323">3.2.3 Sclerophyllous vegetation</div>
  <div class="h3" id="c_324">3.2.4 Transitional woodland-shrub</div>
  <div class="h2">3.3 Open spaces with little or no vegetation</div>
  <div class="h3" id="c_331">3.3.1 Beaches, dunes, sands</div>
  <div class="h3" id="c_332">3.3.2 Bare rocks</div>
  <div class="h3" id="c_333">3.3.3 Sparsely vegetated areas</div>
  <div class="h3" id="c_334">3.3.4 Burnt areas</div>
  <div class="h3" id="c_335">3.3.5 Glaciers and perpetual snow</div>
  <div class="h1">4 Wetlands</div>
  <div class="h2">4.1 Inland wetlands</div>
  <div class="h3" id="c_411">4.1.1 Inland marshes</div>
  <div class="h3" id="c_412">4.1.2 Peat bogs</div>
  <div class="h2">4.2 Maritime wetlands</div>
  <div class="h3" id="c_421">4.2.1 Salt marshes</div>
  <div class="h3" id="c_422">4.2.2 Salines</div>
  <div class="h3" id="c_423">4.2.3 Intertidal flats</div>
  <div class="h1">5 Water bodies</div>
  <div class="h2">5.1 Inland waters</div>
  <div class="h3" id="c_511">5.1.1 Water courses</div>
  <div class="h3" id="c_512">5.1.2 Water bodies</div>
  <div class="h2">5.2 Marine waters</div>
  <div class="h3" id="c_521">5.2.1 Coastal lagoons</div>
  <div class="h3" id="c_522">5.2.2 Estuaries</div>
  <div class="h3" id="c_523">5.2.3 Sea and ocean</div>
.wrap {
margin: 0px;
.h1, .h2, .h3 {
font-family: Verdana;
padding-top: 5px;       
padding-bottom: 5px;
.h1, .h2 {
font-weight: bold;
.h1 {
font-size: 1.7em;
.h2 {
font-size: 1.25em;
.h3 {
font-size: 1.1em;
width: auto;
height: auto;

#c_111 {
background-color: rgb(230,000,077);
#c_112 {
background-color: rgb(255,000,000);
#c_121 {
background-color: rgb(204,077,242);
#c_122  {
background-color: rgb(204,000,000);
#c_123 {
background-color: rgb(230,204,204);
#c_124  {
background-color: rgb(230,204,230);
#c_131  {
background-color: rgb(166,000,204);
#c_132  {
background-color: rgb(166,077,000);

#c_133  {
background-color: rgb(255,077,255);
#c_141 {
background-color: rgb(255,166,255);
#c_142 {
background-color: rgb(255,230,255);
#c_211 {
background-color: rgb(255,255,168);
#c_212 {
background-color: rgb(255,255,000);
#c_213 {
background-color: rgb(230,230,000);
#c_221 {
background-color: rgb(230,128,000);
#c_222 {
background-color: rgb(242,166,077);
#c_223 {
background-color: rgb(230,166,000);
#c_231 {
background-color: rgb(230,230,077);
#c_241 {
background-color: rgb(255,230,166);
#c_242 {
background-color: rgb(255,230,077);
#c_243 {
background-color: rgb(230,204,077);
#c_244 {
background-color: rgb(242,204,166);
#c_311 {
background-color: rgb(128,255,000);
#c_312 {
background-color: rgb(000,166,000);
#c_313 {
background-color: rgb(077,255,000);
#c_321 {
background-color: rgb(204,242,077);
#c_322 {
background-color: rgb(166,255,128);
#c_323 {
background-color: rgb(166,230,077);
#c_324 {
background-color: rgb(166,242,000);
#c_331 {
background-color: rgb(230,230,230);
#c_332 {
background-color: rgb(204,204,204);
#c_333 {
background-color: rgb(204,255,204);
#c_334 {
color: white;
background-color: rgb(000,000,000);
#c_335 {
background-color: rgb(166,230,204);
#c_411 {
background-color: rgb(166,166,255);
#c_412 {
background-color: rgb(077,077,255);
#c_421 {
background-color: rgb(204,204,255);
#c_422 {
background-color: rgb(230,230,255);
#c_423 {
background-color: rgb(166,166,230);
#c_511 {
background-color: rgb(000,204,242);
#c_512 {
background-color: rgb(128,242,230);
#c_521 {
background-color: rgb(000,255,166);
#c_522 {
background-color: rgb(166,255,230);
#c_523 {
background-color: rgb(230,242,255)