This section describes some of the common CSS properties,
including the values that each property can take.
- font-family:
-
Controls the overall font family
(the general style) for text within an element.
The value can be a generic font type, for example,
monospace or serif, or it can be a specific font family
name, for example, Courier or Times. If a specific
font is specified, it is usually a good idea to also include (after a
comma) a generic font as well in case the person viewing the result
does not have the specific font on their computer. An example is shown
below:
font-family: Times, serif
This means that a Times font will be used if it is available, otherwise
the browser will choose a serif font that is available.
- font-style:, font-weight:, and font-size:
-
Control
the detailed appearance of text. The style can be italic,
the weight can be bold, and the size can be large or
small.
There are a number of relative values for size (they go down to
xx-small and xx-large), but it is also possible to specify
an absolute size, such as 24pt.
- color: and background-color:
-
Control the foreground
colour (e.g., for displaying text),
and the background colour for an element.
For specifying the colour value, there are a few basic colour names,
e.g., black, white, red, green, and blue,
but for anything else it is necessary to specify a red-green-blue (RGB)
triplet. This consists of an amount of red, an amount of green, and an
amount of blue. The amounts can be specified as percentages so that,
for example, rgb(0%, 0%, 0%) is black and
rgb(100%, 100%, 100%) is white, and Ferrari red is
rgb(83%, 13%, 20%).4.1
- text-align:
-
Controls the alignment of text within
an element, with
possible values left, right, center, or justify.
This property only makes sense for block-level attributes.
- width: and height:
-
Allows explicit control of the
width or height of an element. By default, these are the amount
of space required for the element. For example, a paragraph of
text expands to fill
the width of the page and uses as many lines as necessary, while an
image has an instrinsic size (number of pixels in each direction).
Explicit widths or heights can be either percentages (of the parent
element) or an absolute value. Absolute values must include a unit,
e.g., in for inches, cm for centimetres,
or px for pixels. For example, within a web page that is
800 pixels wide on a screen that has a resolution of 100 dots-per-inch (dpi),
to make a paragraph of text half the width of the page, the following
three specifications are identical:
p { width: 50% }
p { width: 4in }
p { width: 400px }
- border-width:, border-style:, and border-color:
-
Control the appearance of borders around an element. Borders are only
drawn if the border-width is greater than zero. Valid border
styles include solid, double, and inset (which
produces a fake 3D effect).
These properties affect all borders, but there are other properties
that affect only the top, left, right, or bottom border of an element.
For example it is possible to produce a horizontal line at the top
of a paragraph by using just the border-top-width property.
- margin:
-
Controls the space around the outside of
the element (between
this element and neighbouring elements). The size of margins can be
expressed using units, as for the width and height
properties.
This property affects all margins (top, left, right, and bottom).
There are properties, e.g., margin-top, for controlling
individual margins instead.
- padding:
-
Controls the space between the border of the
element and the element's contents. Values are specified as they are
for margins. There are also specific properties,
e.g., padding-top, for individual control of the
padding on each side of the element.
- display:
-
Controls how the element is arranged relative
to other elements. A value of block means that the element
is like a self-contained paragraph (typically, with an empty line
before it and an empty line after it). A value of inline
means that the element is just placed beside whatever was the previous
element (like words in a sentence). The value none means that
the element is not displayed at all.
Most HTML elements are either intrinsically block-level or inline,
so some uses of this property will not make sense.
- whitespace:
-
Controls how whitespace in the content
of an element is treated.
By default, any amount of whitespace in HTML code collapses down to just
a single space when displayed, and the browser decides when a new line
is required. A value of pre for this property forces all whitespace
within the content of an element
to be displayed (especially all spaces and all new lines).
- float:
-
Can be used to allow text (or other inline elements)
to wrap around another element (such as an image). The value right
means that the element (e.g., image)
“floats” to the right of the web page and
other content (e.g., text) will fill in the gap to the left. The value
left works analogously.
- clear:
-
Controls whether floating elements are allowed
beside an element. The value both means that the element will
be placed below any previous floating elements. This can be used
to have the effect of turning off text wrapping.
