CSS Reference Sheet

Align caption-side clear float vertical-align	Background background-attachment background-color background-image background-position background-repeat	Border border border-color border-style border-width border-collapse	Font font font-family font-size font-style font-variant font-weight	Link a:link a:hover a:active a:visited
List list-style-image list-style-position list-style-type	Position position left top z-index	Size height width	Spacing margin padding	Text color letter-spacing line-height text-align text-decoration text-indent text-transform word-spacing

Styles are applied to XHTML elements in the embedded format,

  <style type="text/css">
    selector {property:value [; property:value]...}
  </style>

where the selector can be:

simple selector	h1 {property:value [; property:value]...}
multiple selectors	h1, h2, h3 {property:value [; property:value]...}
id selector	span#id {property:value [; property:value]...}
contextual selector	ol li {property:value [; property:value]...}
class selector	.name {property:value [; property:value]...}

Styles can also be applied in the in-line format,

  <tag style="property:value [; property:value]...">

CSS Property	Value	Description
Align
caption-side	top bottom	Positions a table caption above or below a table.
clear	both left right none	Sets whether the element is positioned in-line with a floating element or is positioned at the next clear line of the document.
float	left right none	Sets whether the element floats to permit wrapping of accompanying content.
vertical-align	bottom top baseline middle sub super text-bottom text-top	Sets the vertical alignment of the contents of the element.
Top
Background
background-attachment	fixed scroll	Sets how a background image is attached to the document.
background-color	colorname #hexvalue rgb(r g b) rgb(r% g% b%)	Sets the color of the background for the element.
background-image	url(url) none	Sets the background image for an element.
background-position	left% top% left top left|center|right top|center|bottom	Sets the location of the left and top edges of the background image for an element as percentages or measurements. Can use a pair of keywords separated by a space.
background-repeat	no-repeat repeat repeat-x repeat-y	Sets whether the background image repeats horizontally, vertically, in both directions, or not at all.
Top
Border
border	style width color	Sets the border style, width, and color with a single property.
border-color border-top-color border-right-color border-bottom-color border-left-color	colorname #hexvalue rgb(r g b) rgb(r% g% b%)	Sets the color of all borders or a single border edge of an element.
border-style border-top-style border-right-style border-bottom-style border-right-style	dashed dotted double groove inset none outset ridge solid	Sets the style of all borders or a single border edge of an element.
border-width border-top-width border-right-width border-bottom-width border-right-width	thin medium thick width	Sets the width of all borders or a single border edge of an element using a keyword or a width measurement.
border-collapse	collapse separate	Sets whether adjacent table cells are rendered separately or merged into a single border.
Top
Font
font	style variant weight size family	Sets multiple font properties, separated by spaces, in the exact order shown. Not all properties need to be set.
font-family	name [,name]... serif sans-serif cursive fantasy monospace	Sets one or more font names or generic name for the element's text.
font-size	npx n% xx-small x-small small medium large x-large xx-large	Sets the font size for the element's text.
font-style	normal italic oblique	Sets the font style for the element's text.
font-variant	normal small-caps	Sets the font variant for the element's text.
font-weight	normal bold bolder lighter 100 - 900	Sets the font weight for the element's text.
Top
Link
a:link a:hover a:active a:visited	Any text stylings.	Sets how a text links responds to mouse activation.
Top
List
list-style-image	none url(url)	Sets the image used as the bullet character for list items.
list-style-position	inside outside	Sets the alignment of wrapped text for a list item. Inside aligns wrapped text with the item marker; outside aligns wrapped text with the beginning text position.
list-style-type	circle disc square decimal lower-alpha lower-roman upper-alpha upper-roman	Sets the list item marker for unordered lists and for ordered lists.
Top
Position
position	relative fixed	Sets the element's location in the document. Fixed positioning is relative to the top-left corner (0,0 pixel position) of the container element.
left	npx n%	Sets the distance of a element from the left margin of its container.
top	npx n%	Sets the distance of a element from the top margin of its container.
z-index	n	Sets the layer of a element. Elements with smaller numeric values appear below elements with larger values. Zero (0) is the text layer.
Top
Size
height	auto npx n%	Sets the height of an element.
width	npx n% auto	Sets the width of the element.
Top
Spacing
margin margin-top margin-right margin-bottom margin-left	auto npx n%	Sets the amount of space that extends beyond the edges of an element.
padding padding-top padding-right padding-bottom padding-left	auto npx n%	Sets the amount of space surrounding the contents of an element.
Top
Text
color	colorname #hexvalue rgb(r g b) rgb(r% g% b%	Sets the text color of the element.
letter-spacing	normal npx auto	Sets the horizontal letter spacing of an element's text. Measurement can be negative.
line-height	normal n npx n%	Sets the line height of an element's text. A number serves as a multiplier of the current font size; a measurement is an actual height value; a percentage is a multiplier of the current font size.
text-align	left center right justify	Sets the horizontal alignment of text within an element.
text-decoration	none blink line-through overline underline	Sets the decoration of text within an element.
text-indent	npx n%	Sets the indention of text within an element.
text-transform	none captialize lowercase uppercase	Sets the capitalization of text within an element.
word-spacing	npx normal	Sets the amount of spacing between words of the element.
Top

TOP | NEXT: HTML Special Characters