CSS Reference

Box Model

border

(border-top, border-right, border-bottom, border-left)

border-width border-style border-color

default value: 0 none

h1 {border-bottom: 1px dotted #000}

border-width

(border-top-width, border-right-width, border-bottom-width, border-left-width)

{1-4} thin, medium, thick, length

default value: medium

blockquote {border-width: 1px}

border-style

(border-top-style, border-right-style, border-bottom-style, border-left-style)

{1-4} solid, dotted, dashed, double, groove, ridge, inset, outset, none

default value: none

#nav {border-style: solid double}

border-color

(border-top-color, border-right-color, border-bottom-color, border-left-color)

{1-4} color

#header h2 {border-color: gray #000 navy}

margin

(margin-top, margin-right, margin-bottom, margin-left)

{1-4} length±, percentage±, auto

default value: varies

body {margin: 0 auto}
(Non-floated block elements with left and right margins set to "auto" will be centered.)

padding

(padding-top, padding-right, padding-bottom, padding-left)

{1-4} length, percentage

default value: 0

p {padding: 0 0 15px 0}

width

length, percentage, auto

default value: auto

#box {width: 200px}

height

length, percentage, auto

default value: auto

#box {height: 7px}

max-width

length, percentage, none

default value: none

#box {max-width: 20%}

max-height

length, percentage, none

default value: none

#box {max-height: 9px}

min-width

length, percentage

default value: 0

#box {min-width: 10px}

min-height

length, percentage

default value: 0

#box {min-height: 5px}

Background

background

background-color background-image background-repeat background-attachment background-position

default value: transparent none repeat scroll 0% 0%

body {background: #fff url(/img/bg.jpg) no-repeat fixed top center}

background-color

color, transparent

default value: transparent

.bgExample {background-color: #000}

background-image

URL, none

default value: none

#footer {background-image: url(/img/samp.jpg)}

background-repeat

repeat, repeat-x, repeat-y, no-repeat

default value: repeat

blockquote {background-repeat: repeat-x}

background-attachment

scroll, fixed

default value: scroll

body {background-attachment: fixed}

background-position

percentage±, length±, left, center, right percentage±, length±, top, center, bottom

default value: 0% 0%

html {background-position: 30% bottom}

Positioning

position

static, absolute, fixed, relative

default value: static

#alertbox {position: absolute}

display

block, inline, inline-block, list-item, none

default value: Varies

#alertbox {display: none}

visibility

hidden, visible

default value: visible

small {visibility: hidden}

float

none, left, right

default value: none

pull.blockquote {float:right}

clear

none left, right, both

default value: none

pull.blockquote {clear:right}

top, right, bottom, left

length±, percentage±, auto

default value: auto

#alertbox {top: 100px; left: 240px}

z-index

integer±, auto

default value: auto

#alertbox {z-index: 99}

overflow

auto, hidden, scroll, visible

default value: visible

#section {overflow: auto}

Lists

list-style

list-style-type list-style-position list-style-image

default value:

ul li {list-style: square url(/img/bullet.gif)}

list-style-type

disc, circle, square, decimal, upper-roman, upper-alpha, lower-roman, lower-alpha, none

default value: ol li: decimal
ul li: disc

ol li {list-style-type: upper-roman}

list-style-position

inside, outside

default value: outside

list-style-image

none, URL

default value: none

ul li {list-style-image: url(/img/triangle.gif)}

Typographical

font

[font-style] [font-weight] font-size [/line-height] font-family

default value: Varies

thead td {font: bold large/150% serif}

color

color

.error {color: red}

font-family

family-name, serif, sans-serif, monospace, fantasy, cursive

default value:

body {family-name: "MS Trebuchet", Helvetica, sans-serif}

font-size

length, percentage, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger

default value: medium

h1 {font-size: 18px}

font-weight

normal, bold

default value: normal

div.nav ul li a {font-weight: bold}

font-style

normal, italic

default value: normal

#section q {font-style: italic}

letter-spacing

length±, normal

default value: normal

#section q {letter-spacing: .5em}

line-height

length, percentage, number, normal

default value: normal

p {line-height: 2}

text-align

center, justify, left, right

default value:

div.nav p {text-align: justify}

text-decoration

[line-through] [overline] [underline] none

default value: none

a:hover {text-decoration: overline underline}

text-indent

length±, percentage±

default value: 0

#artice p {text-indent: 3em}

text-transform

capitalize, lowercase, none, uppercase

default value: none

h3 {text-transform: uppercase}

vertical-align

length, percentage, baseline, bottom, middle, sub, super, text-bottom, text-top, top

default value: baseline

table tbody td {vertical-align: top}

white-space

normal, nowrap, pre, pre-line, pre-wrap

default value: normal

code {white-space: pre}

word-spacing

length, normal

default value: normal

#article p {word-spacing: .2em}

Table

table-layout

auto, fixed

default value: auto

table.data {table-layout: fixed}

border-collapse

collapse, separate

default value: separate

table {border-collapse: collapse}

Interface

cursor

auto, crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text, w-resize, wait, Non-standard: all-scroll, col-resize, not-allowed, row-resize, vertical-text

default value: auto

.help {cursor: help}

Paged

page-break-before

auto, always

default value: auto

h2 {page-break-before: always}

page-break-after

auto, always

default value: auto

table {page-break-after: always}

Key

CSS Identifier

Allowed CSS values

default value: browser default

css selector {css identifier: css value}

Notes

{1-4} - If there is only one component value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
length - The format of a length value is a number (with or without a decimal point) immediately followed by a unit identifier: em, ex, in, cm, mm, pt, pc, or px. After a zero length, the unit identifier is optional.
percentage - Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block).
± - Number can use negative values.
Allowed CSS values - Multiple values are separated by a space. Different types of allowed values are separated by a comma.