Learn Web Design

An element whose function is of a button has been created using JavaScript or another scripting language. The user's expectations regarding how a control should look are being met by making the control look just like a button.

The following example of code accomplishes the task:

a.widget {font: caption;}

By using this method, the font of any a element with a class of widget is set to be of the same style, weight, size and family as the text from the captioned controls, such as the button.

There are six system font keywords in CSS2:

• Status bar. This keyword defines the font styles which are used for the text in window status bars.
• Menu. This keyword is used to set the font style for the drop-down menus and the actual menu list fonts.
• Icon. The fonts used for the labels of the operating system's icons (the ones used for the files and folders for example) are set using this keyword.
• Caption. The caption command in CSS defines the fonts used for the controls (buttons and drop-downs).
• Message-box. This is used to define the fonts used for dialog boxes.
• Small-caption. This keyword defines the font styles used for labeling small captioned notes.

These values can be used only together with the font property. They are also their own form of shorthand. Lets take as an example a computer where the operating system show the icon labels as 10 pixels Geneva, without any other effects such as bolding, italics or small caps.

Because CSS is pretty unique in this resort and working with these settings is a bit more difficult than usual because a simple value as font can hold a whole array of other values.

One may want to use the font style as icon labels. But not also that, but the programmer may want for he font to appear bold, even if the icon labels are not set to bold on the user's computer.

By writing the code as:

body {font: icon; font-weight: bold;}

The user agent sets the body element's font to be exactly like the icon labels with the first declaration. After that, the weight of that font is modified with the second. The bolding would be lost if the order of those operations were reversed, the font's declaration value would override the fonts value from the second command.

A particularity of CSS is that it won't let the programmer fix a generic font family. Usually the recommendation is for the author to write something similar to this next code line Geneva, sans-serif; if the browser found on the client's computer does not support the font selected.

In this case it is not required anymore. If the same font used to display anything on the computer will be extracted by the user agent, it will be available for the client's browser.

There can be cases when that particular font is not at all available or the user agent cannot determine it in any way. In these situations, the user agent can take a guess at using the most appropriate set of fonts. If the caption font is determined, the font used for small-caption will be the same as the first one, while reducing its size. And in the situations the font cannot be determined by any means, it is up to the user agent to use its default font.