Professional Documents
Culture Documents
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)
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
image-orientation auto
angle
orphans integer
page auto
identifier
windows integer
UI
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
: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