Qrg0008 (CSS3) Css3 Cheat Sheet

Css3-Cheat-Sheet css3-cheat-sheet css3-cheat-sheet 54 asset pdf uploads lb-community 3:

: Littlebits Css3-Cheat-Sheet css3-cheat-sheet 78 asset pdf uploads

Open the PDF directly: View PDF .
Page Count: 5

Download
Open PDF In Browser	View PDF

Page 1 of 5

Quick Reference Guide

FREE

Cascading Style Sheets (CSS 3)
BACKGROUND
background

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

repeat | repeat-x | repeaty | no-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

thin | medium | thick
length

border-width

thin | medium | thick
length

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

thin | medium | thick
length

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

inset || [ length, length,
length, length ||  ]
none

border-style

none | hidden | dotted |
dashed | solid | double |
groove | ridge | inset |
outset

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

xx-small | x-small | small |
medium | large | x-large |
xx-large | smaller | larger |
inherit
length
%

font-size-adjust

none| inherit
number

padding-right

length
%

font-stretch

normal | wider | narrower |
ultra-condensed | extracondensed | condensed |
semi-condensed | semiexpanded | expanded |
extra-expanded | ultraexpanded | inherit

padding-top

length
%

marquee-direction

forward | reverse

marquee-loop

infinite
number

marquee-play-count

infinite
integer

marquee-speed

slow | normal | fast

marquee-style

scroll | slide | alternate

overflow

visible | hidden | scroll |
auto | no-display | nocontent
overflow-x
overflow-y

overflow-style

auto | marquee-line | marquee-block

overflow-x

visible | hidden | scroll |
auto | no-display | nocontent

overflow-y

visible | hidden | scroll |
auto | no-display | nocontent

font-style

normal | italic | oblique |
inherit

font-variant

normal | small-caps | inherit

font-weight

normal | bold | bolder |
lighter | 100 | 200 | 300 |
400 | 500 | 600 | 700 | 800
| 900 | inherit

border-left

border-left-width
border-style
border-color

border-left-color

border-color

border-left-style

border-style

clear

left | right | both | none

border-left-width

thin | medium | thick
length

display

border-right

border-right-width
border-style
border-color

border-right-color

border-color

border-right-style

border-style

border-right-width

thin | medium | thick
length

none | inline | block | inlineblock | list-item | run-in |
compact | table | inlinetable | table-row-group |
table-header-group | tablefooter-group | table-row |
table-column-group | tablecolumn | table-cell | tablecaption | ruby | ruby-base |
ruby-text | ruby-base-group
| ruby-text-group

http://www.veign.com

left | right | none

border-bottom-right-radius length

BORDER
border

BOX MODEL
float

BOX MODEL

Part Number: QRG0008

rotation

angle

rotation-point

position (paired value offset)

visibility

visible | hidden | collapse

©2009 Veign, All Rights Reserved

Page 2 of 5

Quick Reference Guide

FREE

Cascading Style Sheets (CSS 3)
TEXT

TEMPLATE LAYOUT

direction

ltr | rtl | inherit

box-align

start | end | center | base-

hanging-punctuation

none | [ start | end | endedge ]

box-direction

normal | reverse

letter-spacing

normal
length
%

box-flex

number

box-flex-group

integer

punctuation-trim

none | [start | end | adjacent]

box-lines

single | multiple

box-orient

text-align

start | end | left | right |
center | justify

horizontal | vertical | inlineaxis | block-axis

box-pack

start | end | center | justify

text-align-last

start | end | left | right |
center | justify

box-sizing

content-box | padding-box |
border-box | margin-box

text-decoration

none | underline | overline |
line-through | blink

tab-side

top | bottom | left | right

text-emphasis

none | [ [ accent | dot | circle
| disc] [ before | after ]? ]

text-indent

length
%

text-justify

auto | inter-word | interideograph | inter-cluster |
distribute | kashida | tibetan

text-outline

text-shadow

border-collapse

collapse | separate

border-spacing

length length

caption-side

top | bottom | left | right

empty-cells

show | hide

none
color
length

table-layout

auto | fixed

none
color
length

cue

cue-before
cue-after

cue-before

uri [ silent | x-soft | soft |
medium | loud | x-loud] |
none | inherit ]
number
%

cue-after

uri [ silent | x-soft | soft |
medium | loud | x-loud] |
none | inherit ]
number
%

mark

mark-before
mark-after

mark-before

string

mark-after

string

text-transform

none | capitalize | uppercase
| lowercase

text-wrap

normal | unrestricted | none
| suppress

unicode-bidi

normal | embed | bidioverride

white-space

normal | pre | nowrap | prewrap | pre-line

white-space-collapse

preserve | collapse | preserve-breaks | discard

word-break

TABLE

normal | keep-all | loose |
break-strict | break-all

pause

pause-before
pause-after

word-wrap

normal | break-word

pause-before

none | x-weak | weak |
medium | strong | x-strong
| inherit
time

pause-after

none | x-weak | weak |
medium | strong | x-strong
| inherit
time

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

thin | medium | thick
length

columns

column-width
column-count

column-span

1 | all

column-width

auto
length

phonemes

string

rest

rest-before
rest-after

rest-before

none | x-weak | weak |
medium | strong | x-strong
| inherit
time

rest-after

none | x-weak | weak |
medium | strong | x-strong
| inherit
time

speak

none | normal | spell-out |
digits | literal-punctuation |
no-punctuation | inherit

voice-balance

left | center | right | leftwards | rightwards | inherit
number

COLOR
color
opacity

inherit
color

voice-duration

time

inherit
number

http://www.veign.com

voice-rate

x-slow | slow | medium |
fast | x-fast | inherit
%

voice-pitch

x-low | low | medium | high
| x-high | inherit
number
%

voice-pitch-range

x-low | low | medium | high
| x-high | inherit
number

voice-stress

strong | moderate | none |
reduced | inherit

voice-volume

silent | x-soft | soft | medium | loud | x-loud | inherit
number
%

list-style

list-style-type
list-style-position
list-style-image

list-style-image

none
url

list-style-position

Inside | outside

list-style-type

none | asterisks | box |
check | circle | diamond |
disc | hyphen | square |
decimal | decimal-leadingzero | lower-roman | upperroman | lower-alpha | upper-alpha | lower-greek |
lower-latin | upper-latin |
hebrew | armenian | georgian | cjk-ideographic |
hiragana | katakana | hiragana-iroha | katakana-iroha
| footnotes

marker-offset

auto
length

SPEECH

normal
length
%

auto
number

inherit | [  ]

LIST & MARKERS

word-spacing

column-count

SPEECH
voice-family

Part Number: QRG0008

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

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

TRANSITIONS
transition

transition-property
transition-duration
transition-timing-function
transition-delay

transition-delay

time

transition-duration

time

transition-property

none | all

transition-timing-function

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

©2009 Veign, All Rights Reserved

Page 3 of 5

Quick Reference Guide

FREE

Cascading Style Sheets (CSS 3)
GRID POSITIONING
grid-columns

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

none | manual | auto

line-stacking-shift

consider-shifts | disregardshifts

text-height

auto | font-size | text-size |
max-size

vertical-align

Baseline | sub | super | top
| text-top | middle | bottom
| text-bottom
length
%

None | dotted | dashed |
solid | double | groove |
ridge | inset | outset

marks

[ crop || cross ] | none

move-to

normal | here
identifier

page-policy

start | first | last

quotes

none
string string string string

thin | medium | thick
length
3D / 2D TRANSFORM

backface-visibility

visible | hidden

perspective

none
number

perspective-origin

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

string-set

identifier
content-list

text-replace

none
[ ]+

alignment-adjust

alignment-baseline

bookmark-target

border-length

auto | baseline | beforeedge | text-before-edge |
middle | central | after-edge
| text-after-edge | ideographic | alphabetic | hanging | mathematical
length
%
baseline | use-script | before-edge | text-beforeedge | after-edge | textafter-edge | central | middle
| ideographic | alphabetic |
hanging | mathematical

baseline-shift

baseline | sub | super
length
%

dominant-baseline

auto | use-script | nochange | reset-size | alphabetic | hanging | ideographic | mathematical |
central | middle | text-afteredge | text-before-edge

flat | preserve-3d

content
attr
string

drop-initial-after-align

alignment-baseline

drop-initial-after-adjust

central | middle | after-edge
| text-after-edge | ideographic | alphabetic |
mathematical
length
%

none
integer
self
uri
attr

drop-initial-before-align

caps-height
alignment-baseline

auto
length

drop-initial-before-adjust

before-edge | text-beforeedge | central | middle |
hanging | mathematical
length
%

content

normal | none | inhibit
uri

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

normal | none | list-item

inline-box-align

float-offset

length length

initial | last
integer

http://www.veign.com

HYPERLINK
target

target-name
target-new
target-position

target-name

current | root | parent | new
| modal
string

target-new

window | tab | none

target-position

above | behind | front |
back

LINE BOX

GENERATED CONTENT

bookmark-level

inline-line-height | blockline-height | max-height |
grid-height

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

Part Number: QRG0008

POSITIONING
bottom

auto
%
length

clip

shape
auto

left

auto
%
length

position

static | relative | absolute |
fixed

right

auto
%
length

top

auto
%
length

z-index

auto
number
RUBY

ruby-align

auto | start | left | center |
end | right | distribute-letter
| distribute-space | lineedge

ruby-overhang

auto | start | end | none

ruby-position

before | after | right | inline

ruby-span

attr(x) | none

©2009 Veign, All Rights Reserved

Page 4 of 5

Quick Reference Guide

FREE

Cascading Style Sheets (CSS 3)
PAGED MEDIA
fit

fill | hidden | meet | slice

fit-position

[top | center | bottom] ||
[left | center | right]
length
%

image-orientation

auto
angle

orphans

integer

page

auto
identifier

page-break-after

auto | always | avoid | left |
right

page-break-before

auto | always | avoid | left |
right

page-break-inside

auto | avoid

size

auto | landscape | portrait
length

windows

integer
UI

appearance

normal | inherit | [icon |
window | desktop | workspace | document | tooltip |
dialog | button | pushbutton | hyperlink | radiobutton | checkbox | menuitem | tab | menu |
menubar | pull-down-menu
| pop-up-menu | list-menu |
radio-group | checkboxgroup | outline-tree | range
| field | combo-box | signature | password]

cursor

auto | crosshair | default |
pointer | move | e-resize |
ne-resize | nw-resize | nresize | se-resize | sw-resize
| s-resize | w-resize | text |
wait | help
url

icon

auto | inherit
url

nav-index

auto | inherit
number

nav-up

auto | inherit
 [ current | root |
 ]

nav-right

auto | inherit
 [ current | root |
 ]

nav-down

auto | inherit
 [ current | root |
 ]

nav-left

auto | inherit
 [ current | root |
 ]

resize

none | both | horizontal |
vertical | inherit

http://www.veign.com

Part Number: QRG0008

•

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

•

CSS Properties in Dark Red are shorthand properties and each
value must be defined. The exception is where the property can
define from one to four of the sides of a box element property
(Top-Right-Bottom-Left) - i.e. border-width

©2009 Veign, All Rights Reserved

Page 5 of 5

Quick Reference Guide

FREE

Cascading Style Sheets (CSS 3)
PSEUDO-CLASS
:active

an activated element

:focus

an element while the
element has focus

:visited

a visited link

:hover

an element when you mouse
over it

:link

an unvisited link

:disabled

an element while the
element is disabled

:enabled

an element while the
element is enabled

:checked

an element (form element
control) that is checked

:selection

an element that is currently
selected of highlighted by
the user

:lang

Allows the author to specify
a language to use in a
specified element
an element that is the n-th
sibling

:nth-child(n)

an element that is the n-th
sibling counting from the
last sibling

:nth-last-child(n)

UNITS

an element that is the last
sibling

:last-child

an element that is the only
child

:only-child

Universal

Any element

* { font: 10px Arial; }

cm

centimeter

Type

Any element of
that type

h1 { text-decoration:
underline; }

in

inch

Grouping

mm

millimeter

Multiple
elements of
different types

h1, h2, h3 { font-family:
Verdana; }

pc

pica (1p = 12 points)

Class

pt

point (1pt = 1/72 inch)

Multiple
elements of
different types
when you don’t
want to affect
all instances of
that type

.sampleclass { textdecoration: underline; }

Id

A single
element type
when you don’t
want to affect
all instances of
that type

#sampleid { textdecoration: underline; }

Descendant

An element that
is below (in the
document tree)
another
element—no
matter how
many levels
below

#gallery h1 { textdecoration: underline; }

Child

An element that
is directly below
(in the
document tree)
another
element

#title > p { font-weight:
bold; }

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

E[selected] - att whatever
the value
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 value
that end with the suffix
"val"
E[att*="val"] - att value
contains at least one
instance of the substring
"val"

RELATIVE MEASUREMENT
ch

width of the "0" glyph found in
the font for the font size used to
render

em

1em = current font size of
current element

ex

x-height of the element's font

gd

the grid defined by 'layout-grid'

px

pixel of the viewing device

rem

the font size of the root element

vh

the viewport's height

vw

the viewport's width

vm

viewport's height or width,
whichever is smaller of the two
ANGLES

deg

degrees

grad

grads

rad

radians

an element that is the n-th
sibling of its type.

turn

turns

:nth-last-of-type(n)

an element that is the n-th
sibling of its type counting
from the last sibling

ms

milli-seconds

an element that is the first
sibling of its type

:first-of-type

an element that is the last
sibling of its type

:only-of-type

an element that is the only
child of that type

:empty

an element that has no
children
root element within the
document

:root

an element not represented
by the argument ‘x’

:not(x)

a target element as specified
by a target in a URI

:target

PSEUDO-ELEMENT

TIME

seconds

s

FREQUENCY
hertz

Hz

kilo-hertz

kHz

COLORS
color name

red, blue, green, dark green

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

red = #ff0000 (or shorthand =
#f00)

hsl(hue, saturation,
lightness)

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

::first-letter

Adds special style to the first
letter of a text

hsla(hue, saturation, red = hsl(0, 100%, 50%)
lightness, alpha)

::first-line

Adds special style to the first
line of a text

flavor

::before

Inserts some content before
an element

An accent color (typically chosen
by the user) to customize the
user interface of the user agent
itsel

::after

Inserts some content after an
element

currentColor

computed value of the
'currentColor' keyword is the
computed value of the 'color'
property

http://www.veign.com

Example

percentage

:nth-of-type(n)

:last-of-type

Info

%

an element that is the first
sibling

:first-child

SELECTOR TYPES
Name

ABSOLUTE MEASUREMENT

Part Number: QRG0008

©2009 Veign, All Rights Reserved



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.4
Linearized                      : No
Encryption                      : Standard V2.3 (128-bit)
User Access                     : Print, Print high-res
Page Count                      : 5
Producer                        : AFPL Ghostscript 8.53
Create Date                     : 2009:07:12 10:36:18-04:00
Modify Date                     : 2009:07:12 10:36:18-04:00
Title                           : qrg0008 (CSS3).pub
Creator                         : PDFCreator Version 0.9.0
Author                          : Veign
Subject                         : 

EXIF Metadata provided by EXIF.tools