Css3 cheat-sheet

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


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



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
<target-name> ]

nav-down auto | inherit
<target-name> ]

nav-left auto | inherit
<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



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 don’t
: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 don’t
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 element—no
: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


Css3 cheat-sheet

More Related Content

Similar to Css3 cheat-sheet (12)

Recently uploaded (20)

Css3 cheat-sheet