title: Coloring the text depending on numeric value using css
body: <p>I want to color text based on its value, using css.</p>
  
  <pre><code>ie. if value is less than 20 --&gt; red ,
      if value is between 20 - 60 --&gt; orange , 
      if value is greater than 60 to 100--&gt; green.
  </code></pre>
  
  <p>I don't want to add any class in the template depending on the value.</p>
  
  <p>I found this Link: <a href="https://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript">How do I change the background color with JavaScript?</a> but it doesn't suffice as I have too many values to apply color to.
  Also I want it to be more maintainable when adding new values in future.</p>