Professional Documents
Culture Documents
CSS3 Cheat Sheet
CSS3 Cheat Sheet
FREE
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
background-attachment
scroll | fixed
background-break
bounding-box | each-box |
continuous
background-clip
length
%
border-box | padding-box |
content-box | no-clip
background-color
color
transparent
background-image
url
none
background-origin
border-box | padding-box |
content-box
top left | top center | top
right | center left | center
center | center right |
bottom left | bottom center
| bottom right
x-% y-%
x-pos y-pos
background-position
background-repeat
background-size
length
%
auto | cover | contain
BORDER
border-top
border-top-width
border-style
border-color
border-top-color
border-color
border-top-style
border-style
border-top-width
border-width
border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-top-right-radius
length
border-break
border-width
border-style
border-color
border-width
border-style
color
close
border-bottom
border-bottom-width
border-style
border-color
border-bottom-color
border-color
border-bottom-style
border-style
border-bottom-width
border-collapse
collapse | separate
border-color
color
border-image
image
[ number / %
border-width
stretch | repeat | round ]
none
border-bottom-left-radius
length
border-top-left-radius
length
box-shadow
border-style
height
auto
length
%
max-height
none
length
%
max-width
none
length
%
min-height
none | inherit
length
%
min-width
none | inherit
length
%
width
auto
%
length
margin
margin-top
margin-right
margin-bottom
margin-left
margin-bottom
auto
length
%
margin-left
auto
length
%
margin-right
auto
length
%
margin-top
auto
length
%
padding
padding-top
padding-right
padding-bottom
padding-left
padding-bottom
length
%
padding-left
length
%
FONT
font
font-style
font-variant
font-weight
font-size/line-height
font-family
caption | icon | menu |
message-box | smallcaption | status-bar
font-family
family-name
generic-family
inherit
font-size
font-size-adjust
none| inherit
number
padding-right
length
%
font-stretch
padding-top
length
%
marquee-direction
forward | reverse
marquee-loop
infinite
number
marquee-play-count
infinite
integer
marquee-speed
marquee-style
overflow
overflow-style
overflow-x
overflow-y
font-style
font-variant
font-weight
border-left
border-left-width
border-style
border-color
border-left-color
border-color
border-left-style
border-style
clear
border-left-width
display
border-right
border-right-width
border-style
border-color
border-right-color
border-color
border-right-style
border-style
border-right-width
http://www.veign.com
border-bottom-right-radius length
BORDER
border
BOX MODEL
float
BOX MODEL
rotation
angle
rotation-point
visibility
Page 2 of 5
FREE
TEMPLATE LAYOUT
direction
box-align
hanging-punctuation
box-direction
normal | reverse
letter-spacing
normal
length
%
box-flex
number
box-flex-group
integer
punctuation-trim
box-lines
single | multiple
box-orient
text-align
box-pack
text-align-last
box-sizing
content-box | padding-box |
border-box | margin-box
text-decoration
tab-side
text-emphasis
text-indent
length
%
text-justify
text-outline
text-shadow
border-collapse
collapse | separate
border-spacing
length length
caption-side
empty-cells
show | hide
none
color
length
table-layout
auto | fixed
none
color
length
cue
cue-before
cue-after
cue-before
cue-after
mark
mark-before
mark-after
mark-before
string
mark-after
string
text-transform
text-wrap
unicode-bidi
white-space
white-space-collapse
word-break
TABLE
pause
pause-before
pause-after
word-wrap
normal | break-word
pause-before
pause-after
COLUMN
column-fill
auto | balance
column-gap
normal
length
column-rule
column-rule-width
column-rule-style
column-rule-color
column-rule-color
color
column-rule-style
border-style
column-rule-width
columns
column-width
column-count
column-span
1 | all
column-width
auto
length
phonemes
string
rest
rest-before
rest-after
rest-before
rest-after
speak
voice-balance
COLOR
color
opacity
inherit
color
voice-duration
time
inherit
number
http://www.veign.com
voice-rate
voice-pitch
voice-pitch-range
voice-stress
voice-volume
list-style
list-style-type
list-style-position
list-style-image
list-style-image
none
url
list-style-position
Inside | outside
list-style-type
marker-offset
auto
length
SPEECH
normal
length
%
auto
number
inherit | [ <specific-voice,
age, generic-voice, number> ]
word-spacing
column-count
SPEECH
voice-family
ANIMATIONS
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-delay
time
animation-direction
normal | alternate
animation-duration
time
animation-iteration-count
inherit
number
animation-name
none | IDENT
animation-play-state
running | paused
animation-timing-function
TRANSITIONS
transition
transition-property
transition-duration
transition-timing-function
transition-delay
transition-delay
time
transition-duration
time
transition-property
none | all
transition-timing-function
Page 3 of 5
FREE
none | inherit
[ length percentage relative
length ]
grid-rows
none | inherit
[ length percentage relative
length ]
OUTLINE
outline
outline-color
GENERATED CONTENT
hyphenate-after
auto
integer
hyphenate-before
auto
integer
hyphenate-character
auto
string
color
invert
line-stacking-ruby
exclude-ruby | include-ruby
hyphens
line-stacking-shift
consider-shifts | disregardshifts
text-height
vertical-align
marks
move-to
normal | here
identifier
page-policy
quotes
none
string string string string
backface-visibility
visible | hidden
perspective
none
number
perspective-origin
[ [ [ percentage> |
<length> | left | center |
right ] [ <percentage> |
<length> | top | center |
bottom ]? ] <length> ] |
[ [ [ left | center | right ] ||
[ top | center | bottom ] ]
<length> ]
none | matrix | matrix3d |
translate3d | translateX |
translateY | translateZ |
scale | scale3d | scaleX |
scaleY | scaleZ | rotate |
rotate3d | rotateX | rotateY
| rotateZ | skewX | skewY |
skew | perspective
[ [ [ <percentage> |
<length> | left | center |
right ] [ <percentage> |
<length> | top | center |
bottom ]? ] <length> ] |
[ [ [ left | center | right ] ||
[ top | center | bottom ] ]
<length> ]
string-set
identifier
content-list
text-replace
none
[<string> <string>]+
alignment-adjust
alignment-baseline
bookmark-target
border-length
baseline-shift
dominant-baseline
flat | preserve-3d
content
attr
string
drop-initial-after-align
alignment-baseline
drop-initial-after-adjust
none
integer
self
uri
attr
drop-initial-before-align
caps-height
alignment-baseline
auto
length
drop-initial-before-adjust
content
counter-increment
none
identifier number
drop-initial-value
counter-reset
none
identifier number
initial
integer
drop-initial-size
crop
auto
shape
auto
integer
%
line
display
inline-box-align
float-offset
length length
initial | last
integer
http://www.veign.com
HYPERLINK
target
target-name
target-new
target-position
target-name
target-new
target-position
LINE BOX
GENERATED CONTENT
bookmark-level
none
uri
outline-style
bookmark-label
line-stacking-strategy
hyphenate-resource
normal | auto
dpi
transform-style
line-stacking-strategy
line-stacking-ruby
line-stacking-shift
no-limit
integer
image-resolution
transform-origin
line-stacking
hyphenate-lines
inherit
length
transform
normal
number
length
%
outline-color
outline-style
outline-width
outline-offset
outline-width
LINE BOX
line-height
POSITIONING
bottom
auto
%
length
clip
shape
auto
left
auto
%
length
position
right
auto
%
length
top
auto
%
length
z-index
auto
number
RUBY
ruby-align
ruby-overhang
ruby-position
ruby-span
attr(x) | none
Page 4 of 5
FREE
fit-position
image-orientation
auto
angle
orphans
integer
page
auto
identifier
page-break-after
page-break-before
page-break-inside
auto | avoid
size
windows
integer
UI
appearance
cursor
icon
auto | inherit
url
nav-index
auto | inherit
number
nav-up
auto | inherit
<id> [ current | root |
<target-name> ]
nav-right
auto | inherit
<id> [ current | root |
<target-name> ]
nav-down
auto | inherit
<id> [ current | root |
<target-name> ]
nav-left
auto | inherit
<id> [ current | root |
<target-name> ]
resize
http://www.veign.com
Values in italics are place holders for an actual value (like 1px,
1em, 1%), values in normal text are values that can be used as
the actual value
Page 5 of 5
FREE
an activated element
:focus
:visited
a visited link
:hover
:link
an unvisited link
:disabled
:enabled
:checked
:selection
:lang
:nth-child(n)
:nth-last-child(n)
UNITS
:last-child
:only-child
Universal
Any element
cm
centimeter
Type
Any element of
that type
h1 { text-decoration:
underline; }
in
inch
Grouping
mm
millimeter
Multiple
elements of
different types
pc
Class
pt
Multiple
elements of
different types
when you dont
want to affect
all instances of
that type
Id
A single
element type
when you dont
want to affect
all instances of
that type
Descendant
An element that
is below (in the
document tree)
another
elementno
matter how
many levels
below
Child
An element that
is directly below
(in the
document tree)
another
element
Adjacent
Sibling
All elements
that share the
same parent
and elements
are in the same
immediate
sequence
h1 + p { font-style:
italic; }
General
Sibling
All elements
that share the
same parent
and elements
are in the same
sequence (not
necessarily
immediate)
h1 ~ p { font-style:
italic; }
Attribute
An element with
that matches
the attribute
listed
RELATIVE MEASUREMENT
ch
em
ex
gd
px
rem
vh
vw
vm
deg
degrees
grad
grads
rad
radians
turn
turns
:nth-last-of-type(n)
ms
milli-seconds
:first-of-type
:only-of-type
:empty
:root
:not(x)
:target
PSEUDO-ELEMENT
TIME
seconds
FREQUENCY
hertz
Hz
kilo-hertz
kHz
COLORS
color name
rgb(x,y,z)
red = rgb(255,0,0)
rgb(x%,y%,z%)
red = rgb(100%,0,0)
rgba(x,y,z, alpha)
red = rgba(255,0,0)
#rrggbb
hsl(hue, saturation,
lightness)
::first-letter
::first-line
flavor
::before
::after
currentColor
http://www.veign.com
Example
percentage
:nth-of-type(n)
:last-of-type
Info
:first-child
SELECTOR TYPES
Name
ABSOLUTE MEASUREMENT