colors.css

.js-colors div {
  font-size: 20px;
  font-weight: bold;
}

.js-colors div.red {
  color: red;
  background-color: burlywood;
  border-color: red;
}

.js-colors div.green {
  color: green;
  background-color: darkseagreen;
  border-color: darkgreen;
}

.js-colors div.blue {
  color: blue;
  background-color: lightblue;
  border-color: darkblue;
}

.js-colors div.cyan {
  color: cyan;
  background-color: lightcyan;
  border-color: darkcyan;
}

.js-colors div.magenta {
  color: magenta;
  background-color: lightpink;
  border-color: darkmagenta;
}

.js-colors div.yellow {
  color: yellow;
  background-color: lightgoldenrodyellow;
  border-color: darkgoldenrod;
}

.js-colors div.error {
  color: red;
  background-color: burlywood;
  border-color: darkred;
}

File

modules/js_example/css/colors.css

View source 
  1. .js-colors div {

  2.   font-size: 20px;

  3.   font-weight: bold;

  4. }

  5. 

  6. .js-colors div.red {

  7.   color: red;

  8.   background-color: burlywood;

  9.   border-color: red;

  10. }

  11. 

  12. .js-colors div.green {

  13.   color: green;

  14.   background-color: darkseagreen;

  15.   border-color: darkgreen;

  16. }

  17. 

  18. .js-colors div.blue {

  19.   color: blue;

  20.   background-color: lightblue;

  21.   border-color: darkblue;

  22. }

  23. 

  24. .js-colors div.cyan {

  25.   color: cyan;

  26.   background-color: lightcyan;

  27.   border-color: darkcyan;

  28. }

  29. 

  30. .js-colors div.magenta {

  31.   color: magenta;

  32.   background-color: lightpink;

  33.   border-color: darkmagenta;

  34. }

  35. 

  36. .js-colors div.yellow {

  37.   color: yellow;

  38.   background-color: lightgoldenrodyellow;

  39.   border-color: darkgoldenrod;

  40. }

  41. 

  42. .js-colors div.error {

  43.   color: red;

  44.   background-color: burlywood;

  45.   border-color: darkred;

  46. }