Rock, Paper, Scissors - The Essential Guide to HTML5 - page 269

Just to show you how these things are done, well use styles for the score field. We set up two styles, one
for the form, and one for the input field.
form {
color: blue;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:16px;
}
input {
text-align:right;
font:inherit;
color:inherit;
}
We set the color for the text in the form to blue, and specified the font using the font-family property.
This is a way to specify a particular font and backups if that font doesnt exist on the client computer. This
is a powerful feature because it means you can be as specific as you want in terms of fonts and, with
work, still make sure that everyone can read the material.
Tip: You can research online for Web-safe fonts to see which fonts are widely available. Then you
can pick your favorite font for the first choice, one of the Web-safe fonts for the second, and make
the last choice either serif or sans-serif. You can even specify more than three choices if you wants.
Check out http://en.wikipedia.org/wiki/Web_typography for ideas.
In this style, we specify the font named Georgia , then "Times New Roman" , then Times , and then
whatever the standard font with serifs is on the computer. Serifs are the little extra flags on letters. The
quotation marks around Times New Roman are necessary because the name involves multiple terms.
Quotation marks wouldnt be wrong around the other font names, but they arent necessary. We also
specify the size as 16 pixels. The input field inherits the font, including size, and the color from the form
element, its parent. However, because the score is a number, we use the text-align property to indicate
right alignment in the field. The label Score is in the form element. The actual score is in the input
element. Using the inherit setting for the input style properties makes the two display in the same font,
size, and color.
The value in the input field will be extracted and set using its name, score . For example,
newscore = Number(document.f.score.value);
Number is required here to produce the number represented by the text in the field; that is 0 as opposed to
"0" (the character). If we left the value as a string and the code used a plus sign to add 1 to a string, this
would not be addition; it would instead be the concatenation of strings. (This is termed operator
overloading , by the way: the plus sign indicates different operations depending on the data type of the
operands.) Concatenating a "1" onto a "0" would yield "01". You might think this is okay, but the next time
around, we would get "011" or "010" or "01-1". Ugh. We don't want that, so we write the code to make sure
the value is converted to a number.
To place an adjusted new score back into the field, the code is
document.f.score.value = String(newscore);