Professional Documents
Culture Documents
Wsu Css Cheat Sheet PDF
Wsu Css Cheat Sheet PDF
#################
TABLE OF CONTENTS
Backgrounds 4
Border 5
Box Model 7
Font 9
Text 10
Column 11
Colors 12
Grid Positioning 12
Template Layout 12
Table 13
Speech 13
List & Markers 15
Animations 16
Transitions 16
UI 17
Pseudo-class 18
Pseudo-element 19
Absolute Measurement 19
Relative Measurement 19
Angles 20
Time 20
Frequency 20
Colors 20
2 of 29
Selector Types 21
Outline 22
3D / 2D Transform 22
Generated Content 23
Line Box 25
Hyperlink 27
Positioning 27
Ruby 28
Paged Media 28
3 of 29
BACKGROUNDS
background background-size
background-image length
background-position %
background-repeat
background-repeat
background-attachment
repeat | repeat-x | repeat-y |
background-origin no-repeat
background-clip
background-attachment
background-color
scroll | fixed
background-image
background-origin
url
border-box | padding-box |
none content-box
background-position background-clip
top left | top center | top length
right | center left | center
center | center right | bottom %
left | bottom center | bottom
right border-box | padding-box |
content-box | no-clip
x-% y-%
transparent
4 of 29
BORDER
border border-right-color
border-width border-color
border-style
border-right-width
border-color
thin | medium | thick | length
border-width
border-top-width
thin | medium | thick | length
thin | medium | thick | length
border-style
border-break
none | hidden | dotted |
border-width
dashed | solid | double |
border-style
groove | ridge | inset | outset
color
border-color close
color
border-bottom-color
border-bottom border-color
border-bottom-width
border-bottom-style
border-style
border-style
border-color
border-left-color
border-left
border-color
border-left-width
border-style border-left-width
border-color thin | medium | thick length
border-left-style border-right-style
border-style border-style
5 of 29
border-top border-right
border-top-width border-right-width
border-style border-style
border-color border-color
border-top-color border-radius
border-color border-radius
border-top-right-radius
border-top-style
border-bottom-right-radius
border-style
border-bottom-left-radius
box-shadow border-top-left-radius
border-bottom-right-radius
border-collapse
length
collapse | separate
border-bottom-left-radius
border-image
length
image
[ number / %
border-width
none
6 of 29
BOX MODEL
float margin
left | right | none margin-top
margin-right
height
margin-bottom
auto
margin-left
length
% margin-bottom
auto
max-height
length
none
%
length
% margin-left
auto
max-width
height
none
%
length
% margin-right
auto
min-height
height
none
%
length
% margin-top
auto
width
length
auto
%
%
length
7 of 29
padding marquee-direction
padding-top forward | reverse
padding-right
marquee-loop
padding-bottom
infinite
padding-left
integer
padding-bottom
marquee-play-count
length
infinite
%
integer
padding-left
marquee-speed
length
slow | normal | fast
%
marquee-style
padding-right
scroll | slide | alternate
length
% overflow
visible | hidden | scroll |
padding-top
auto | no-display | no-content
length
overflow-x
%
overflow-y
display
overflow-style
none | inline | block | inline-
block | list-item |run-in | auto | marquee-line | marquee-
compact | table | inline-table | block
table-row-group | table-header-
group | table-footer-group |
table-row | table-column-group | overflow-x
table-column | table-cell |
visible | hidden | scroll |
table-caption | ruby | ruby-base
| ruby-text | ruby-base-group | auto | no-display | no-content
ruby-text-group
8 of 29
rotation visibility
angle visible | hidden | collapse
rotation-point clear
position (paired value off-set) left | right | both | none
FONT
font font-style
font-style normal | italic | oblique |
inherit
font-variant
font-weight font-variant
font-size/line-height normal | small-caps | inherit
font-family
font-size
caption | icon | menu | message-
box | small-caption | status-bar xx-small | x-small | small |
medium | large | x-large | xx-
large | smaller | larger |
font-size-adjust
inherit
none | inherit
length
number
%
font-family
font-weight
normal | wider | narrower |
ultra-condensed | extra- normal | bold | bolder | lighter
condensed | condensed | semi- | 100 | 200 | 300 | 400 | 500 |
condensed | semi-expanded | 600 | 700 | 800 | 900 | inherit
ultra-expanded | inherit
9 of 29
TEXT
direction punctuation-trim
ltr | rtl | inherit none | [ start | end |
adjacent ]
hanging-punctuation
text-align
none | [ start | end | end-
edge ] start | end | left | right |
center | justify
letter spacing
text-align-last
normal
start | end | left | right |
length center | justify
%
text-decoration
text-outline none | underline | overline |
line-thorugh | blink
none
color text-shadow
length none
color
unicode-bidi
length
normal | embed | bidi-override
word-break
white-space
normal | keep-all | loose |
normal | pre | nowrap | pre-wrap break-strict | break-all
| pre-line
word-wrap
white-space-collapse
normal
perserve | collapse | pre-serve-
breaks | discard length
10 of 29
text-emphasis text-transform
none | [ [ accent | dot | circle none | capitalize | uppercase |
| disc | [ before | after ]?] lowercase
text-indent text-wrap
length normal | unresrricted | none |
suppress
%
word-spacing
text-justify
normal
auto | inter-word | inter-
ideograph | inter-cluster | length
distribute | kashida | tibetan
%
COLUMN
column-count column-rule
auto column-rule-width
number column-rule-style
column-rule-color
column-fill
auto | balance column-rule-style
border-style
column-gap
normal columns
length column-width
column-count
11 of 29
column-rule-width column-width
thin | medium | thick auto
length length
column-span
1 | all
COLORS
color opacity
inherit inherit
color number
GRID POSITIONING
grid-columns grid-rows
none | inherit none | inherit
TEMPLATE LAYOUT
box-align box-flex
start | end | center | base normal
box-direction box-flex-group
normal | reverse integer
12 of 29
box-lines box-pack
single | multiple start | end | center | justify
box-orient box-sizing
horizontal | verticle | inline- content-box | padding-box |
axis | block-axis border-box | margin-box
tab-side
top | bottom | left | right
TABLE
border-collapse border-spacing
collapse | separate length length
empty-cells table-layout
show | hide auto | fixed
caption-side
top | bottom | left | right
SPEECH
cue cue-before
cue-before url [ silent | x-soft | soft |
medium | loud | x-loud | none |
cue-after inherit ]
number
13 of 29
mark pause
mark-before pause-before
mark-after pause-after
mark-before pause-before
string none | x-weak | weak | medium |
strong | x-strong | inherit
mark-after time
string
phonemes
voice-pitch-range string
voice-stress voice-family
strong | moderate | none | inherit | [ <specific-voice,
reduced | inherit age, generic-voice, number> ]
voice-volume voice-rate
silent | x-soft | soft | medium x-slow | slow | medium | fast |
| loud | x-loud | inherit x-fast | inherit
number %
%
voice-pitch
cue-after x-low | low | medium | high | x-
high | inherit
url [ silent | x-soft | soft |
medium | loud | x-loud | none | number
inherit ]
%
number
14 of 29
caption-side rest-before
top | bottom | left | right none | x-weak | weak | medium |
strong | x-strong | inherit
rest time
rest-before
rest-after
rest-after
none | x-weak | weak | medium |
strong | x-strong | inherit
time
speak
none | normal | spell-out |
digits | literal-punctuation |
no-punctuation | inherit-number
marker-offset
auto
length
15 of 29
ANIMATIONS
animations animation-timing-function
animation-name ease | linear | ease-in | ease-
out | ease-in-out | cubic-Bezier
animation-duration (number, number, number, number)
animation-timing-function
animation-delay
animation-delay
time
animation-iteration-count
animation-direction animation-iteration-count
inherit
animation-name
number
none | IDENT
animation-direction
animation-duration
normal | alternate
time
animation-play-state
running | paused
TRANSITIONS
transitions transitions-duration
transitions-property time
transitions-duration
transitions-property
transitions-timing-function
none | all
transitions-delay
transitions-delay
time
16 of 29
transition-timing-function
ease | linear | ease-in | ease-out | ease-in-out | cubic-
Bezier( number, number, number, number)
UI
appearance nav-index
normal | inherit | [icon | auto | inherit
window | desktop | work-space |
document | tooltip | dialog | number
button | push-button | hyperlink
| radio-button | checkbox |
menu-item | tab | menu | menubar nav-up
| pull-down-menu | pop-up-menu |
auto | inherit <id> [current |
list-menu | radio-group |
root | <target-name>
checkbox-group | outline-tree |
range | field | combo-box |
signature | password]
nav-right
auto | inherit <id> [current |
cursor root | <target-name>
auto | crosshair | default |
pointer | move | e-resize | ne-
nav-down
resize | nw-resize | n-resize |
se-resize | sw-resize | sw- auto | inherit <id> [current |
resize | s-resize | w-resize | root | <target-name>
text | wait | help
url nav-left
auto | inherit <id> [current |
icon root | <target-name>
auto | inherit
resize
url
none | both | horizontal |
vertical | inherit
17 of 29
PSEUDO-CLASS
:nth-last-child(n) an element that is the n-th sibling counting from the last sibling
:nth-last-of- an element that is the n-th sibling of its type counting from the last sibling
type(n)
18 of 29
PSEUDO-ELEMENT
ABSOLUTE MEASUREMENT
% percentage
cm centimeter
in inch
mm millimeter
RELATIVE MEASUREMENT
ch width of the “0” glyph found in the font for the font size used to render
19 of 29
ANGLES
deg degrees
grad grads
rad radians
turn turns
TIME
ms milli-seconds
s seconds
FREQUENCY
Hz hertz
kHz kilo-hertz
COLORS
flabor An accent color (typically chosen by the user) to customize the user
interface of the user agent itself.
20 of 29
SELECTOR TYPES
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 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"
21 of 29
OUTLINE
outline outline-style
outline-color none | dotted | dashed | solid |
double | groove | ridge | inset
outline-style | outset
outline-width
outline-width
outline-offset thin | medium | thick
inherit length
length
3D / 2D TRANSFORM
backface-visibility
visible | hidden
transform
perspective none | matrix | matrix3d |
translate3d | tranlateX |
none
translateY | translateZ | scale
number | scale3d | scaleX | scaleY |
scaleZ | rotate | rotate3d |
rotateX | rotateY | rotateZ |
perspective-origin skewX | skewY | skew |
perspective
[ [ percentage> | <length> |
left | center | right ]
[ <percentage> | <length> | top transform-origin
| center | bottom ]? ]
<length> ] | [ [ [ left | center [ [ [ <percentage> | <length> |
| right ] || [ top | center | left | center | right ]
bottom ] ] <length> ] [ <percentage> | <length> | top
| center | bottom ]? ]
<length> ] | [ [ [ left | center
| right ] || [ top | center |
bottom ] ] <length> ]
22 of 29
transform-style
flat | preserve-3d
GENERATED CONTENT
bookmark-label counter-reset
content none
string
crop
bookmark-level auto
none shape
integer
display
bookmark-target normal | none | list-item
self
float-offset
url
length length
attr
hyphenate-after
border-length
auto
self
integer
url
attr counter-increment
none
content
identifier number
normal | none | inhibit
url
23 of 29
hyphenate-lines marks
no-limit [crop || cross ] | none
integer
move-to
hyphenate-resource normal | here
none identifier
url
page-policy
hyphens start | first | last
dpi
string-set
hyphenate-before identifier
auto content-list
integer
text-replace
hyphenate-character none
string
24 of 29
LINE BOX
alignment-adjust drop-initial-after-align
auto | baseline | before-edge | central | middle | after-edge |
text-before-edge | middle | text-after-edge | ideographic |
central | after-edge | text- alphabetic | mathematical
after-edge | ideographic |
alphabetic | hanging | %
mathematical
length drop-initial-before-align
% caps-height
alignment-baseline
alignment-baseline
baseline | ise-script | before- drop-initial-before-adjust
edge | text-before-edge | after-
edge | text-after-edge | central before-edge | text-before-edge |
| middle | ideographic | central | middle | hanging |
alphabetic | hanging | mathematical
mathematical
length
%
baseline-shift
baseline | sub | super
drop-initial-value
length
initial
%
integer
dominant-baseline drop-initial-size
auto | use-script | no-change |
auto
reset-size | alphabetic |
hanging | ideographic | integer
mathematical | central | middle
| text-after-edge | text-before- %
edge
line
drop-initial-after-align
alignment-baseline
25 of 29
inline-box-align line-stacking-ruby
initial | last exclude-ruby | include-ruby
integer
line-stacking-shift
line-height consider-shifts | disregard-
shifts
normal
number line-stacking
length line-stacking-strategy
% line-stacking-ruby
line-stacking-shift
line-stacking
line-stacking-strategy text-height
line-stacking-ruby auto | font-size | text-size |
max-size
line-stacking-shift
vertical-align
line-stacking-strategy
Baseline | sub | super | top |
inline-line-height | block-line- text-top | middle | bottom |
height | max-height | grid- text-bottom
height
length
%
26 of 29
HYPERLINK
target target-name
target-name current | root | parent | new |
modal
target-new
string
target-position
target-new
window | tab | none
target-position
above | behind | front | back
POSITIONING
bottom top
auto auto
% %
length length
right left
auto auto
% %
length length
clip z-index
shape auto
auto Number
27 of 29
position
static | relative | absolute | fixed
RUBY
ruby-align ruby-position
auto | start | left | center | before | after | right | inline
end | right | distribute-letter
| distribute-space | line-edge
ruby-span
PAGED MEDIA
fit page
fill | hidden | meet | slice auto
identifier
fit-position
[top | center | bottom] || [left page-break-after
| center | right]
auto | always | avoid | left |
length right
%
page-break-before
orphans auto | always | avoid | left |
right
integer
page-break-inside
image-orientation
auto | avoid
auto
angle
28 of 29
size windows
auto | landscape | portrait integer
length
29 of 29