Styling Web pages with CSS-2 |  |
Styling Web pages with CSS-2 | |
Before reviewing the many properties in CSS, we need to survey some of the common types of values used by properties.
Wherever a property can be set to a value representing a physical dimension, such as a height or a width, there are several ways to specify them.
These units are used in property definitions:
| Unit | Description |
|---|---|
mm | Millimeters |
cm | Centimeters |
in | Inches |
pt | Printer's points, about 1/72" |
pc | Printer's pica, about 1/6" |
em | An em is the current font size. For example, if the font size is 14pt, two ems is 28pt. |
px | One pixel on the display. |
You can also specify dimensions as a percentage. For
example, specifying the left margin as 10%
would mean the left margin would be a tenth of the total
screen width.
Whenever possible, prefer relative units (ems and percentages) over fixed units. Consider the plight of readers whose eyes are aging and not as sharp as they were as a youngster. They can read your page if they increase the font size. Percentage units can help your layout adjust to different screen sizes.
There are several ways of describing colors in Cascading Style sheets.
There are sixteen predefined color names:
aqua,
black,
blue,
fuchsia,
gray,
green,
lime,
maroon,
navy,
olive,
purple,
red,
silver,
teal,
yellow, and
white.
You can specify colors as percentages in the RGB
(red-green-blue) color system. For example, this rule
would display all h1 headings in cyan:
h1 { color: rgb(0%, 100%, 100%); }
where the first number is red, the second green, and the third blue.
The rgb() notation also allows numbers
in the range 0–255. For example, rgb(255, 255, 0) is pure yellow (pure red
plus pure green).
You can also define the colors using a string of the
form #rgb or #rrggbb,
using hexadecimal digits to specify the relative amount
of red, green and blue. For example, color #ff5500 has full red, a little green, and no
blue.
Any color in the #rgb form is the same
as if each of the three digits were doubled. For
example, #f50 is the same as #ff5500.
Most property values in CSS are keywords. However,
sometimes it is necessary to specify a string constant.
You can use either double-quotes "…" or
single-quotes '…' to enclose string
constants.
For example, to import a stylesheet named "basic.css" into your stylesheet, you would use
this at-rule:
@import "basic.css";
To include a quote symbol inside a string, precede it
with a backslash, e.g., 'don\'t' is the
same string as "don't".
You can include any character value inside a string by
encoding it as “\”, where hhhh"don't" could also be represented as 'don\27t'.
A URI describes some resource on the World Wide Web.
The best way to identify such a resource is to use the
url function, which has this format:
url("URI")
where URI
For example, suppose you have a background image named
lawn.jpg in the same directory as
all your pages. This rule would place it as the page
background:
body { background-image: url("lawn.jpg"); }
You can, of course, use a full URI to refer to any image on the Web.
If you need to assign serial numbers to some sequence of elements, such as bullets in a bullet list, sections in a chapter, or similar applications, CSS allows you to declare counters that hold such numbers.
Counters are created by using the counter-reset property. For details on the
creation and application of counters, see
Section 16, “The content property: Specifying
content in pseudo-elements”.
To describe an angle, use a signed number immediately followed by one of the three angle specifiers:
deg for degrees.
grad for grads.
rad for radians.
For example, audio playback defines an azimuth property that specifies the apparent
source of a sound in the stereo image. Azimuth zero is
straight ahead; 90° is purely in the right ear;
-90° is in the left ear; and so on. So, to
specify that the azimuth of a spoken h1
heading is halfway between straight ahead and the
left ear, you would use this rule:
h1 { azimuth: -45deg; }
CSS time intervals are specified as a number followed
immediately by either ms for milliseconds
or s for seconds.
For example, if you want the speech synthesizer to insert a fifty-millisecond delay before speaking an h3 heading, use this rule:
h3 { pause-before: 50ms; }
Frequencies in CSS are specified as a number followed
immediately by suffix Hz for Hertz, or
kHz for kiloHertz. (Note that CSS is
case-insensitive, so you don't have to capitalize them as
carefully as they are shown here.)
For example, to specify that a speech synthesizer should
produce a voice with a frequency around 180 Hertz for
title elements, you would use this rule:
title { pitch: 180Hz; }