Web Development and Design Foundations with XHTML, 5th Edition

(^78) Chapter 3 Configuring Color and Text with CSS
used to configure color and text. Table 3.1 presents a summary of the CSS properties used
in this chapter. Appendix C, CSS Property Reference, contains a more detailed list. In the
next sections, we’ll take a look at how color is used on Web pages and we’ll explore how
to use CSS to configure color.

3.2Using Color on Web Pages

Monitors display color as a combination of different intensities of red, green, and blue,

also known as RGB color. RGB intensity values are numerical from 0 to 255. Each

Table 3.1 CSS properties used in this chapter

Property Description Values

background-

color

Background color on the Web

page

Any valid color

color Text color Any valid color

font-family Name of a font or font family Any valid font or a font family such as serif,

sans-serif, fantasy, monospace, or

cursive

font-size The size of the text font This varies; a numeric value with pt(standard font

point sizes), px(pixels), the unit em(which corre-

sponds to the width of the uppercase M of the current

font); numeric percentage; the text values xx-small,

x-small,small, medium, large, x-large, and

xx-largeare also valid

font-style The style of the font normal, italic, oblique

font-weight The “boldness” or weight of

the font

This varies; the text values normal, bold, bolder,

and lighter; the numeric values 100 , 200 , 300 ,

400 , 500 , 600 , 700 , 800 , and 900

line-height The spacing allowed for the

line of text

It is most common to use a percentage for this value;

for example, a value of 200% would be double-

spaced

margin Shorthand notation to config-

ure the margin surrounding an

element

A numeric value (pxor em); for example,

body { margin: 10px}will set the page margins

in the document to 10 pixels. When eliminating the

margin, do not use the px or em unit, for example,

body {margin:0}

margin-left Configures the space in the left

margin of the element

A numeric value (pxor em), auto, or 0

margin-right Configures the space in the

right margin of the element

A numeric value (pxor em), auto, or 0

text-align The alignment of text center, justify, left, right

text-

decoration

Determines whether text is

underlined; this style is most

often applied to hyperlinks

The value nonewill cause a hyperlink not to be

underlined in a browser that normally processes in this

manner

width The width of an element A numeric value (pxor em), numeric percentage, or

auto(default)