CSS Stylesheet Properties HOWTO

This section summarizes the five style properties supported by Cascading Style Sheets. Scroll through the file or click on one of the style properties below.

The symbol -NS means that the style property is not supported by Netscape Navigator 4.0.
The symbol -IE3 means that the style property is not supported by Internet Explorer 3.0.
The symbol -IE4 means that the style property is not supported by Internet Explorer 4.0.
The symbol -O6 means that the style property is not supported by Opera 6.0.

If the symbol has a * after it, that means that the style property is only partially supported. Those values with a corresponding asteryx in front of them are the ones that don't work.

NOTE: Netscape 4.0 does NOT support classes defined in the style declaration in the header when you set the class as a number, i.e. p.1 {font-size: 15pt} but it will work if the class is a letter. Don't ask.

Netscape versions 3.0 and earlier support no style sheets. Keep in mind, though, that these discrepancies are contantly changing. Furthermore, the limitations that are listed here are only the result of some preliminary testing, and may not be correct in every case.

Text Font Color and Background Placement Classification

 

Text Properties
General Comments:  These properties let you control basic text formatting. Some of these can also be applied to non-text elements.
Property Description Values Example Test
text-transform Set the case of the text. capitalize
uppercase
lowercase
none
p {text-transform: capitalize}

Capitalizes the first character of each word in the paragraph.

H2 {text-transform: uppercase}

 Displays all level two headlines in all uppercase characters.

lowercase


lowercase
vertical-align Aligns the element vertically to the baseline. Can be very useful with images. baseline
sub
super
top
text-top
middle
bottom
text-bottom
img {vertical-align: middle}

Places the image in the middle of the baseline.

left -NS right
text-align Aligns the element horizontally across the page or within division left
right
center
justify
H5 {text-align: center}

Centers all level five headlines.

Left
text-indent Sets the amount of indent for the first line of a text block XX units
%
p {text-indent: 2em}

Indents the first line of the paragraph 2 em spaces.

Indents the first line of the paragraph 2 em spaces.

line-height Also known as "leading" or "line space." Specifies the distance between baselines of consecutive lines of text. normal
XX units
%
p {line-height: 12pt}

Sets 12 points of space from baseline to baseline in paragraph.

Sets 12 points of space from baseline to baseline in paragraph.

word-spacing

-NS-IE3-IE4

Lets you control the space between words. normal
XX units
p {word-spacing:2pt}

Puts an extra 2 points of space between each word in the paragraph

Puts an extra 2 points of space between each word in the paragraph.

letter-spacing

-NS-IE3

Lets you control the space between letters. normal
XX units
p {letter-spacing: 2}

Adds extra space between letters in a paragraph.

Adds extra space between letters in a paragraph.

text-decoration

-IE3-IE4

Sets underlining, overlining, strike-through, or blink attributes for the element. Vendors may be adding their own text decoration formats, as well. underline
*overline
line-through
*blink
none
H6 {text-decoration: blink}

Make all level six headlines blink. (IE doesn't support this.)

Make all level six headlines blink.

Font Properties
General Comments:  These properties let you control basic font characteristics.
Property Description Values Example Test
font-family Specifies the font family, or typeface, to use for the element.
You can specify a series of names and the first available font is used.
family name
generic name:
serif
sans-serif
cursive
fantasy
monospace
p {font-family: courier, helvetica, arial, sans-serif}

Display the paragraph in Courier, if available. If not, try Helvetica, Arial, and finally, any sans-serif display.

Display the paragraph in Courier, if available. If not, try Helvetica, Arial, and finally, any sans-serif display.

font-style Specifies the style of type to use for the element. normal
italic
oblique
P {font-style: italic}

Uses the italic variation of the typeface for paragraphs

Uses the italic variation of the typeface for paragraphs

font-variant Lets you select the small caps style of the typeface. normal
small-caps
P {font-variant: small-caps}

Uses the small-caps variation of the typeface for paragraphs.

Uses the small-caps variation of the typeface for paragraphs.

font-weight Lets you select the weight or boldness of the font. lighter
normal
bold
bolder
100
200
300
...
900
blockquote {font-weight: bold}

Makes the blockquote bold.

Makes the blockquote bold.
font-size Let you select the size of the type in the font. Font size may be specified in absolute units or relative to the "current" size. XX units
%
larger
smaller

xx-small
x-small
small
medium
large
x-large
xx-large
p {font-size: 12pt}

Displays the paragraph in 12 point type.

P {font-size: 150%}

Displays the paragraphs at 150% of their normal size.

Displays the paragraph in 12 point type.

Displays the paragraphs at 150% of their normal size.

Color and Background Properties
General Comments:  These properties let you control the color and background of elements.
Property Description Values Example Test
color

-IE3

Sets the color of the element. color name
hex value
*rgb(R%, G%, B%)
*rgb(R, G, B)
p {color: red}

Displays the paragraph text in red.

Displays the paragraph text in red.

background-color

-IE3

Sets the color for the background of the element. color name
hex value
rgb(R%, G%, B%)
rgb(R, G, B)
H6 {background-color: green}

Displays the background area of all level six headlines in green. (The effect is like having a green bar behind the headline.)

Displays the background area of all level six headlines in green.
background-image

-IE3

Specifies an image to use for the background of an element. url(urlname) blockquote {background-image:url(../images/sand.gif)}

Displays the image "sand.gif" in the background area of the blockquote.

Displays the image "sand.gif" in the background area of the blockquote.
background-repeat

-IE3

Specifies how and if a background image is repeated. repeat
repeat-x
repeat-y
no-repeat
blockquote {background-image: url(..images/sand.gif); background-repeat: repeat}

Displays the image "sand.gif" in the background area of the blockquote and repeats the image vertically and horizontally to fill the entire background area.

Repeats the image vertically and horizontally to fill the entire background area.
background-attachment

-NS-IE3

Lets you attach the background image so that it doesn't scroll. scroll
fixed
blockquote {background-image: url(../images/sand.gif); background-attachment: fixed}

Displays the image "sand.gif" in the background area of the blockquote and prevents the image from scrolling.

Prevents the image from scrolling.
background-position

-NS-IE3

Sets the initial position of the background image. vertical %
horizontal %

top
center
bottom
left
center
right
body {background-image: url(..images/sand.gif); background-position: center center}

Centers the background image vertically and horizontally on the initial body screen.

Centers the background image vertically and horizontally on the initial body screen.

Placement Properties
General Comments:  These properties let you specify where an element gets placed within its "box."
Property Description Values Example Test
margin-top

-IE4**

Places the top margin of the element; you can use negative values.

NOTE: For some reason, IE4.0 treats this style command like Netscape 4.0 treats the padding properties, i.e. it will add space to the top of every cellif done with a table. With <div> the property works normally.
XX units
%
auto
div {margin-left: 2em}

Displays the left margin of the division 2 em spaces down the page.

Displays the left margin of the division 2 em spaces down the page.
margin-bottom

-IE4**

Places the bottom margin of the element; you can use negative values.

**See the note for margin-top
XX units
%
auto
div {margin-bottom: 10%}

Places the bottom margin of the div element 10 percent down the page and displays the element from the bottom up.

Places the bottom margin of the div element 10 percent down the page and displays the element from the bottom up.
margin-left Places the left margin of the element; you can use negative values. XX units
%
auto
div {margin-top: 6em}

Displays the top margin of the division 6 em spaces from the top of the page.

Displays the top margin of the division 6 em spaces from the top of the page.
margin-right Places the right margin of the element; you can use negative values. XX units
%
auto
div {margin-right: 3em}

Displays the right margin of the division 3 em space from the right edge of the page.

Displays the right margin of the division 3 em spaces from the right of the page.
padding-top

-IE3-IE4

Inserts padding at the top of the element. (Theoretically. Only padding-top along with its related properties work with tables.) XX units
%
auto
td {padding-top: 4pt}

Inserts 4 points of space at the top of the cell in the table.

Inserts 4 points of space at the top of the cell in the table.
padding-bottom

-IE3-IE4

Inserts padding at the bottom of the element. XX units
%
auto
td {padding-bottom: 4pt}

Inserts 4 points of space at the bottom of the cell in the table.

Inserts 4 points of space at the bottom of the cell in the table.
padding-left

-IE3-IE4

Inserts padding along the left side of the element. XX units
%
auto
td {padding-left: 4em}

Inserts 4 em spaces at the left margin of every cell in the table.

Inserts 4 points of space at the left margin of the cell in the table.
padding-right

-IE3-IE4

Inserts padding along the right side of the element. XX units
%
auto
td {padding-right: 2em}

Inserts 4 em spaces at the right margin of every cell in the table.

Inserts 4 em spaces at the right margin of every cell in the table.
A quick note about tables and the following border properties. Only IE 4.0 would support border styles with its tables. However, the way it supported the tags is far from intuitive. If you put a border around a table, say table {border: thick double red} then the resulting table in IE4.0 will have a double thick red border around it and a double thick border, though not red, around each cell in the table. So, the table cells themselves only copy the width and style properties of the table property, not the color. The same thing happens when you specify a property for indivdual rows. That is, the width and style can be changed for the entire row, but for some reason, the color cannot be changed. Finally, in a surprising turn of events, using individual properties for table data works very well. In other words, td.a {border: thin double red} creates a nice double red border around any particular cell with class="a". Once again, though, this only works in IE4.0.
border-width

-IE3-O6-IE4**

Sets the width of the element's border. 

**NOTE: for some reason, the straight border-width tag does not produce a border in IE4.0. Other combinations of tags do, though.
thin
medium
thick
none
div {border-width: thin}

Displays a thin border around the paragraph.

Displays a thin border around the paragraph.

border-style

-NS-IE3-IE4

Sets the style of the element's border. none
*dotted
*dashed
solid
double
groove
ridge
inset
outset
p {border-style: dashed}

Displays a dashed border around the paragraph.

Displays a dashed border around the paragraph.

border-color

-IE3-O6

Sets the color of the element's border. color name
hex value
rgb(R%, G%, B%)
rgb(R, G, B)
p {border-color: red}

Displays a red border around the paragraph.

Displays a red border around the paragraph.

border
border-top
border-bottom
border-left
border-right

-IE3

Sets the width, color, and style of the border simultaneously width value
style value
color value
p {border: thick double red}

Displays a thick, double, red border around the paragraph.

table {border-top: thin dashed red}

Diplays a thin, dashed, red border at the top of the paragraph.

Displays a thick, double, red border around the paragraph.

Diplays a thin, dashed, red border at the top of the paragraph.

height

-NS**-IE3

Sets the height of the element. 

**Note: Limited success (with Netscape; no success in IE3.0) applying width and height to <div> tags, and no success with images.
XX units img.button {height: 70px}

Sets all button class images to be 70 pixels high.

-NS
width

-NS**-IE3

Sets the width of the element. 

** See note for height.
XX units img.button {width: 100px}

Sets all button class images to be 70 pixels wide.

-IE
float

-IE3

Places the element to the left or right and flows text around it. right
left
none
img.button {float: left}

Places a button class image to the left margin and flows text around it.

-IE Places a button class image to the left margin and flows text around it.
clear

-IE3-O6

Prevents text from flowing around an element. right
left
none
img.button {clear: right}

Places a button class image to the right margin and prevents any text or other elements from flowing beside it.

-IE Places a button class image to the right margin and prevents any text or other elements from flowing beside it.

Classification Properties
General Comments:  These properties let you classify elements by object type and assign characteristics based on these object types.
Property Description Values Example Test
display

-IE3

Specifies the category of object an element belongs to: a block element, like a heading or paragraph; an inline element, like emphasis or anchors; or a list-item element. If the category is none, the content of the element should not be displayed at all. none
""

block
inline
list-item
p {display: none}

Hides the content of the paragraph.

p {display: ""}

Display the contents of the paragraph.

p {display: block}

Treats the paragraph as a block element, which can be positioned separately using the positioning attributes.

Hides the content of the paragraph.

Display the contents of the paragraph.

Treats the paragraph as a block element, which can be positioned separately using the positioning attributes.

white-space

-NS-IE3-IE4-O6

Describes how white space should be handled within the block elements. normal
pre
nowrap
p {white-space: nowrap}

The paragraph will break only with a specific <br> tag.

The paragraph will break only
with a specific <br> tag.

list-style-type

-IE3-IE4

Sets the type of symbol that appears in front of a list item. disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
ul {list-style-type: square}

Unordered list items will use a square bullet.

  • Unordered list items will use a square bullet.
list-style-image

-NS-IE3

Selects a specific image to serve as a bullet in front of list items. url(urlname) ul {list-style-image: url(../images/circle.gif)}

Unordered list items will use the image "circle.gif" as a bullet.

  • Unordered list items will use the image "circle.gif" as a bullet.
list-style-position

-NS-IE3-IE4

Describes how the bullet marker and text in a list line up with each other. inside
outside
ul {list-style-position: outside}

Creates the effect of a hanging indent.

ul {list-style-position: inside}

The bullet and the second line of text are flush left.

  • Creates the effect of a hanging indent.
  • The bullet and the second line of text are flush left.

For a very good list of background pictures and textures I recommend to have a look at astronomy.swin.edu.au/~pbourke/.
DHTML and CSS menu howto.

last updated: