Using Style Sheets
Review the W3C CSS standard recommendation.Values
Although properties vary in what values they accept, there are some common, distinct value types and some general rules for expressing certain types of values.
Many properties permit keywords like thin, medium
and
thick
for border widths, or black
and
white
for color properties or sans-serif
or
monospace
for font names. Quotes should never be used around
keywords.
Color values can also be expressed in RGB hex format, e.g.
#80a0c0
or #ffff00.
Or they can be specified using
decimal values in the form rgb(128, 160, 192).
System colors can
be specified using keywords like ButtonFace, InactiveBorder
or
MenuText.
For properties that expect a URI the notation is
url("http://www.example.net/bg.gif")
- with or without the
quotation marks. Either relative or absolute URLs can be used but note that for
external style sheets, the URL is relative to the style sheet's location, not
the page's.
Strings
Strings can be delimited by either double or single quotes. To insert the same type of quote within the string, use the escape character ('\').
'A string with "double" quotes.' "A string with 'single' quotes." "A string with \"double\" quotes." 'A string with \'single\' quotes.'
Special characters can be included using the escape character followed by a hexadecimal value representing the Unicode character code. For example,
"A string with a left and right \0000ABdouble arrow\0000BB quotes."
represents "A string with a left and right «double arrow» quotes." Note that leading zeros are used to create a full, six-digit hexadecimal value. Otherwise "\ABdouble" would be interpreted as the character 0xABD followed by "ouble." You might want to make a habit of always using six digits to avoid surprises.
To embed a newline character in a string, use the escape sequence "\00000A" and to include a backslash, use the "\\" escape sequence.
Fonts
Specifying a font face can be tricky because a browser can only display the
fonts that are installed on the user's machine. CSS defines five generic fonts
specified as keywords: serif, sans-serif, cursive, fantasy
and monospace.
Browsers should map these to an appropriate font
installed on the user's system.
A browser will also look at other font characteristics, like
font-weight
and font-style,
to select a particular
variation of an installed font.
As with colors, CSS also provides keywords to match system fonts. These
include fonts for interfaces and controls like menu, caption
and
icon.
You can also specify font names. When specifying a font face, either with
the font-family
property or the shorthand font
property, you can provide a list of values, separated by commas (',').
font-family: "Arial", "Helvetica", sans-serif;
The browser will search for a matching available font in the order given, using the first it finds. This is especially useful when you consider that while a certain font may be common on one platform, it may not exist on others. By specifying a group of similar, platform-dependent fonts, you can get a more consistent look across platforms.
For the same reason, it's also a good idea to include one of the generic font face keywords at the end of any font list.
Note that font names must be enclosed in quotes if they contain any spaces.
Lengths and Units
Many properties expect size or dimension values, like font-size
or width
and height.
These usually consist of a
number and a unit and are commonly referred to as lengths. The numeric
values allowed (integer, real, positive, negative, etc.) depends on the
individual property.
Units are divided into two categories, absolute and relative. The absolute units are:
- in, cm, mm: inches, centimeters and millimeters.
- pt, pc: points and picas. 72 points equals one inch and one pica equals 12 points.
With absolute units, the browser must account for the resolution of the output medium (screen resolution, printer dpi, etc.) to get the desired length For example, the following
#square { background-color: #c0c0c0; width: 2in; height: 2in; } ... <div id="square"></div>
should produce a gray box exactly two inches square on any monitor or printer.
Absolute units are well suited for print styles where page dimensions are known in advance (e.g., 8½" x 11") but are not usually used for normal screen viewing (except maybe for font sizes) since users have a variety of monitor sizes and display resolutions. Also, browsers tend to miscalculate or assume an incorrect display resolution.
Relative units relate to some other length value. The relative units are:
- em: relative to the font size, historically it refers to the width of the letter 'M' for a given font.
- ex: relative to the font size, typically equal the height of a lowercase 'x' for a given font.
- px: pixels.
So given this code,
#text { font-family: sans-serif; font-size: 12pt; background-color: #c0c0c0; width: 20em; } ... <div id="text">Some text.</div>
you would get a gray box 240 points wide.
It may seem counterintuitive that the px
unit is considered
relative. While a browser may assign one screen pixel per px
unit,
it will usually scale the value for a higher resolution device like a
printer.
For example, a font size of 48px
might take up half an inch on
a 96 dpi monitor, but on a 600 dpi printer it would be less than a tenth of an
inch tall, far too small to be easily read. So browsers generally scale content
accordingly when printing a page.
They may also scale pixel units based on monitor resolution to account for differences between say, a 72 dpi monitor vs. a 96 dpi monitor.
Percentages
Some length values may be expressed as percentages (e.g., 50%). Like relative units, a percentage value is calculated using some other value. For example,
h1 { font-size: 200% }
would make H1 text twice the size of the page's default font since it would
normally inherit the font-size
of the BODY tag.