<!DOCTYPE html>
<html>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-7">
 <head>
 <title>Color</title>
 <link href="example_color.css" type="text/css" rel="stylesheet"
/>
 </style>
 </head>
 <body>
 body {
background-color: silver;
color: white;
padding: 20px;
font-family: Arial, Verdana, sans-serif;}
h1 {
background-color: #ffffff;
background-color: hsla(0,100%,100%,0.5);
color: #64645A;
padding: inherit;}
p {color: white;
padding: 5px;
margin: 0px;}
p.one  {
background-color: #a9a9a9;}
p.two{
background-color: #aaffc3;}
p.three {
background-color: #fffac8;}
p.four {
background-color: #f58231;}
p.five {
background-color: #ffd8b1;}
p.six{
background-color: #fabebe;}
p.seven{
background-color: rgb(245,176,204);}
p.eight {
background-color: #e6194b}
p.nine {
background-color: #ffe119;}
p.ten  {
background-color: #3cb44b;}
p.eleven{
background-color: green;}
p.twelve {
background-color: #42d4f4;}
p.thirteen {
background-color: blue;}
p.fourteen {
background-color: #911eb4}
 <h1>pH Scale</h1>
 <p class="fourteen">14.0 </p>
 <p class="thirteen">13.0</p>
 <p class="twelve">12.0</p>
 <p class="eleven">11.0</p>
 <p class="ten">10.0</p>
 <p class="nine">9.0</p>
 <p class="eight">8.0</p>
 <p class="seven">7.0 </p>
 <p class="six">6.0</p>
 <p class="five">5.0</p>
 <p class="four">4.0</p>
 <p class="three">3.0</p>
 <p class="two">2.0</p>
 <p class="one">1.0</p>
 <p class="zero">0.0 </p>
 </body>
</html>