HTML

Appendix D

CSS Properties and

Values
Style Sheet Properties and Values
This appendix provides a listing of the CSS (Cascading Style Sheets) level 1 and 2 properties
and values supported by most browsers. Tables D–1 through D–6 show the property names,
descriptions, and valid values for various categories of CSS properties. Values listed in bold
are the default.
A newer version of Cascading Style Sheets, CSS3, is currently being defined. CSS3
is therefore not covered in this appendix. CSS3 utilizes a modularized approach to style
sheets, which allows CSS to be updated in a more timely and flexible manner.
For a more comprehensive list of CSS properties and values, see the www.w3.org
Web site. In addition to an abundance of information about CSS levels 1 and 2, the w3
site also has extensive information about CSS3, from its history to its use with browsers
today. The Web site also includes many online tutorials available for learning CSS levels 1
and 2 as well as CSS3.

Background and Color Styles

Colors and subtle backgrounds can enhance the style of a Web page significantly.
You can set the background or color of an element using these style sheet properties. Not
all browser versions support these style attributes, however, so be aware that not all users
will be able to see the background and color styles set by these properties. Table D–1
provides a list of background and color properties.

A_C6803_AppD.4c.indd 25 9/11/08 12:58:23 PM

 APP 26 HTML Appendix D CSS Properties and Values

Table D–1 Background and Color Properties

Property Name Description Values

background-attachment Sets the background image to fixed, or scrolls with scroll

the page fixed
background-color Sets the background color of an element transparent
[color]
background-image Sets an image as the background none
[url]
background-position Sets the starting position of a background image [length]
[percentage]
bottom
center
left
right
top
background-repeat Sets if/how a background image will be repeated repeat
repeat-x
repeat-y
no-repeat
color Sets the foreground color of an element [color]
transparent

Border Styles
Many changes can be made to the style, color, and width of any or all sides of a
border using the border properties listed in Table D–2. Using the border-color, border-
width, or border-style border properties allows you to set the style for all sides of a border.
Using style properties such as border-top-width, border-right-color, or border-bottom-
style gives you the option to set the width, color, or style for only the top, right, bottom,
or left border of a table cell. If you do not make changes to the border style using style
sheet properties, the default border will be displayed.

A_C6803_AppD.4c.indd 26 9/11/08 12:58:23 PM

 Style Sheet Properties and Values APP 27

HTML Appendix D
Table D–2 Border Properties

Property Name Description Values

border-color Sets the color of the four borders; can have from one to [color]
four colors transparent
border-top-color Sets the respective color of the top, right, bottom, and left [color]
border-right-color borders individually
border-bottom-color
border-left-color
border-style Sets the style of the four borders; can have from one to four styles none
dashed
dotted
double
groove
inset
outset
ridge
solid
border-top-style Sets the respective style of the top, right, bottom, and left borders none
border-right-style individually dashed
border-bottom-style dotted
border-left-style double
groove
inset
outset
ridge
solid
border-width Shorthand property for setting the width of the four borders in medium
one declaration; can have from one to four values [length]
thick
thin
border-top-width Sets the respective width of the top, right, bottom, and left medium
border-right-width borders individually [length]
border-bottom-width thick
border-left-width thin

A_C6803_AppD.4c.indd 27 9/11/08 12:58:23 PM

 APP 28 HTML Appendix D CSS Properties and Values

Font Styles
An element’s font can be changed using the font attribute and various font properties.
When you set the font family for an element, you can set one or more fonts or font families
by using a comma-delimited list. Each font family generally includes several font definitions.
For example, the Arial font family includes Arial Black and Arial Narrow. If you specify
more than one font, the browser assesses the user’s system and finds the first font family
installed on the system. If the system has none of the font families specified in the style
sheet, the browser uses the default system font. Table D–3 lists common font properties.

Table D–3 Font Properties

Property Name Description Values

font-family A prioritized list of font-family names and/or generic [family-name]

family names for an element cursive
fantasy
monospace
sans-serif
serif
font-size Sets the size of a font [length]
[percentage]
large
medium
small
x-large
x-small
xx-large
xx-small
font-style Sets the style of a font normal
italic
oblique
font-variant Displays text in a small-caps font or a normal font normal
small-caps
font-weight Sets the weight of a font normal
bold
bolder
lighter

A_C6803_AppD.4c.indd 28 9/11/08 12:58:23 PM

 Style Sheet Properties and Values APP 29

HTML Appendix D
List Styles
Using the properties associated with list styles allows you to set the kind of marker
that identifies a list item. An unnumbered list marker, for example, can be a filled disc, an
empty circle, or a square. A numbered list marker can be a decimal, lower-alpha, lower-
roman numeral, upper-alpha, or upper-roman numeral. Table D–4 provides compatible
browser list properties.

Table D–4 List Properties

Property Name Description Values

list-style-image Sets an image as the list-item marker none

url
list-style-position Indents or extends a list-item marker with respect to the outside
item’s content inside
list-style-type Sets the type of list-item marker disc
circle
square
decimal
lower-alpha
lower-roman
upper-alpha
upper-roman

Margin and Padding Styles

Many changes can be made to the width and spacing around an element using
the margin and padding properties listed in Table D–5. Padding is the space that occurs
between the edge of an element and the beginning of its border. If you increase padding
around an element, you add space inside its border. The border, therefore, has a larger
area to cover.
You can use the margin or padding property to set the widths of margins and
padding amounts along all four sides of an element. Using margin and padding properties
such as margin-top, margin-right, padding-left, or padding-bottom gives you the option
to set the margin or padding for only the top, right, bottom, or left side of an element.

A_C6803_AppD.4c.indd 29 9/11/08 12:58:23 PM

 APP 30 HTML Appendix D CSS Properties and Values

Table D–5 Margin and Padding Properties

Property Name Description Values

margin Shorthand property for setting margin properties in one [length]

declaration [percentage]
auto
margin-top Sets the top, right, bottom, and left margin of an element [length]
margin-right individually [percentage]
margin-bottom auto
margin-left
padding Shorthand property for setting padding properties in one [length]
declaration [percentage]
padding-top Sets the top, right, bottom, and left padding of an element [length]
padding-right individually [percentage]
padding-bottom
padding-left

Text Styles
Text styles can be used to change the letter-spacing, alignment, line-height (not
recommended), and text decoration, along with other text properties. The text-transform
property can change text into all uppercase, all lowercase, or be used to change the first
letter of each word to uppercase. With text-align, you can align text left, right, center, or
justify the text. The text style properties are listed in Table D–6.

Table D–6 Text Properties

Property Name Description Values

letter-spacing Increases or decreases the space between characters normal

[length]
line-height Sets the spacing between text baselines normal
[length]
[number]
[percentage]
text-align Aligns the text in an element left
right
center
justify
text-decoration Adds decoration to text none
blink
line-through
overline
underline

A_C6803_AppD.4c.indd 30 9/11/08 12:58:23 PM

 Style Sheet Properties and Values APP 31

HTML Appendix D
Table D–6 Text Properties (continued)

Property Name Description Values

text-indent Indents the first line of text in an element [length]

[percentage]
text-transform Controls text capitalization none
capitalize
lowercase
uppercase
vertical-align Sets the vertical positioning of text baseline
[length]
[percentage]
bottom
middle
sub
super
text-bottom
text-top
top
white-space Sets how white space inside an element is handled normal
pre
nowrap
word-spacing Increases or decreases the space between words normal
[length]

A_C6803_AppD.4c.indd 31 9/11/08 12:58:23 PM

A_C6803_AppD.4c.indd 32 9/11/08 12:58:23 PM