Wsu css-cheat-sheet

Beginner’s essential
CSS Cheat Sheet
What makes a website unique is it’s styling.
A must have skill for every web developer.
#################

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
of2 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
of3 29

BORDER
border
border-width
border-style
border-color
border-width
thin | medium | thick | length
border-style
none | hidden | dotted |
dashed | solid | double |
groove | ridge | inset | outset
border-color
color
border-bottom
border-bottom-width
border-style
border-color
border-left
border-left-width
border-style
border-color
border-left-style
border-style
border-right-color
border-color
border-right-width
border-top-width
border-break
border-width
border-style
color
close
border-bottom-color
border-color
border-bottom-style
border-style
border-left-color
border-color
border-left-width
thin | medium | thick length
border-right-style
border-style
of5 29

border-top
border-top-width
border-style
border-color
border-top-color
border-color
border-top-style
border-style
box-shadow
inset || [ length, length,
length, length || <color> ]
none
border-collapse
collapse | separate
border-image
image
[ number / %
border-width
stretch | repeat | round ]
none
border-right
border-right-width
border-style
border-color
border-radius
border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-top-right-radius
length
border-bottom-right-radius
length
border-bottom-left-radius
length
of6 29

BOX MODEL
float
left | right | none
height
auto
length
%
max-height
none
length
%
max-width
none
length
%
min-height
none
length
%
width
auto
%
length
margin
margin-top
margin-right
margin-bottom
margin-left
margin-bottom
auto
length
%
margin-left
auto
height
%
margin-right
auto
height
%
margin-top
auto
length
%
of7 29

ANIMATIONS
animations
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-name
none | IDENT
animation-duration
time
animation-timing-function
ease | linear | ease-in | ease-
out | ease-in-out | cubic-Bezier
(number, number, number, number)
animation-delay
time
animation-iteration-count
inherit
number
animation-direction
normal | alternate
animation-play-state
running | paused 
TRANSITIONS
transitions
transitions-property
transitions-duration
transitions-timing-function
transitions-delay
transitions-delay
time
transitions-duration
time
transitions-property
none | all
of16 29

PSEUDO-CLASS
:active an activated element
:focus an element while the element has focus
: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 that is checked
:selection an element that is currently selected or highlighted by the user
: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
:nth-last-child(n) an element that is the n-th sibling counting from the last sibling
:first-child an element that is the first sibling
:last-child an element that is the last sibling
:only-child an element that is the only child
: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
: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
:only-of-type an element that is the only child of its type
:empty an element that has no children
:root root element within the document
:not(x) an element not represented by the argument ‘x’
:target a target element as specified by a target in a UR
of18 29

PSEUDO-ELEMENT
ABSOLUTE MEASUREMENT
RELATIVE MEASUREMENT
::first-letter Adds special style to the first letter of a text
::first-line Adds special style to the first line of a text
::before Inserts some content before an element
::after Inserts some content after an element
% percentage
cm centimeter
in inch
mm millimeter
pc pica (1p = 12 points)
pt point (1pt = 1/72 inch)
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
of19 29

ANGLES
TIME
FREQUENCY
COLORS
deg degrees
grad grads
rad radians
turn turns
ms milli-seconds
s seconds
Hz hertz
kHz kilo-hertz
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,0)
#rrggbb red = #ff0000 (or shorthand - #f00)
hsl(hue, saturation, lightness) red = hsl (0, 100%, 50%)
ﬂabor An accent color (typically chosen by the user) to customize the user
interface of the user agent itself.
currentColor computer value of the ‘currentColor’ keyword is the computed
value of the ‘color’ property
of20 29

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 don’t want to affect all instances of that
type
.sampleClass { text-decoration:
underline; }
Id A single element type when you don’t want
to affect all instances of that type
#sampleID { text-decoration:
underline; }
Descendant An element that is below (in the document
tree) another element - no matter how
many levels below
#gallery h1 { text-decoration:
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 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"
of21 29

OUTLINE
outline
outline-color
outline-style
outline-width
outline-offset
inherit
length
outline-style
none | dotted | dashed | solid |
double | groove | ridge | inset
| outset
outline-width
thin | medium | thick
length 
3D / 2D TRANSFORM
backface-visibility
visible | hidden
perspective
none
number
perspective-origin
[ [ percentage> | <length> |
left | center | right ]
[ <percentage> | <length> | top
| center | bottom ]? ]
<length> ] | [ [ [ left | center
| right ] || [ top | center |
bottom ] ] <length> ]
transform
none | matrix | matrix3d |
translate3d | tranlateX |
translateY | translateZ | scale
| scale3d | scaleX | scaleY |
scaleZ | rotate | rotate3d |
rotateX | rotateY | rotateZ |
skewX | skewY | skew |
perspective
transform-origin
[ [ [ <percentage> | <length> |
left | center | right ]
[ <percentage> | <length> | top
| center | bottom ]? ]
<length> ] | [ [ [ left | center
| right ] || [ top | center |
bottom ] ] <length> ] 
of22 29

transform-style
flat | preserve-3d
GENERATED CONTENT
bookmark-label
content
attr
string
bookmark-level
none
integer
bookmark-target
self
url
attr
border-length
self
url
attr
content
normal | none | inhibit
url
counter-reset
none
identifier number
crop
auto
shape
display
normal | none | list-item
float-offset
length length
hyphenate-after
auto
integer
counter-increment
none
identifier number
of23 29

hyphenate-lines
no-limit
integer
hyphenate-resource
none
url
hyphens
none | manual | auto
image-resolution
normal | auto
dpi
hyphenate-before
auto
integer
hyphenate-character
auto
string
marks
[crop || cross ] | none
move-to
normal | here
identifier
page-policy
start | first | last
quotes
none
string string string string
string-set
identifier
content-list
text-replace
none
[<string> <string>]+ 
of24 29

position
static | relative | absolute | fixed
RUBY
ruby-align
auto | start | left | center |
end | right | distribute-letter
| distribute-space | line-edge
ruby-overhang
auto | start | end | none
ruby-position
before | after | right | inline
ruby-span
attr(x) | none 
PAGED MEDIA
fit
fill | hidden | meet | slice
fit-position
[top | center | bottom] || [left
| center | right]
length
%
orphans
integer
image-orientation
auto
angle
page
auto
identifier
page-break-after
auto | always | avoid | left |
right
page-break-before
auto | always | avoid | left |
right
page-break-inside
auto | avoid
of28 29

size
auto | landscape | portrait
length
windows
integer 
of29 29

Wsu css-cheat-sheet

More Related Content

More from Zafer Galip Ozberk (20)

Recently uploaded (20)

Wsu css-cheat-sheet