THE MEGA

CHEAT SHEET
CSS3 is the latest evolution of the Cascading Style Sheets
language and aims at extending CSS2.1. It brings a lot of
long-awaited novelties, like rounded corners, shadows,
gradients, transitions or animations, as well as new layouts
like multi-columns, flexible box or grid layouts. Experimental
parts are vendor-prefixed and should either be avoided in
production environments, or used with extreme caution as
both their syntax and semantics can change in the future.

BACKGROUNDS

background background-attachment background-color

background-image scroll | fixed color

background-position transparent
background-break
background-size
bounding-box | each-box | continuous background-color
background-repeat
color
background-attachment background-clip
transparent
background-origin length

background-clip % background-image
background-color border-box | padding-box | content-box | url
no-clip
background-origin none
background-repeat
border-box | padding-box | content-box background-size
repeat | repeat-x | repeat-y | no-repeat
background-position length

top left | top center | top right | center left | %

center center | center right | bottom left |
bottom center | bottom right auto | cover | contain

x-% y-%

x-pos y-pos
 BORDER

border border-break background-color

border-width border-width color

border-style border-style transparent

border-color color
border-collapse
close
border-bottom collapse | separate

border-bottom-width border-bottom-color
border-color
border-style border-color
color
border-color
border-bottom-style
border-left border-image
border-style
image
border-left-width
border-left-color
[ number / %
border-style
border-color border-width
border-color
stretch | repeat | round ]
border-left-width
border-left-style
none
thin | medium | thick length
border-style

border-right-style border-right
border-right-color
border-right-width
border-style
border-color
border-style
border-top
border-right-width border-color

border-top-width
thin | medium | thick | length
border-radius
border-style
border-top-width border-radius
border-color
border-top-right-radius
thin | medium | thick | length
border-top-color border-bottom-right-radius
border-width border-bottom-left-radius
border-color

thin | medium | thick | length border-top-left-radius

border-top-style
border-style border-top-right-radius
border-style
none | hidden | dotted | length
box-shadow
dashed | solid | double |
inset || [ length, length,
border-bottom-right-radius
groove | ridge | inset | outset
length, length || <color> ] length

none
border-bottom-left-radius

length
BOX MODEL

float margin-left marquee-direction

left | right | none auto forward | reverse

height
height marquee-loop
%
auto infinite

length margin-right integer

% auto
marquee-play-count
height
max-height infinite
%
none integer

length margin-top
marquee-speed
% auto
slow | normal | fast
length
max-width
% marquee-style
none
scroll | slide | alternate
length padding

% padding-top overflow

padding-right visible | hidden | scroll |

min-height
padding-bottom auto | no-display | no-content
none
padding-left overflow-x
length
overflow-y
% padding-bottom

length overflow-style
min-width
% auto | marquee-line | marquee-block
none | inherit

length padding-left overflow-x

% length visible | hidden | scroll |

% auto | no-display | no-content

width

auto padding-right overflow-x

% length visible | hidden | scroll |

length % auto | no-display | no-content

rotation
margin padding-top
angle
margin-top length

margin-right % rotation-point
margin-bottom
position (paired value off-set)
display
margin-left
none | inline | block | inline-block | visibility
list-item |run-in | compact | table |
margin-bottom inline-table | table-row-group | visible | hidden | collapse
table-header-group |
auto table-footer-group | table-row |
table-column-group | table-column | clear
length table-cell | table-caption | ruby |
ruby-base | ruby-text | left | right | both | none
% ruby-base-group | ruby-text-group
FONT

font font-family font-size

font-style normal | wider | narrower | xx-small | x-small | small | medium |

ultra-condensed | extra-condensed | large | x-large | xx-large | smaller |
font-variant condensed | semi-condensed | larger |
semi-expanded | ultra-expanded |
font-weight inherit inherit

font-size/line-height length
font-style
font-family %
normal | italic | oblique | inherit
caption | icon | menu | message-box |
small-caption | status-bar font-weight
font-variant
normal | bold | bolder | lighter |
font-size-adjust normal | small-caps | inherit 100 | 200 | 300 | 400 | 500 | 600 |
700 | 800 | 900 | inherit
none | inherit

number

TEXT

direction punctuation-trim text-emphasis

ltr | rtl | inherit none | [ start | end | adjacent ] none | [ [ accent | dot | circle | disc | [
before | after ]?]

hanging-punctuation text-align
text-indent
none | [ start | end | end-edge ] start | end | left | right | center | justify
length
letter spacing text-align-last %

normal start | end | left | right | center | justify

text-justify
length
text-decoration auto | inter-word | inter-ideograph |
% inter-cluster | distribute | kashida |
none | underline | overline | tibetan
line-thorugh | blink
text-outline
text-transform
none
text-shadow
none | capitalize | uppercase |
color
none lowercase
length
color
text-wrap
unicode-bidi length
normal | unresrricted | none |
suppress
normal | embed | bidi-override
word-break
word-spacing
white-space normal | keep-all | loose | break-strict |
break-all
normal
normal | pre | nowrap | pre-wrap | pre-line
length
word-wrap
white-space-collapse %
normal
perserve | collapse | pre-serve-breaks |
discard length

%
COLUMN

column-count column-rule columns column-span

auto column-rule-width column-width 1 | all

number column-rule-style column-count

column-width
column-rule-color
column-fill column-rule-width auto

auto | balance column-rule-style thin | medium | thick length

border-style length
column-gap

normal

length

COLORS GRID POSTIONING

color opacity grid-columns grid-rows

inherit inherit none | inherit none | inherit

color number [ length percentage relative length ] [ length percentage relative length ]

TEMPLATE LAYOUT

box-align box-flex-group box-pack

start | end | center | base integer start | end | center | justify

box-direction box-lines box-sizing

normal | reverse single | multiple content-box | padding-box |

border-box | margin-box

box-flex box-orient
tab-side
normal horizontal | verticle | inline-axis |
block-axis top | bottom | left | right

TABLE

border-collapse border-spacing caption-side

collapse | separate length length top | bottom | left | right

empty-cells table-layout

show | hide auto | fixed

 SPEECH

cue cue-after caption-side

cue-before url [ silent | x-soft | soft | medium | loud top | bottom | left | right
| x-loud | none | inherit ]
cue-after
number rest
cue-before % rest-before

url [ silent | x-soft | soft | medium | loud | rest-after

x-loud | none | inherit ] pause

number pause-before rest-before

% pause-after
none | x-weak | weak | medium |
strong | x-strong | inherit
mark pause-before
time
mark-before none | x-weak | weak | medium | strong
| x-strong | inherit
mark-after rest-after
time
none | x-weak | weak | medium |
mark-before strong | x-strong | inherit
phonemes
string time
string

mark-after speak
voice-duration
string none | normal | spell-out | digits |
time literal-punctuation | no-punctuation |
inherit-number
voice-pitch-range
voice-family
x-low | low | medium | high | x-high | inherit
inherit | [ <specific-voice, age, generic-voice,
number number> ]

voice-stress voice-rate

strong | moderate | none | reduced | inherit x-slow | slow | medium | fast | x-fast | inherit

%
voice-volume
voice-pitch
silent | x-soft | soft | medium | loud | x-loud |
inherit
x-low | low | medium | high | x-high | inherit
number
number
%
%
 SPEECH

cue cue-after caption-side

cue-before url [ silent | x-soft | soft | medium | loud top | bottom | left | right
| x-loud | none | inherit ]
cue-after
number rest
cue-before % rest-before

url [ silent | x-soft | soft | medium | loud | rest-after

x-loud | none | inherit ] pause

number pause-before rest-before

% pause-after
none | x-weak | weak | medium |
strong | x-strong | inherit
mark pause-before
time
mark-before none | x-weak | weak | medium | strong
| x-strong | inherit
mark-after rest-after
time
none | x-weak | weak | medium |
mark-before strong | x-strong | inherit
phonemes
string time
string

mark-after speak
voice-duration
string none | normal | spell-out | digits |
time literal-punctuation | no-punctuation |
inherit-number
voice-pitch-range
voice-family
x-low | low | medium | high | x-high | inherit
inherit | [ <specific-voice, age, generic-voice,
number number> ]

voice-stress voice-rate

strong | moderate | none | reduced | inherit x-slow | slow | medium | fast | x-fast | inherit

%
voice-volume
voice-pitch
silent | x-soft | soft | medium | loud | x-loud |
inherit
x-low | low | medium | high | x-high | inherit
number
number
%
%
LIST & MARKERS

list-style list-style-image list-style-type marker-offset

list-style-type none none | asterisks | box | check | circle | auto

diamond | disc | hyphen | square |
list-style-position url decimal | decimal-leading-zero | length
lower-roman | upper-roman |
list-style-image lower-alpha | upper-alpha |
lower-greek | lower-latin | upper-latin |
hebrew | armenian | georgian |
cjk-ideographic | hiragana | katakana |
hiragana-iroha | katakana-iroha |
footnotes

ANIMATIONS

animations animation-delay animation-direction

animation-name time normal | alternate

animation-duration
animation-delay animation-iteration-count
animation-timing-function
time inherit
animation-delay
number
animation-iteration-count animation-name
animation-direction none | IDENT animation-play-state

running | paused
animation-timing-function

ease | linear | ease-in | ease-out |

ease-in-out | cubic-Bezier (number,
number, number, number)

TRANSITIONS

transitions transitions-delay transition-timing-function

transitions-property time ease | linear | ease-in | ease-out |

ease-in-out | cubic-Bezier ( number,
transitions-duration number, number, number)
transitions-duration
transitions-timing-function
time
transitions-delay

transitions-property

none | all
UI

appearance cursor nav-index nav-down

normal | inherit | [icon | auto | crosshair | default | auto | inherit auto | inherit
window | desktop | work-space | pointer | move | e-resize | <id> [ current | root |
document | tooltip | dialog | ne-resize | nw-resize | n-resize | number <target-name> ]
button | push-button | se-resize | sw-resize | sw-resize |
hyperlink | radio-button | s-resize | w-resize | text | wait |
checkbox | menu-item | tab | help nav-up nav-left
menu | menubar |
pull-down-menu | url auto | inherit auto | inherit
pop-up-menu | list-menu | <id> [current | root | <id> [ current | root |
radio-group | <target-name> ] <target-name> ]
checkbox-group | outline-tree | icon
range | field | combo-box |
signature | password]
auto | inherit
nav-right resize
url
auto | inherit none | both | horizontal |
<id> [ current | root | vertical | inherit
<target-name> ]
PSEUDO-CLASS RELATIVE MEASUREMENT

:active an activated element ch width of the "0" glyph found in the font for the font
size used to render
:focus an element while the element has focus
em 1em = current font size of current element
:visited a visited link
ex x-height of the element's font
:hover an element when you mouse over it
gd the grid defined by 'layout-grid'
:link an unvisited link
px pixel of the viewing device
:disabled an element while the element is disabled
rem the font size of the root element
:enabled an element while the element is enabled
vh the viewport's height
:checked an element (form element control) that is checked
vw the viewport's width
:selection an element that is currently selected of highlighted
by the user vm viewport's height or width, whichever is smaller of
the two
:lang allows the author to specify a language to use in a
specified element

:nth-child(n) an element that is the n-th sibling

ANGLES
:nth-last child(n) an element that is the n-th sibling counting
from the last sibling
deg degrees
:first-child an element that is the first sibling
grad grads
:last-child an element that is the last sibling
rad radians
:only-child an element that is the only child
turn turns
:nth-of-type(n) an element that is the n-th sibling of its type

:nth-last-of-type(n) an element that is the n-th sibling of its type

counting from the last sibling
TIME
:last-of-type an element that is the last sibling of its type

:first-of-type an element that is the first sibling of its type ms milli-seconds

:only-of-type an element that is the only of its type s seconds

:empty an element that has no children

:root root element within the document

:not(x) an element not represented by the argument 'x'

FREQUENCY
:target a target element as specified by a target in a URI
Hz hertz

kHz kilo-hertz

PSEUDO-ELEMENT

::first-letter Adds special style to the first letter of a text COLORS

::first-line Adds special style to the first line of a text
color name red, blue, green, dark green
::before Inserts some content before an element
rgb(x,y,z) red = rgb(255,0,0)
::after Inserts some content after an element
rgb(x%,y%,z%) red = rgb(100%,0,0)

rgba(x,y,z,alpha) red = rgba(255,0,0)

ABSOLUTE MEASUREMENT #rrggbb red = #ff0000 (or shorthand = #f00)

hsl(hue, saturation, lightness)

% percentage red=hsl (0, 100%, 50%)

cm centimeter flavor An accent color (typically chosen by the

user) to customize the user interface of
in inch the user agent itself.

mm millimeter currentColor computed value of the 'currentColor'

keyword is the computed value of the
pc pica (1p = 12 points) 'color' property

pt point (1pt = 1/72 inch)

SELECTOR TYPES

Name Info Example

Universal Any element * { font: 10px Arial; }

Type Any element of that type h1 { text-decoration: underline; }

Grouping Multiple elements of different types h1, h2, h3 { font-family: Verdana; }

Class Multiple elements of different types when you .sampleclass { text-decoration: underline; }
don't want to affect all instances of that type

Id A single element type when you don't want to #sampled { text-decoration: underline; }
affect all instances of that type

Descendant An element that is below (in the document #gallery h1 { text-decoration: underline; }
tree) another element - no matter how many
levels below

Child An element that is directly below (in the #title > p { font-weight: bold; }
document tree) another element

Adjacent Sibling All elements that share the same parent and h1 + p { font-style: italic; }
elements are in the same immediate sequence

General Sibling All elements that share the same parent and h1 ~ p { font-style: italic; }
elements are in the same sequence
(not necessarily immediate)

Attribute An element with that matches the attribute E[selected] - att whatever the value
listed E[att="val"] - att with a specific value
E[rel~="next"] - att with a value is a whitespace separated list
*[lang|="en"] - att value either being exactly "val" or beginning
with "val" immediately followed by "-"
E[att^="val"] - att value that begins with the prefix "val"
E[att$="val"] - att vale that begins with the suffix "val"
E[att*="val"] - att value contains at least one instance of the
substring "val"
OUTLINE

outline outline-offset outline-style outline-width

outline-color inherit none | dotted | dashed | thin | medium | thick

solid | double | groove |
outline-style length ridge | inset | outset length

outline-width

3D / 2D TRANSFORM

backface-visibility perspective-origin transform transform-origin

visible | hidden [ [ [ percentage> | none | matrix | matrix3d | [ [ [ <percentage> |

<length> | left | center | translate3d | tranlateX | <length> | left | center |
right ] [ <percentage> | translateY | translateZ | right ] [ <percentage> |
perspective <length> | top | center | scale | scale3d | scaleX | <length> | top | center |
bottom ]? ] <length> ] | scaleY | scaleZ | rotate | bottom ]? ] <length> ] |
none [ [ [ left | center | right ] || rotate3d | rotateX | [ [ [ left | center | right ] ||
[ top | center | bottom ] ] rotateY | rotateZ | skewX | [ top | center | bottom ] ]
number <length> ] skewY | skew | <length> ]
perspective

transform-style

flat | preserve-3d

GENERATED CONTENT

bookmark-label counter-reset hyphenate-lines marks

content none no-limit [crop || cross ] | none

attr identifier number integer

move-to
string
crop hyphenate-resource normal | here

bookmark-level auto none identifier

none shape url

page-policy
integer
display hyphens start | first | last

bookmark-target normal | none | list-item none | manual | auto

quotes
self
float-offset image-resolution none
url
length length normal | auto string string string string
attr
dpi
hyphenate-after string-set
border-length
auto hyphenate-before identifier
self
integer auto content-list
url
integer
attr counter-increment text-replace

none hyphenate-character none

content
identifier number auto [<string> <string>]+
normal | none | inhibit
string
url
LINE BOX

alignment-adjust drop-initial-after-align drop-initial-size line-stacking-strategy

auto | baseline | before-edge | alignment-baseline auto inline-line-height |

text-before-edge | middle | central | block-line-height |
after-edge | text-after-edge | integer max-height | grid-height
ideographic | alphabetic | hanging | drop-initial-after-align
mathematical %
central | middle | after-edge | line-stacking-ruby
length text-after-edge | ideographic | line
alphabetic | mathematical exclude-ruby | include-ruby
%
% inline-box-align
alignment-baseline line-stacking-shift
initial | last
drop-initial-before-align consider-shifts |
baseline | ise-script | before-edge | integer
text-before-edge | after-edge | disregard-shifts
caps-height
text-after-edge | central | middle |
ideographic | alphabetic | hanging |
alignment-baseline line-height line-stacking
mathematical

normal line-stacking-strategy
baseline-shift drop-initial-before-adjust
number line-stacking-ruby
baseline | sub | super before-edge | text-before-edge |
central | middle | hanging | length line-stacking-shift
length mathematical
%
% length text-height
% line-stacking
dominant-baseline auto | font-size | text-size |
max-size
line-stacking-strategy
auto | use-script | no-change | drop-initial-value
reset-size | alphabetic | hanging | line-stacking-ruby
ideographic | mathematical | initial
vertical-align
central | middle | text-after-edge | line-stacking-shift
text-before-edge integer Baseline | sub | super | top |
text-top | middle | bottom |
text-bottom

length

%
HYPERLINK

target target-name target-new target-position

target-name current | root | parent | new | window | tab | none above | behind | front | back
modal
target-new
string
target-position
POSITIONING

bottom clip left position

auto shape auto static | relative | absolute | fixed

% auto %

length length
top

right auto z-index

auto % auto

% length number

length

RUBY

ruby-align ruby-overhang ruby-position ruby-span

auto | start | left | center | auto | start | end | none before | after | right | inline attr(x) | none
end | right | distribute-letter |
distribute-space | line-edge

PAGED MEDIA

fit image-orientation page-break-after size

fill | hidden | meet | slice auto auto | always | avoid | left | right auto | landscape | portrait

angle length
fit-position page-break-before

[top | center | bottom] || page auto | always | avoid | left | right windows
[left | center | right]
auto integer
length page-break-inside
% identifier
auto | avoid

orphans

integer