Some questions came up about the meter element.
This is handy, but the basic functionality is, well, basic. Everyone has seen some fancier use that isn’t actually included in the regular meter element attributes that are described in the textbook.
So how did “they” do that? Here are some resources that describe additional tips and tricks.
* color – If the value is between min and low, the meter is yellow. If the value is the low value, the high value, or anywhere in between, the meter is green. If the value is between high and max, it will be red. Currently the optimum value has no noticeable effect. Note – this is not supported by all browsers. http://www.wufoo.com/html5/elements/1-meter.html
If you want more different colors, you will likely have to dig pretty deeply into how browsers actually work – here is a sample discussion that has been going on for years…
Here is the source of the code quoted…
All of this is way beyond the scope of an introductory HTML and CSS course.
Thanks for asking. ;o)