Properties

Color

You can declare a color as the following example:

P {color: red}
H2 { color: #000080 }
LI {color: rgb(12%, 51%, 62%)}

Background

Background-color This sets the background color of an element. For example:

BODY { background-color: white }
H1 { background-color: #000080 }

Note:
1. To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.
2. Netscape 4.* does not color in the background of block elements if they are given a background color that is different from BODY - it does not color in the spaces between words. To avoid this, explicitly set border: none

Background-image Specified with background-image. For example:

BODY { background-image: url(/images/cloud.gif) }
P { background-image: url(http://www.selectagps.com/images/c.gif) }

Background-repeat This states the tiling of the background image. The possible values include: repeat | repeat-x | repeat-y | no-repeat.

The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:

BODY { background: white url(candybar.gif);
background-repeat: repeat-x }

In the above example, the image will only be tiled horizontally. IE only draws repeat-x to the right, and repeat-y down, not left and right and up and down as it should do.

Background This allows one or more of the properties to be specified in the order color, image, repeat, attachment, position. For examples:

BODY { background: white url(http://www.selectagps.com/images/c.gif) }
BLOCKQUOTE { background: #6699ff }
P { background: url(image/line.gif) #e2e9ee fixed }
TABLE { background: #ffeeff url(house.gif) no-repeat top center }

Fonts

Font-family This allows a specific font to be used. For example:

P { font-family: Times }

You may specify a couple fonts separated by comma. In case that if your preferred font is not available, your second choice is used. For example, font-family: Times, Arial. Note that any font name containing whitespace must be quoted, with either single or double quotes. For example:

P { font-family: "New Times Roman", Times, serif }

Font-size This can be specified as a length, or one of the following keywords: xx-small, x-small, small, medium (initial), large, x-large, xx-large. For example:

H2 { font-size: large }
P { font-size: 10pt }
LI { font-size: 80% }
Table { font-size: small}

Note: Internet Explorer 3 and Netscape 4.* treat all relative units and % as relative to the element default rather than as relative to the parent element.

Font-style This defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). For example:

P {font-style: italic}

Font-weight This is used for specifying the weight of the font that can be specified as normal (initial value), or bold. For example:

P {font-weight: bold}

It can also be specified as an absolute number, being one of 100, 200, 300, 400 (the same as normal), 500, 600, 700 (the same as bold), 800, or 900, where 100 is the lightest and 900 the most bold. For example:

H1 { font-weight: 800 }

Font This may be used as a shorthand for the various font properties. For example:

P { font: italic bold 12pt/14pt Times, serif }

This specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

Text

Text-align The value can be left (initial value), right, center, or justify (aligns to both margins). Text-align only applies to block elements and is inherited. For example:

H1 { text-align: center }
P.newspaper { text-align: justify }

Text-decoration This allows text to be decorated through one of five properties:

A:link, A:visited, A:active { text-decoration: none }

Text-transform allows text to be transformed by one of four properties: none (initial value), lowercase, uppercase, or capitalize (capitalize the first letter of every word). It applies to all elements and is inherited. For example:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

Margin

This property sets the margin of an element by specifying a length or a percentage. Each element can have four margins - left, right, bottom and top. These are defined by the margin-left, margin-right, margin-top, margin-bottom properties. For example:

P {margin-left: 20px}

The margins can be specified for all four sides at once with the margin shorthand. Margins can be negative, and initially margins are 0.

P {margin: 10px 12px 6cm 8pt}

This would give P a top margin of 10 pixel, a right margin of 12 pixel, a bottom margin of 6 pixel and a left margin of 8 pixel.

↓