Core CSS Properties & Values

Peter Coxhead

This table is meant as a quick reference to the main CSS properties and values for those who already know about Cascading Style Sheets. For more detail see http://www.w3.org/Style/.

CSS properties and constants are in lower-case letters; UPPER-CASE letters need to be replaced by CSS values.

Text style
color

transparent (shows background through)

aqua blue 
navy purple 
olive green 
lime yellow 
fuchsia red 
maroon orange 
teal gray 
silver black 
white 
More colours
font-weightnormal | bold | bolder | lighter
font-familyFONTNAME | serif | sans-serif | monospace | cursive | fantasy
font-sizeNUMBER (typical units: em | % | pt)
font-stylenormal | italic | oblique
text-decorationnone | underline | line-through | overline (may be more than one)
Text layout
line-heightNUMBER (typical units: em | % | pt)
vertical-align(Attached to inline elements, e.g. spans:) baseline | middle | sub | super | text-top | text-bottom | top | bottom (aligns the element relative to the line of text which it is in)
(Attached to a table cell:) middle | top | bottom (aligns content relative to the table cell)
text-indentNUMBER (typical units: em | % | pt) (Indentation of first line.)
text-alignleft | right | center | justify (Applies to all inline elements within a block, including text; to align blocks see below.)
Background
background-colorCOLOUR
Border
border-top-style
border-right-style
border-bottom-style
border-left-style
border-style		none | solid | dotted | dashed | double | groove | ridge | inset | outset
(Default is none, so must set to one of the others to show a border.)
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color		COLOUR
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width		NUMBER (typical units: em | px | pt) | thin | medium | thick
border-top
border-right
border-bottom
border-left
border
STYLE WIDTH COLOUR
Margins
margin-top
margin-right
margin-bottom
margin-left		NUMBER (typical units: em | % | pt | px) | auto
(auto is useful for aligning block elements; see below.)
marginTOP RIGHT BOTTOM LEFT
(Watch the order, which is not consistent with other orderings of these quantities.)
Padding
(As margins with padding replacing margin.)
Positioning
visibilityhidden | visible (Note that space is still allocated.)
positionstatic (normal layout) |
relative (relative to normal position) |
absolute (relative to containing box) |
fixed (relative to display medium, e.g. window or page; doesn't scroll)
top
left
width
height		NUMBER (typical units: px | %) | auto (Exact meaning depends on value of position.)
floatnone | left | right (For normal layout, moves the box to the left or right.)
clearnone | left | right (With floats, which side is kept clear.)
z-indexINTEGER (Determines overlap order.)
Element type
displaynone | block | inline | list-item
(In (X)HTML, list-item should only be used with li inside ol/ul for maximum support.)
white-spacenormal | pre | nowrap
list-style-typenone | disc | circle | square (bullets)
decimal | lower-roman | upper-roman | lower-alpha | upper-alpha (numbers; need a counter; less well-supported)
list-style-imagenone | URL
list-style-positioninside | outside
list-styleTYPE IMAGE POSITION
Aligning a block element horizontally
Inline elements can be aligned horizontally by the text-align property.
Block elements, such as tables or divs, can be moved to the left, to the right or centred within their parent by setting the right margin to auto (moved left), the left margin to auto (moved right) or both margins to auto (centred), e.g. to centre, use style="margin-left: auto; margin-right: auto;". (Blocks need to have a width less than their parent to show the effect.)
This div has style="background-color: silver; border: solid 1px black; margin-left: auto; margin-right: auto; width: 75%".