CSS Quick Reference

Syntax

Style Rules

Syntax	Description
selector { property: value; }	basic rule
selector { property: value; property: value; }	multiple styles
selector1, selector2 { property: value; }	applied to multiple selectors
selector1 selector2 { property: value; }	applied to selector2 contained in selector1
@media mediatype { selector { property: value; } }	applied only for specified mediatype (e.g., print)
/* comment */	comment

Selectors

Syntax	Description
element	all instances of a specific element (e.g., p)
element.class	all instances of a specific element with a specific class
.class	all instances of any element with a specific class
#id or element#id	an element with a specific id
element:pseudo-class	elements in a special state (e.g., a:link, a:visited, a:hover, a:active)
element:pseudo-element	special "pseudo" elements (e.g., p:first-letter, p:first-line)

Examples

Selector	CSS Example	HTML Example
element	`p { ... }`	`<p>`
element.class	`p.warning { ... }`	`<p class="warning">`
.class	`.warning { ... }`	`<p class="warning">`
#id or element#id	`#warning1 { ... }` or `element#warning1 { ... }`	`<p id="warning1">`
element:pseudo-class	`a:hover { ... }`	`<a href="...">`

Applying Styles

Syntax	Description
`<tag style="property: value;">`	In-line style
`<style type="text/css">` `selector { property: value; }` `</style>`	Embedded style block (in document head)
`<link rel="stylesheet" type="text/css" href="stylesheet.css">`	External style sheet

Properties

Text

Property	Description	Values	W3C
`color`	text color	color	CSS1
`font-family`	font family	family-name (comma-separated list)	CSS1
`font-size`	font size	length % `xx-small` `x-small` `small` `medium` `large` `x-large` `xx-large` `smaller` `larger`	CSS1
`font-weight`	font weight	`normal` `bold`	CSS1
`font-style`	font style	`normal` `italic`	CSS1
`font-variant`	font variant	`normal` `small-caps`	CSS1
`text-decoration`	text decoration	`none` `underline` `overline` `line-through` `blink`	CSS1
`text-transform`	text case	`none` `capitalize` `uppercase` `lowercase`	CSS1
`text-align`	horizontal alignment of text within an element	`left` `right` `center` `justify`	CSS1
`text-indent`	size of first line indent	length %	CSS1
`line-height`	line height (affects space between lines)	`normal` number length %	CSS1
`letter-spacing`	space between characters	`normal` length	CSS1
`word-spacing`	space between words	`normal` length	CSS1
`white-space`	how white space inside an element is handled	`normal` `pre` `nowrap`	CSS1

Lists

Property	Description	Values	W3C
`list-style-type`	type of bullet or number	`none` `disc` `circle` `square` `decimal` `lower-roman` `upper-roman` `lower-alpha` `upper-alpha`	CSS1
`list-style-position`	bullet/number position (when list items wrap)	`inside` `outside`	CSS1
`list-style-image`	image to be used as bullet	`none` url	CSS1
`list-style`	shorthand for all list-style settings	list-style-type list-style-position list-style-image	CSS1

Tables

Property	Description	Values	W3C
`border-collapse`	border model of a table	`collapse` `separate`	CSS2
`border-spacing`	cell spacing	length	CSS2
`caption-side`	position of the caption box relative to the table	`top` `bottom` `left` `right`	CSS2
`table-layout`	algorithm used for table layout	`auto` `fixed`	CSS2

Cursor

Property	Description	Values	W3C
`cursor`	appearance of mouse pointer	`auto` `crosshair` `default` `pointer (hand)` `move` `text` `wait` `help` `n-resize` `s-resize` `e-resize` `w-resize` `ne-resize` `sw-resize` `nw-resize` `se-resize` `url`	CSS2

Background

Property	Description	Values	W3C
`background-color`	background color	color `transparent`	CSS1
`background-image`	background image	`none` url	CSS1
`background-repeat`	if/how background image is repeated	`no-repeat` `repeat` `repeat-x` `repeat-y`	CSS1
`background-attachment`	whether background image scrolls with the page	`scroll` `fixed`	CSS1
`background-position`	position of background image	`top`/`center`/`bottom` `left`/`center`/`right` x-% y-% x-pixels y-pixels	CSS1

Border

Property	Description	Values	W3C
`border-width`	border width	length	CSS1
`border-style`	border style	`none` `dashed` `dotted` `double` `groove` `inset` `outset` `solid`	CSS1
`border-color`	border color	color	CSS1
`border-top/right/bottom/left`	individual settings for top, right, bottom, and left	border-top-width border-top-style border-top-color	CSS1

Margin & Padding

Property	Description	Values	W3C
`margin`	space between element border and parent/surrounding elements	`auto` length %	CSS1
`margin-top/right/bottom/left`	individual settings for top, right, bottom, and left	margin	CSS1
`padding`	space between element and element border	length %	CSS1
`padding-top/right/bottom/left`	individual settings for top, right, bottom, and left	padding	CSS1

Size

Property	Description	Values	W3C
`height`	height	length %	CSS1
`width`	width	length %	CSS1

Position

Property	Description	Values	W3C
`position`	how the location of the element is determined relative to the page or surrounding elements	`static` `relative` `absolute` `fixed`	CSS2
`top`	distance from top edge of parent element	% length	CSS2
`right`	distance from right edge of parent element	% length	CSS2
`bottom`	distance from bottom edge of parent element	% length	CSS2
`left`	distance from left edge of parent element	% length	CSS2
`float`	if/how an element is floated relative to adjacent elements	`left` `right` `none`	CSS1
`clear`	sides of an element where floating elements are not allowed	`left` `right` `both` `none`	CSS1
`overflow`	if/how scroll bars are displayed when element content exceeds specified height and width	`visible` `hidden` `scroll` `auto`	CSS2
`clip`	shape of an element	shape	CSS2
`vertical-align`	vertical alignment of an element	`baseline` `sub` `super` `top` `text-top` `middle` `bottom` `text-bottom` length %	CSS1
`z-index`	z-axis or "stack" order of an element	number	CSS2

Display

Property	Description	Values	W3C
`display`	if/how element is displayed (elements with display: none do not take up space)	`none` `inline` `block`	CSS1
`visibility`	if element should is visible (elements with visibility: hidden do take up space)	`visible` `hidden` `collapse`	CSS2

Print

Property	Description	Values	W3C
`page-break-after`	page-breaking behavior after an element	`auto` `always` `avoid` `left` `right`	CSS2
`page-break-before`	page-breaking behavior before an element	`auto` `always` `avoid` `left` `right`	CSS2
`page-break-inside`	page-breaking behavior inside an element	`auto` `avoid`	CSS2

Units

Length

Unit	Description	Relative/Fixed
%	percentage (based on size of parent element or size of default font)	Relative
`em`	em units (based on the size of default font; roughly, the width of a capital letter "M")	Relative
`px`	pixels	Fixed
`pt`	points (roughly 1/72-inch when printed)	Fixed
`in`/`cm`/`mm`	inches/centimeters/millimeters	Fixed

Colors

Unit	Description
color	color name (e.g., `red`, `green`, `blue`)
#rrggbb	hexadecimal red/green/blue value (e.g., `#ff0000`, `#00ff00`, `#0000ff`)

Media Types

Media Type	Description	Support
`all`	all media type devices	good
`screen`	typical computer screens	good
`print`	printers	good
`aural`	speech synthesizers	none
`braille`	refreshable braille displays	none
`embossed`	braille printers	none
`handheld`	small or handheld devices	some
`projection`	projected presentations, like slideshows	none
`tty`	media using a fixed-pitch character grid, like teletypes and terminals	none
`tv`	television screens	none

The Box Model

The CSS Box Model describes how block-level content is rendered (displayed) in a web browser. Each block-level element is displayed within a set of rectangular boxes, starting with a box for the content (text, image, etc) and surrounded by optional boxes for padding, border, and margin; a background can be applied behind the content and padding areas:

margin

border

padding

content

The Box Model Problem

According to W3C standards, the height or width of an element is equal to the height or width of the content box alone; the width of padding, border, and margin are not included in the height or width value. However, Microsoft Internet Explorer 5 includes an element's padding and border when calculating height or width:

height/width (W3C) = content
height/width (IE 5) = content + padding + border

There are two approaches to addressing this problem:

avoid applying padding or border to elements that have height or width set
use a "box model hack" to provide one height or width value for standards-compliant browsers and another to Internet Explorer 5 (see Filters & Hacks at the end of this document)

Browser Compatibility Filters & Hacks

Style Sheet Filters

The following technique can be used to hide entire style sheets from older browsers:

Hide from	Syntax
IE 4, Netscape 4, IE 5 Mac (and older)	<style type="text/css"> @import 'filename.css'; </style>

Style Rule Filters

The following techniques can be used to present specific style rules only to certain browsers:

Show to	Syntax
IE 5, 6, 7	*property: value;
IE 5, 6	_property: value;
IE 5	_property /**/: value;
IE 6	_propert\y: value;
IE 7	propert\y /*/: value; (note: the \ may not preceed letters a-f)
Safari 3	.className[class="CLASSNAME"] {property: value;}

References:

W3C CSS2 Property Index (http://www.w3.org/TR/REC-CSS2/propidx.html)
W3Schools CSS2 Reference (http://www.w3schools.com/css/css_reference.asp)
WDG CSS Properties (http://www.htmlhelp.com/reference/css/properties.html)
DevGuru CSS2 Index (http://www.devguru.com/Technologies/css/quickref/css_index.html)
Centricle CSS Filters (http://centricle.com/ref/css/filters)