Introduction
This is a summary of the properties and values of the most frequently used CSS style rules. The majority of them is self-explanatory.
Background Properties
|
Property
|
Values
|
Notes
|
|---|
|
background-attachment
|
scroll, fixed
|
Replaces HTML's bgproperties.
|
|
background-color
|
color name, #hexcolor
|
|
|
background-image
|
URL("picture.jpg")
|
|
|
background-position
|
top, right, bottom, left, center
|
|
|
background-repeat
|
repeat, no-repeat, repeat-x, repeat-y
|
|
Border Properties
|
Property
|
Values
|
Notes
|
|---|
|
border
|
width border-style color
|
A triplet of values.
|
|
border-collapse
|
separate, collapse
|
Collapses cell and table borders in one line.
|
|
border-color
|
color name, #hexcolor
|
|
|
border-style
|
none, dotted, dashed, solid, double, groove, ridge, inset, outset
|
|
|
border-width
|
thin, medium, thick, em, pt, px
|
|
|
border-*
|
width border-style color
|
A triplet of values.
*means one of: top, right, bottom, left.
|
|
border-*-^
|
value is determined by the choice of ^.
|
* means one of: top, right, bottom, left. ^means one of: color, style, width.
|
Properties from b to f.
|
Property
|
Values
|
Notes
|
|---|
|
bottom
|
normal, pt, %, em, px
|
Absolute position of a block from bottom in the parent element.
|
|
caption-side
|
top, bottom
|
Table caption position.
|
|
clear
|
left, right, both, none
|
|
|
clip
|
auto, rect(left, top, right, bottom)
|
For blocks with absolute position; the braced values determine the clip rectangle.
|
|
color
|
color name, #hexcolor
|
|
|
cursor
|
default, crosshair, hand, move, pointer, text, weit, help, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, progress, not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize, url(uri)
|
Cursor shape for the region. Result may depend on the browser and system settings.
|
|
display
|
inline, block, list-item, none
|
|
|
float
|
left, right
|
Picture-text alignment.
|
Font Properties
|
Property
|
Values
|
Notes
|
|---|
|
font
|
style, variant, weight, size/line-height, family
|
Ordered quintuple of values.
|
|
font-family
|
arial, courier, cursive, fantasy, helvetica, impact, monospace, sans-serif, times new roman, verdana etc.
|
Several font family names can be listed. System selects the first available in the list. Put multiple word names in quotes.
|
|
font-size
|
pt, keyword, %, em, px
|
Keywords: xx-small, x-small, small, medium, large, x-large, xx-large.
|
|
font-style
|
normal, italic, oblique
|
|
|
font-variant
|
normal, small-caps
|
|
|
font-weight
|
bold, bolder, lighter, normal
|
Bolder is the same as the b element.
|
Properties from h to l
|
Property
|
Values
|
Notes
|
|---|
|
height
|
normal, pt, %, em, px, auto
|
Height of the block.
|
|
left
|
normal, pt, %, em, px
|
Absolute position of a block from left in the parent element.
|
|
letter-spacing
|
normal, pt, %, em, px
|
|
|
line-height
|
normal, pt, %, em, px
|
|
List Style Properties
|
Property
|
Values
|
Notes
|
|---|
|
list-style
|
type, position, image
|
An ordered triplet of values.
|
|
list-style-type
|
disc, circle, square, decimal, lower-roman, lower-alpha, upper-alpha, none
|
Bullet shapes.
|
|
list-style-image
|
none, URL("bullet.jpg")
|
Image instead of a bullet.
|
|
list-style-position
|
outside, inside
|
Bullet is outside or inside the block.
|
Properties from m to t
|
Property
|
Values
|
Notes
|
|---|
|
margin
|
top right bottom left
|
An ordered quadruple of values.
|
|
margin-*
|
pt, %, em, px, auto
|
* means one of top, right, bottom, left.
|
|
overflow
|
none, hidden, scroll, auto
|
Wrapping of text in a frame and scrollbar presence.
|
|
padding
|
top right bottom left
|
An ordered quadruple of values.
|
|
padding-*
|
pt, %, em, px, auto
|
* means one of top, right, bottom, left.
|
|
position
|
absolute, relative
|
Position of a block in the parent element.
|
|
right
|
normal, pt, %, em, px
|
Absolute position of a block from the right in the parent element.
|
|
table-layout
|
auto, fixed
|
Tables with auto layout adjust to the window size.
|
Text Properties
|
Property
|
Values
|
Notes
|
|---|
|
text-align
|
left, right, center, justify
|
|
|
text-decoration
|
none, underline, overline, line-through, blink
|
|
|
text-indent
|
normal, pt, %, em, px
|
|
|
text-transform
|
none, capitalize, uppercase, lowercase
|
|
Properties from t to z
|
Property
|
Values
|
Notes
|
|---|
|
top
|
normal, pt, %, em, px, auto
|
Absolute position of a block from top in the parent element.
|
|
vertical-align
|
baseline, sub, super, top, text-top, middle, bottom, text-bottom, %
|
Determines the vertical alignment of an element.
|
|
white-space
|
normal, pre, nowrap
|
pre value provides analog to pre tag.
|
|
width
|
normal, pt, %, em, px, auto
|
|
|
word-spacing
|
normal, pt, %, em, px
|
|
|
z-index
|
number
|
Sets the stack order of an element.
|
References
W3Schools Online Web Tutorials.
W3Schools
,
2006
C. D. Knukles and D. S. Yuen:
Web Applications, Concepts & Real World Designs.
Wiley,
2005
Cascading style sheets, level 1 recommendations by WWW Consortium.
World Wide Web Consortium
,
1996
Cascading style sheets, level 2 recommendations by WWW Consortium.
World Wide Web Consortium
,
1998
Syntax of CSS rules in HTML's style attribute.
World Wide Web Consortium
,
2002
W3C CSS Validation Service.
World Wide Web Consortium
,
2004