CSS Cheatsheet on PSP

Box Model

Margin

Border

Padding

Content

Selector

Pattern	Meaning	Described in section
*	Matches any element.	Universal selector
E	Matches any E element (i.e., an element of type E).	Type selectors
E F	Matches any F element that is a descendant of an E element.	Descendant selectors
E > F	Matches any F element that is a child of an element E.	Child selectors
E:first-child	Matches element E when E is the first child of its parent.	The :first-child pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
E:active E:hover E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	Matches any F element immediately preceded by a sibling element E.	Adjacent selectors
E[foo]	Matches any E element with the "foo" attribute set (whatever the value).	Attribute selectors
E[foo="warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning".	Attribute selectors
E[foo~="warning"]	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".	Attribute selectors
E[lang\|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".	Attribute selectors
DIV.warning	Language specific. (In HTML, the same as DIV[class~="warning"].)	Class selectors
E#myid	Matches any E element with ID equal to "myid".	ID selectors

Property

a b c d e f h l m o p q r s t u v w z

Name	Values	Initial value
azimuth	<angle> \| [[ left-side \| far-left \| left \| center-left \| center \| center-right \| right \| far-right \| right-side ] \|\| behind ] \| leftwards \| rightwards \| inherit	center
background-attachment	scroll \| fixed \| inherit	scroll
background-color	<color> \| transparent \| inherit	transparent
background-image	<uri> \| none \| inherit	none
background-position	[ [ <percentage> \| <length> \| left \| center \| right ] [ <percentage> \| <length> \| top \| center \| bottom ]? ] \| [ [ left \| center \| right ] \|\| [ top \| center \| bottom ] ] \| inherit	0% 0%
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit	repeat
background	[background-color \|\| background-image \|\| background-repeat \|\| background-attachment \|\| background-position] \| inherit	see individual properties
border-collapse	collapse \| separate \| inherit	separate
border-color	[ <color> \| transparent ]{1,4} \| inherit	see individual properties
border-spacing	<length> <length>? \| inherit	0
border-style	[none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset]{1,4} \| inherit	see individual properties
border-top border-right border-bottom border-left	[ <border-width> \|\| <border-style> \|\| border-top-color ] \| inherit	see individual properties
border-top-color border-right-color border-bottom-color border-left-color	<color> \| transparent \| inherit	the value of the 'color' property
border-top-style border-right-style border-bottom-style border-left-style	<border-style> \| inherit	none
border-top-width border-right-width border-bottom-width border-left-width	<border-width> \| inherit	medium
border-width	<border-width>{1,4} \| inherit	see individual properties
border	[ <border-width> \|\| <border-style> \|\| border-top-color ] \| inherit	see individual properties
bottom	<length> \| <percentage> \| auto \| inherit	auto
caption-side	top \| bottom \| inherit	top
clear	none \| left \| right \| both \| inherit	none
clip	<shape> \| auto \| inherit	auto
color	<color> \| inherit	depends on user agent
content	normal \| none \| [ <string> \| <uri> \| <counter> \| attr(<identifier>) \| open-quote \| close-quote \| no-open-quote \| no-close-quote ]+ \| inherit	normal
counter-increment	[ <identifier> <integer>? ]+ \| none \| inherit	none
counter-reset	[ <identifier> <integer>? ]+ \| none \| inherit	none
cue-after	<uri> \| none \| inherit	none
cue-before	<uri> \| none \| inherit	none
cue	[ cue-before \|\| cue-after ] \| inherit	see individual properties
cursor	[ [<uri> ,]* [ auto \| crosshair \| default \| pointer \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| text \| wait \| help \| progress ] ] \| inherit	auto
direction	ltr \| rtl \| inherit	ltr
display	inline \| block \| list-item \| run-in \| inline-block \| table \| inline-table \| table-row-group \| table-header-group \| table-footer-group \| table-row \| table-column-group \| table-column \| table-cell \| table-caption \| none \| inherit	inline
elevation	<angle> \| below \| level \| above \| higher \| lower \| inherit	level
empty-cells	show \| hide \| inherit	show
float	left \| right \| none \| inherit	none
font-family	[[ <family-name> \| <generic-family> ] [, <family-name>\| <generic-family>]* ] \| inherit	depends on user agent
font-size	<absolute-size> \| <relative-size> \| <length> \| <percentage> \| inherit	medium
font-style	normal \| italic \| oblique \| inherit	normal
font-variant	normal \| small-caps \| inherit	normal
font-weight	normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| inherit	normal
font	[ [ font-style \|\| font-variant \|\| font-weight ]? font-size [ / line-height ]? font-family ] \| caption \| icon \| menu \| message-box \| small-caption \| status-bar \| inherit	see individual properties
height	<length> \| <percentage> \| auto \| inherit	auto
left	<length> \| <percentage> \| auto \| inherit	auto
letter-spacing	normal \| <length> \| inherit	normal
line-height	normal \| <number> \| <length> \| <percentage> \| inherit	normal
list-style-image	<uri> \| none \| inherit	none
list-style-position	inside \| outside \| inherit	outside
list-style-type	disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha \| none \| inherit	disc
list-style	[ list-style-type \|\| list-style-position \|\| list-style-image ] \| inherit	see individual properties
margin-right margin-left	<margin-width> \| inherit	0
margin-top margin-bottom	<margin-width> \| inherit	0
margin	<margin-width>{1,4} \| inherit	see individual properties
max-height	<length> \| <percentage> \| none \| inherit	none
max-width	<length> \| <percentage> \| none \| inherit	none
min-height	<length> \| <percentage> \| inherit	0
min-width	<length> \| <percentage> \| inherit	0
orphans	<integer> \| inherit	2
outline-color	<color> \| invert \| inherit	invert
outline-style	<border-style> \| inherit	none
outline-width	<border-width> \| inherit	medium
outline	[ outline-color \|\| outline-style \|\| outline-width ] \| inherit	see individual properties
overflow	visible \| hidden \| scroll \| auto \| inherit	visible
padding-top padding-right padding-bottom padding-left	<padding-width> \| inherit	0
padding	<padding-width>{1,4} \| inherit	see individual properties
page-break-after	auto \| always \| avoid \| left \| right \| inherit	auto
page-break-before	auto \| always \| avoid \| left \| right \| inherit	auto
page-break-inside	avoid \| auto \| inherit	auto
pause-after	<time> \| <percentage> \| inherit	0
pause-before	<time> \| <percentage> \| inherit	0
pause	[ [<time> \| <percentage>]{1,2} ] \| inherit	see individual properties
pitch-range	<number> \| inherit	50
pitch	<frequency> \| x-low \| low \| medium \| high \| x-high \| inherit	medium
play-during	<uri> [ mix \|\| repeat ]? \| auto \| none \| inherit	auto
position	static \| relative \| absolute \| fixed \| inherit	static
quotes	[<string> <string>]+ \| none \| inherit	depends on user agent
richness	<number> \| inherit	50
right	<length> \| <percentage> \| auto \| inherit	auto
speak-header	once \| always \| inherit	once
speak-numeral	digits \| continuous \| inherit	continuous
speak-punctuation	code \| none \| inherit	none
speak	normal \| none \| spell-out \| inherit	normal
speech-rate	<number> \| x-slow \| slow \| medium \| fast \| x-fast \| faster \| slower \| inherit	medium
stress	<number> \| inherit	50
table-layout	auto \| fixed \| inherit	auto
text-align	left \| right \| center \| justify \| inherit	left' if 'direction' is 'ltr'; 'right' if 'direction' is 'rtl'
text-decoration	none \| [ underline \|\| overline \|\| line-through \|\| blink ] \| inherit	none
text-indent	<length> \| <percentage> \| inherit	0
text-transform	capitalize \| uppercase \| lowercase \| none \| inherit	none
top	<length> \| <percentage> \| auto \| inherit	auto
unicode-bidi	normal \| embed \| bidi-override \| inherit	normal
vertical-align	baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| <percentage> \| <length> \| inherit	baseline
visibility	visible \| hidden \| collapse \| inherit	visible
voice-family	[[<specific-voice> \| <generic-voice> ],]* [<specific-voice> \| <generic-voice> ] \| inherit	depends on user agent
volume	<number> \| <percentage> \| silent \| x-soft \| soft \| medium \| loud \| x-loud \| inherit	medium
white-space	normal \| pre \| nowrap \| pre-wrap \| pre-line \| inherit	normal
widows	<integer> \| inherit	2
width	<length> \| <percentage> \| auto \| inherit	auto
word-spacing	normal \| <length> \| inherit	normal
z-index	auto \| <integer> \| inherit	auto

Composed by Robin Lu