CSS Properties

bulletIntroduction

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.

bulletReferences

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