Popular Style Codes

Codes included here are supported by Netscape Navigator 4.0 or later and Internet Explorer 4.0 or later (as tested by W3C). Be sure to test in other browsers.

Background Color:

background-color: #000080

Background Image:

background-image: url("/images/bgdesert.jpg")

background-repeat: no-repeat;

Text Font:
font-family: times, "Times New Roman", serif

font-family: "Lucinda Bright", "Eras Light ITC", Arial, sans-serif

[Note: it is standard practice to list a set of possible fonts in case the user does not have a particular font loaded on her machine. The browser will look for the fonts in the order they are listed from left to right.

Font Size:

font-size: 1.16em

font-size: 106%

Font Decoration:

font-style: italic
font-weight: bold
font-variant: small-caps

Text Color:

color: #FFFFFF

color: white

color: rgb(238,238,238)

Text Align:

text-align: left
text-align: center
text-align: right
text-align: justify

Text Decoration:

text-decoration: underline

text-decoration: none

Text Indent:

text-indent: 5px (indents first line only)
margin-left: 2em (moves all text in the element to the left)
margin-right: 20px (stops all text 20px from the right edge of the display)

margin-top: 5px (controls space between text – adds space above text)

margin-bottom: 10px (controls space between text – adds space below text)

Note: indent and margins can be expressed in negative numbers to reduce space.

Links:

a:link – define standard link
a:visited – define visited link
a:hover – defines mouse-over link
Example: a:hover {color:#FFFFFF; background-color: #000066}

Borders:

border-style: dotted

[choose from: dotted, dashed, solid, double, groove, ridge, inset, outset]

Notes: The "border-style" property is not recognized by Netscape 4. Netscape 6 and IE 5.5+ supports all border styles. Internet Explorer 4.0 - 5.0 do not support the "dotted" and "dashed" values

border-color: #0000ff

Note: you must define also define a border style. Netscape 4 does not support the "border-color" property. Use the "border" property to set the borders and colors in Netscape.

border-bottom-width: 15px

border-left-width: 10px

border-right-width: 5px

border-top-width: 15px

Note: you must also define a border style.

Shorthand example: .box {border: 5px double #333333}

Padding:

Defines the space between the content and the border (e.g. distance from the cell wall to the start of the cell content). Most often used with the TD tag in a table.

padding: 15px

padding-left: 5px
padding-right: 5px
padding-top: 20px
padding-bottom: 20px

Lists:

list-style-type: circle

[choose from: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha]

list-style-image: url(blueball.gif)

Note: always also define a style-type in case image does not load correctly.

list-style-position: inside [outside]

list-style: disc outside url(blueball.gif) [combines the list options into one definition]

Space Between Lines:
line-height: 12px
line-height: 90%

Display On or Off:

display: none
visibility: visible
visibility: hidden

Note: visibility supported by Navigator 6.0+ and IE 4.0+

Float:
float: left
float: right
float: none

Example: img {float: right}

Positioning:

position: absolute – place in specific place on page

position: relative – relative to the default position

Note: when using absolute positioning, you must specify a top and left position.