Page 1 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)

BACKGROUND BORDER BOX MODEL

background background-image border-top border-top-width float left | right | none

background-position border-style
background-size border-color height auto
background-repeat length
background-attachment border-top-color border-color %
background-origin
border-top-style border-style max-height none
background-clip
length
background-color border-top-width thin | medium | thick %
length
background-attachment scroll | fixed
max-width none
border-width thin | medium | thick length
background-break bounding-box | each-box |
length %
continuous
border-radius border-top-right-radius min-height none | inherit
background-clip length
border-bottom-right-radius length
%
border-bottom-left-radius %
border-box | padding-box |
border-top-left-radius
content-box | no-clip
min-width none | inherit
border-top-right-radius length length
background-color color
transparent %
border-bottom-right-radius length
background-image url width auto
border-bottom-left-radius length %
none
length
background-origin border-box | padding-box | border-top-left-radius length
content-box margin margin-top
box-shadow inset || [ length, length, margin-right
background-position top left | top center | top length, length || <color> ] margin-bottom
right | center left | center none margin-left
center | center right |
border-style none | hidden | dotted | margin-bottom auto
bottom left | bottom center
dashed | solid | double | length
| bottom right
groove | ridge | inset | %
x-% y-%
outset
x-pos y-pos
margin-left auto
FONT length
background-repeat repeat | repeat-x | repeat-
y | no-repeat %
font font-style
font-variant margin-right auto
background-size length
font-weight length
%
font-size/line-height %
auto | cover | contain
font-family
caption | icon | menu | margin-top auto
BORDER
message-box | small- length
border border-width caption | status-bar %
border-style
font-family family-name padding padding-top
border-color
generic-family padding-right
border-break border-width inherit padding-bottom
border-style padding-left
color font-size xx-small | x-small | small |
medium | large | x-large | padding-bottom length
close
xx-large | smaller | larger | %
border-bottom border-bottom-width inherit
length padding-left length
border-style
border-color % %

font-size-adjust none| inherit padding-right length

border-bottom-color border-color
number %
border-bottom-style border-style padding-top length
font-stretch normal | wider | narrower |
ultra-condensed | extra- %
border-bottom-width thin | medium | thick
condensed | condensed |
length marquee-direction forward | reverse
semi-condensed | semi-
border-collapse collapse | separate expanded | expanded | marquee-loop infinite
extra-expanded | ultra- number
border-color color expanded | inherit
marquee-play-count infinite
border-image image font-style normal | italic | oblique | integer
[ number / % inherit
border-width marquee-speed slow | normal | fast
stretch | repeat | round ] font-variant normal | small-caps | inherit
none marquee-style scroll | slide | alternate
font-weight normal | bold | bolder |
border-left border-left-width lighter | 100 | 200 | 300 | overflow visible | hidden | scroll |
border-style 400 | 500 | 600 | 700 | 800 auto | no-display | no-
border-color | 900 | inherit content
overflow-x
border-left-color border-color BOX MODEL overflow-y

border-left-style border-style clear left | right | both | none overflow-style auto | marquee-line | mar-
quee-block
border-left-width thin | medium | thick display none | inline | block | inline-
length block | list-item | run-in | overflow-x visible | hidden | scroll |
compact | table | inline- auto | no-display | no-
border-right border-right-width table | table-row-group | content
border-style table-header-group | table-
border-color footer-group | table-row | overflow-y visible | hidden | scroll |
table-column-group | table- auto | no-display | no-
border-right-color border-color column | table-cell | table- content
caption | ruby | ruby-base |
border-right-style border-style rotation angle
ruby-text | ruby-base-group
border-right-width thin | medium | thick | ruby-text-group
rotation-point position (paired value off-
length set)

visibility visible | hidden | collapse

http://www.veign.com Part Number: QRG0008 2009 Veign, All Rights Reserved

Page 2 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)

TEXT TEMPLATE LAYOUT SPEECH
direction ltr | rtl | inherit box-align start | end | center | base- voice-family inherit | [ <specific-voice,
age, generic-voice, num-
hanging-punctuation none | [ start | end | end- ber> ]
edge ] box-direction normal | reverse
voice-rate x-slow | slow | medium |
letter-spacing normal box-flex number fast | x-fast | inherit
length %
% box-flex-group integer
voice-pitch x-low | low | medium | high
punctuation-trim none | [start | end | adja- box-lines single | multiple
| x-high | inherit
cent] number
box-orient horizontal | vertical | inline-
text-align start | end | left | right | axis | block-axis %
center | justify voice-pitch-range x-low | low | medium | high
box-pack start | end | center | justify
text-align-last start | end | left | right | | x-high | inherit
center | justify box-sizing content-box | padding-box | number
border-box | margin-box
text-decoration none | underline | overline | voice-stress strong | moderate | none |
line-through | blink tab-side top | bottom | left | right reduced | inherit

text-emphasis none | [ [ accent | dot | circle TABLE voice-volume silent | x-soft | soft | me-
| disc] [ before | after ]? ] dium | loud | x-loud | inherit
border-collapse collapse | separate number
text-indent length %
% border-spacing length length
LIST & MARKERS
text-justify auto | inter-word | inter- caption-side top | bottom | left | right
ideograph | inter-cluster | list-style list-style-type
distribute | kashida | tibetan empty-cells show | hide list-style-position
list-style-image
text-outline none table-layout auto | fixed
color list-style-image none
length SPEECH url

text-shadow none cue cue-before list-style-position Inside | outside

color cue-after
length list-style-type none | asterisks | box |
cue-before uri [ silent | x-soft | soft | check | circle | diamond |
text-transform none | capitalize | uppercase medium | loud | x-loud] | disc | hyphen | square |
| lowercase none | inherit ] decimal | decimal-leading-
number zero | lower-roman | upper-
text-wrap normal | unrestricted | none % roman | lower-alpha | up-
| suppress per-alpha | lower-greek |
cue-after uri [ silent | x-soft | soft | lower-latin | upper-latin |
unicode-bidi normal | embed | bidi- medium | loud | x-loud] | hebrew | armenian | geor-
override none | inherit ] gian | cjk-ideographic |
number hiragana | katakana | hira-
white-space normal | pre | nowrap | pre-
% gana-iroha | katakana-iroha
wrap | pre-line
| footnotes
mark mark-before
white-space-collapse preserve | collapse | pre-
mark-after marker-offset auto
serve-breaks | discard
length
mark-before string
word-break normal | keep-all | loose |
break-strict | break-all ANIMATIONS
mark-after string
word-spacing normal animation animation-name
length pause pause-before animation-duration
% pause-after animation-timing-function
animation-delay
word-wrap normal | break-word pause-before none | x-weak | weak | animation-iteration-count
medium | strong | x-strong animation-direction
COLUMN | inherit
time animation-delay time
column-count auto
number pause-after none | x-weak | weak | animation-direction normal | alternate
medium | strong | x-strong
column-fill auto | balance | inherit animation-duration time
time
column-gap normal animation-iteration-count inherit
length phonemes string number

column-rule column-rule-width rest rest-before animation-name none | IDENT

column-rule-style rest-after
column-rule-color animation-play-state running | paused
rest-before none | x-weak | weak |
column-rule-color color medium | strong | x-strong animation-timing-function ease | linear | ease-in |
| inherit ease-out | ease-in-out |
column-rule-style border-style time cubic-Bezier (number, num-
ber, number, number)
column-rule-width thin | medium | thick rest-after none | x-weak | weak |
length medium | strong | x-strong TRANSITIONS
| inherit
columns column-width transition transition-property
time
column-count transition-duration
speak none | normal | spell-out | transition-timing-function
column-span 1 | all transition-delay
digits | literal-punctuation |
column-width auto no-punctuation | inherit
transition-delay time
length
voice-balance left | center | right | left-
transition-duration time
COLOR wards | rightwards | inherit
number transition-property none | all
color inherit
color voice-duration time transition-timing-function ease | linear | ease-in |
ease-out | ease-in-out |
opacity inherit cubic-Bezier (number, num-
number ber, number, number)

http://www.veign.com Part Number: QRG0008 2009 Veign, All Rights Reserved

Page 3 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)

GRID POSITIONING GENERATED CONTENT LINE BOX
grid-columns none | inherit hyphenate-after auto line-height normal
[ length percentage relative integer number
length ] length
hyphenate-before auto %
grid-rows none | inherit integer
[ length percentage relative line-stacking line-stacking-strategy
length ] hyphenate-character auto line-stacking-ruby
string line-stacking-shift
OUTLINE
hyphenate-lines no-limit line-stacking-strategy inline-line-height | block-
outline outline-color integer line-height | max-height |
outline-style grid-height
outline-width hyphenate-resource none
uri line-stacking-ruby exclude-ruby | include-ruby
outline-color color
invert hyphens none | manual | auto line-stacking-shift consider-shifts | disregard-
image-resolution normal | auto shifts
outline-offset inherit
length dpi text-height auto | font-size | text-size |
marks [ crop || cross ] | none max-size
outline-style None | dotted | dashed |
solid | double | groove | vertical-align Baseline | sub | super | top
move-to normal | here
ridge | inset | outset | text-top | middle | bottom
identifier
| text-bottom
outline-width thin | medium | thick length
page-policy start | first | last
length %
quotes none
3D / 2D TRANSFORM HYPERLINK
string string string string
backface-visibility visible | hidden target target-name
string-set identifier
content-list target-new
perspective none
target-position
number
text-replace none
[<string> <string>]+ target-name current | root | parent | new
perspective-origin [ [ [ percentage> |
| modal
<length> | left | center |
LINE BOX string
right ] [ <percentage> |
<length> | top | center | target-new window | tab | none
bottom ]? ] <length> ] | alignment-adjust auto | baseline | before-
[ [ [ left | center | right ] || edge | text-before-edge | target-position above | behind | front |
[ top | center | bottom ] ] middle | central | after-edge back
<length> ] | text-after-edge | ideo-
graphic | alphabetic | hang- POSITIONING
transform none | matrix | matrix3d | ing | mathematical
translate3d | translateX | length bottom auto
translateY | translateZ | % %
scale | scale3d | scaleX | length
scaleY | scaleZ | rotate | alignment-baseline baseline | use-script | be-
rotate3d | rotateX | rotateY fore-edge | text-before- clip shape
| rotateZ | skewX | skewY | edge | after-edge | text- auto
skew | perspective after-edge | central | middle
| ideographic | alphabetic | left auto
transform-origin [ [ [ <percentage> | hanging | mathematical %
<length> | left | center | length
right ] [ <percentage> | baseline-shift baseline | sub | super
length position static | relative | absolute |
<length> | top | center | fixed
bottom ]? ] <length> ] | %
[ [ [ left | center | right ] || right auto
dominant-baseline auto | use-script | no-
[ top | center | bottom ] ] %
change | reset-size | alpha-
<length> ] length
betic | hanging | ideo-
transform-style flat | preserve-3d graphic | mathematical |
top auto
central | middle | text-after-
%
GENERATED CONTENT edge | text-before-edge length
bookmark-label content drop-initial-after-align alignment-baseline
z-index auto
attr number
drop-initial-after-adjust central | middle | after-edge
string
| text-after-edge | ideo-
RUBY
bookmark-level none graphic | alphabetic |
integer mathematical ruby-align auto | start | left | center |
length end | right | distribute-letter
bookmark-target self % | distribute-space | line-
uri edge
attr drop-initial-before-align caps-height
alignment-baseline ruby-overhang auto | start | end | none
border-length auto
length drop-initial-before-adjust before-edge | text-before- ruby-position before | after | right | inline
edge | central | middle |
content normal | none | inhibit hanging | mathematical ruby-span attr(x) | none
uri length
%
counter-increment none
identifier number drop-initial-value initial
integer
counter-reset none
identifier number drop-initial-size auto
integer
crop auto %
shape line
display normal | none | list-item inline-box-align initial | last
integer
float-offset length length

http://www.veign.com Part Number: QRG0008 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 | work-
space | document | tooltip |
dialog | button | push-
button | hyperlink | radio-
button | checkbox | menu-
item | tab | menu |
menubar | pull-down-menu
| pop-up-menu | list-menu |
radio-group | checkbox-
group | outline-tree | range
| field | combo-box | signa-
ture | password]

cursor auto | crosshair | default |

pointer | move | e-resize |
ne-resize | nw-resize | n-
resize | 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

<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 none | both | horizontal |

vertical | inherit

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

http://www.veign.com Part Number: QRG0008 2009 Veign, All Rights Reserved

Page 5 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)

PSEUDO-CLASS UNITS SELECTOR TYPES

:active an activated element ABSOLUTE MEASUREMENT Name Info Example

:focus an element while the % percentage Universal Any element * { font: 10px Arial; }
element has focus
cm centimeter Type Any element of h1 { text-decoration:
:visited a visited link that type underline; }
in inch
:hover an element when you mouse Grouping Multiple h1, h2, h3 { font-family:
over it mm millimeter elements of Verdana; }
different types
:link an unvisited link
pc pica (1p = 12 points)
Class Multiple .sampleclass { text-
:disabled an element while the elements of decoration: underline; }
element is disabled pt point (1pt = 1/72 inch)
different types
RELATIVE MEASUREMENT when you dont
:enabled an element while the want to affect
element is enabled all instances of
ch width of the "0" glyph found in
:checked an element (form element the font for the font size used to that type
control) that is checked render
Id A single #sampleid { text-
:selection an element that is currently em 1em = current font size of element type decoration: underline; }
selected of highlighted by current element when you dont
the user want to affect
ex x-height of the element's font all instances of
:lang Allows the author to specify that type
gd the grid defined by 'layout-grid'
a language to use in a
specified element Descendant An element that #gallery h1 { text-
px pixel of the viewing device is below (in the decoration: underline; }
:nth-child(n) an element that is the n-th rem the font size of the root element document tree)
sibling another
vh the viewport's height elementno
:nth-last-child(n) an element that is the n-th matter how
sibling counting from the vw the viewport's width many levels
last sibling below
vm viewport's height or width,
:first-child an element that is the first whichever is smaller of the two Child An element that #title > p { font-weight:
sibling is directly below bold; }
ANGLES (in the
:last-child an element that is the last document tree)
sibling deg degrees
another
grad grads element
:only-child an element that is the only
child Adjacent All elements h1 + p { font-style:
rad radians
Sibling that share the italic; }
:nth-of-type(n) an element that is the n-th
turn turns same parent
sibling of its type.
and elements
TIME are in the same
:nth-last-of-type(n) an element that is the n-th
sibling of its type counting immediate
ms milli-seconds
from the last sibling sequence
s seconds
:last-of-type an element that is the first General All elements h1 ~ p { font-style:
sibling of its type FREQUENCY Sibling that share the italic; }
same parent
:first-of-type an element that is the last Hz hertz and elements
sibling of its type are in the same
kHz kilo-hertz sequence (not
:only-of-type an element that is the only necessarily
child of that type COLORS
immediate)
:empty an element that has no color name red, blue, green, dark green
Attribute An element with E[selected] - att whatever
children that matches the value
rgb(x,y,z) red = rgb(255,0,0)
the attribute E[att="val"] - att with a
:root root element within the
rgb(x%,y%,z%) red = rgb(100%,0,0) listed specific value
document
E[rel~="next"] - att with
:not(x) an element not represented rgba(x,y,z, alpha) red = rgba(255,0,0) a value is a whitespace
by the argument x separated list
#rrggbb red = #ff0000 (or shorthand = *[lang|="en"] - att value
:target a target element as specified #f00) either being exactly "val"
by a target in a URI or beginning with "val"
hsl(hue, saturation, red = hsl(0, 100%, 50%) immediately followed by
PSEUDO-ELEMENT lightness) "-"
E[att^="val"] - att value
::first-letter Adds special style to the first hsla(hue, saturation, red = hsl(0, 100%, 50%)
that begins with the prefix
letter of a text lightness, alpha)
"val"
::first-line Adds special style to the first flavor An accent color (typically chosen E[att$="val"] - att value
line of a text by the user) to customize the that end with the suffix
user interface of the user agent "val"
::before Inserts some content before itsel E[att*="val"] - att value
an element contains at least one
currentColor computed value of the instance of the substring
::after Inserts some content after an 'currentColor' keyword is the "val"
element computed value of the 'color'
property

http://www.veign.com Part Number: QRG0008 2009 Veign, All Rights Reserved