www.hostinger.

com
BACKGROUND 1 PSUEDO-CLASS 9

BORDER 1 PSUEDO-ELEMENTS 9

TABLE 1 UI 9

BOX MODEL 2

TRANSITIONS 2 UNITS 10

COLOR 3 ANGELS 10

FONT 3 ABSOLUTE MEASUREMENT 10

ANIMATIONS 4 COLORS 10

COLUMN 4 FREQUENCY 10

TEXT 4 RELATIVE MEASUREMENT 10

SPEECH 5 TIME 10

TEMPLATE LAYOUT 5

3D / 2D TRANSFORM 6 SELECTOR TYPES 11

GRID POSITIONING 6

HYPERLINK 6

LIST AND MARKERS 6

OUTLINE 6

GENERATED CONTENT 7

POSITIONING 7

RUBY 7

LINE BOX 8

PAGED MEDIA 8

www.hostinger.com
background background-image border border-width
background-position border-style
background-size border-color
background-repeat
background-attachment border-break border-width
background-origin border-style
background-clip color
background-color close

background-attachment scroll | fixed border-bottom border-bottom-width

border-style
background-break bounding-box | each-box | border-color
continuous
border-bottom-color border-color
background-clip length
% border-bottom-style border-style
border-box | padding-box
| border-bottom-width thin | medium | thick
content-box | no-clip length
background-color
color border-collapse collapse | separate
transparent
background-image border-color color
url
none border-image image
background-origin [ number / %
border-box | padding-box border-width
|
stretch | repeat | round ]
background-position content-box
none

top left | top center | top

border-left border-left-width
right | center left | center
border-style
center | center right |
border-color
bottom left | bottom
center
border-left-color border-color
| bottom right
background-repeat x-% y-%
border-left-style border-style
x-pos y-pos

border-left-width thin | medium | thick

background-size repeat | repeat-x |
length
repeaty
| no-repeat
border-right border-right-width
border-style
length
border-color
%
auto | cover | contain
border-right-color border-color

border-right-style border-style

border-collapse collapse | separate

border-right-width thin | medium | thick
length
border-spacing length length

caption-side top | bottom | left |

empty-cells right show | hide

table-layout table-layout auto | fixed

www.hostinger.com
border-top border-top-width clear left | right | both | none
border-style
border-color display none | inline | block | inlineblock
| list-item | run-in |
border-top-color border-color compact | table | inlinetable
| table-row-group |
border-top-style border-style table-header-group | tablefooter-
group | table-row |
border-top-width thin | medium | thick table-column-group | tablecolumn
length | table-cell | tablecaption
| ruby | ruby-base |
border-width thin | medium | thick ruby-text | ruby-base-group
length | ruby-text-group

border-radius border-top-right-radius float left | right |

border-bottom-right-radius
border-bottom-left-radius height none
border-top-left-radius
auto
border-top-right-radius length length
max-height %
border-bottom-right-radius length
none
border-bottom-left-radius length length
max-width %
border-top-left-radius length
none
box-shadow inset | | [ length, length, length
length, length | | <color> min-height %
] none
none | inherit
border-style none | hidden | dotted length
| dashed | solid | min-width %
double | groove | ridge
| inset | outset none | inherit
length
width %

auto
%
margin length
transition transition-property
transition-duration margin margin-top
transition-timing-function margin-right
transition-delay margin-bottom
margin-bottom margin-left
transition-delay time
auto
transition-duration time length
margin-left %
transition-property none | all
auto
transition-timing-function length
ease | linear | ease-in |
margin-right %
ease-out | ease-in-out |
cubic-Bezier (number,
number, number, number) auto
length
%
www.hostinger.com
margin-top auto font font-style
length font-variant
% font-weight
font-size/line-height
padding padding padding-top font-family
padding-right caption | icon | menu |
padding-bottom message-box | smallcaption
padding-left | status-bar

padding-bottom length family-name

font-family
% generic-family
inherit
padding-left
length
% font-size xx-small | x-small | small
| medium | large | x-
padding-right
length large | xx-large | smaller |
% larger | inherit
length
padding-top
length %
%
font-size-adjust none| inherit
marquee-direction
forward | number

marquee-loop
reverse infinite font-stretch normal | wider | narrower |
number ultra-condensed | extracondensed
| condensed | semi-condensed
marquee-play-count
infinite | semiexpanded | expanded |
integer extra-expanded | ultraexpanded
| inherit
marquee-speed
slow | normal | fast
font-style normal | italic | oblique |
marquee-style
scroll | slide | alternate inherit

overflow visible | hidden | scroll font-variant normal | small-caps |

| font-weight inherit normal | bold |

auto | no-display | nocontent
overflow-x bolder |
overflow-style overflow-y lighter | 100 | 200 | 300 |
400 | 500 | 600 | 700 | 800
auto | marquee-line | | 900 | inherit
overflow-x
marquee- block

visible | hidden | scroll |

overflow-y
auto | no-display | nocontent

visible | hidden | scroll |

rotation color
auto | no-display | nocontent

rotation-point inherit
angle
opacity color
visibility
position (paired value o ff set)
inherit
number
visibility visible | hidden |
collapse
www.hostinger.com
direction ltr | rtl | | column-count
inherit pre
-
hanging-punctuation
lin
none | [ start | end | e column-fill
letter-spacing endedge ]
preserve | collapse | column-gap
normal preserve- breaks |
length discard
punctuation-trim %
column-rule
normal | keep-all |
text-align none | [start | end | loose |
adjacent] break-strict |
break-all
start | end | left | right column-rule-color
text-align-last
| n
center | o column-rule-style
justify r
text-decoration m column-rule-width
a
start | end | left | right
l
|
text-emphasis l
center | columns
e
justify
n
g
text-indent none | underline | overline t
| h column-span
line-through | %
blink column-width
text-justify
normal |
none | [ [ accent | dot | break-word
circle
| disc] [ before | after ]?
text-outline ]

length
%
text-shadow animation
auto | inter-word |
interideograph
| inter-cluster | distribute
|
text-transform
kashida |
tibetan

text-wrap none animation-delay animation-

color
length direction animation-
unicode-bidi
none duration animation-
white-space color
length iteration-count

white-space-collapse none | capitalize |

uppercase animation-name animation-
|
word-break lowercase
play-state animation-

normal | unrestricted |
timing-function
none
word-spacing
|
suppress

normal | embed | bidioverride

word-wrap
normal | pre | nowrap |

prewrap
auto normal |
number color
alternate time
auto | border-style
inherit
balance thin | medium | thick number
length animation-name
normal animation-duration none | IDENT
length column-width animation-timing-
column-count function animation-delay running | paused
column- animation-iteration-
rule-width 1 | all count animation-
ease | linear | ease-in |
column- direction
ease-out | ease-in-out |
rule-style auto cubic-Bezier (number,
column- length time number, number, number)
rule-color

www.hostinger.com
cue cue-before punctuation | voice-family voice-rate
cue-after inherit

cue-before uri [ silent | x-soft | soft left | center |

right | leftwards
| medium | loud | x- voice-pitch
|
loud] | none | inherit ] rightward
number s |
% inherit
n
cue-after uri [ silent | x-soft | soft u
voice-pitch-range
m
| medium | loud | x- b
loud] | none | inherit ] e
number r
% voice-stress voice-volume
t
mark mark-before i
m
mark-after e

mark-before string

mark-after string

pause pause-before
pause-after
box-align
pause-before none | x-weak | weak
|
box-direction
medium | strong | x-
strong
| box-flex
inherit
pause-after
time box-flex-group

none | x-weak | weak box-lines box-orient

|
medium | strong | x-
phonemes string strong
box-pack box-sizing
|
rest inherit
time
tab-side

rest-before string

rest-before
rest-after

rest-after none | x-weak | weak

|
medium | strong | x-
strong
|
inherit
speak time

none | x-weak | weak

|
voice-balance medium | strong | x-
strong
|
inherit
voice-duration time

none | normal | spell-out

| digits | literal-
punctuation | no-
inherit | [ x-low | low | medium | mber
<specific-voice, high
age, generic- | x-high | inherit integer
voice, number start |
number> ]
single | multiple
strong | moderate | end |
x-slow | slow none |
| medium | horizontal | vertical | inlineaxis
reduced | inherit center |
fast | x-fast | | block-axis
inherit
silent | x-soft | soft | base
% start | end | center |
medium
| loud | x-loud | inherit normal |
x-low | low | justify content-box |
number
medium |
high % reverse
padding-box |
| x-high | border-box | margin-box
inherit n
number
top | bottom | left |
% u

right

www.hostinger.com
list-style list-style-type backface-visibility visible | hidden
list-style-position
list-style-image perspective none
number
list-style-image none
url perspective-origin [ [ [ percentage> | <length> |
left | center | right ] [
list-style-position
Inside | outside <percentage> | <length> | top
| center | bottom ]? ] <length> ]
list-style-type
none | asterisks | box | | [ [ [ left | center | right ] ||
check | circle | diamond [ top | center | bottom ] ]
| disc | hyphen | <length> ]
square |
decimal | decimal-leadingzero transform none | matrix | matrix3d |
| lower-roman | upperroman translate3d | translateX |
| lower-alpha | upper- translateY | translateZ |
alpha | lower-greek | scale | scale3d | scaleX |
lower-latin | upper-latin scaleY | scaleZ | rotate |
| rotate3d | rotateX |
hebrew | armenian | georgian rotateY
| cjk-ideographic | | rotateZ | skewX | skewY |
hiragana | katakana | skew | perspective
hiragana- iroha | katakana- transform-origin
marker-o ff set iroha [ [ [ <percentage> |
| footnotes <length> | left | center |
right ] [ <percentage> |
auto <length> | top | center |
length bottom ]? ] <length> ] |
[ [ [ left | center | right ]
|| [ top | center |
bottom ] ]
grid-columns transform-style <length> ]

flat | preserve-3d
none | inherit
grid-rows [ length percentage relative
length ]

none | inherit
[ length percentage relative
length ]

target target-name
target-new
target-position

color
outline out
outline-width invert
lin
e-
inherit
col
length
outline-color or
out
None | dotted | dashed | solid |
lin
double | groove | ridge | inset |
outline- e-
outset
styl
e
thin | medium | thick
o ff set out
length
lin
e-
outline-style wi
dth
target-name current | root | parent
| new windo none above | behind |
| modal
string w| front |
target-new back
tab |
target-position

www.hostinger.com
bookmark-label content string-set identifier
attr content-list
string
text-replace none
bookmark-level none [<string> <string>]+
integer

bookmark-target self
uri
attr

border-length auto
length bottom auto
%
content normal | none | inhibit length
uri
clip shape
counter-increment none auto
identifier number
left auto
counter-reset none %
identifier number length

auto position static | relative | absolute |

crop
shape
right fixed auto
normal | none | list- %
display float-
item length

o ff set
length length top auto
%
hyphenate-after
auto length
integer
z-index auto
hyphenate-before
auto number
integer

hyphenate-character
auto
integer

hyphenate-lines
no-limit
integer

hyphenate-resource ruby-align auto | start | left | center |

none end | right | distribute-letter
uri | distribute-space |
hyphens
none | manual | lineedge auto | start | end
ruby-overhang
image-resolution
auto normal | auto | none before | after |
ruby-position
dpi

marks ruby-span right | inline attr(x) | none

[ crop | | cross ] |

move-to none normal | here

identifier

page-policy start | first |

quotes last none

string string string string
www.hostinger.com
alignment-adjust auto | baseline | line-stacking line-stacking-strategy
beforeedge line-stacking-ruby
| text-before-edge line-stacking-shift
|
middle | central | after-
edge line-stacking-strategy inline-line-height |
| text-after-edge | blockline- height | max-
ideographic height |
| alphabetic | grid-height
hanging line-stacking-ruby
alignment-baseline | exclude-ruby | include-ruby
mathematical line-stacking-shift
length consider-shifts |
% text-height
disregardshifts auto | font-size
baseline | use-script |
before- edge | text- vertical-align | text-size |
baseline-shift beforeedge max-size
| after-edge |
textafter- edge | Baseline | sub | super | top
central | middle | text-top | middle | bottom
dominant-baseline | ideographic | alphabetic | text-bottom
| length
hanging | %
mathematical

baseline | sub |
super
length
drop-initial-after-align fit
%

drop-initial-after-adjust fit-position
auto | use-script | fill | hidden | meet | slice
nochange
| reset-size |
alphabetic [top | center | bottom]
| hanging | || [left | center | right]
ideographic image-orientation length
| mathematical %
|
drop-initial-before-align
central | middle | text- orphans auto
after- edge | text-before- angle
edge
integer
alignment-baseline

central | middle | after-

edge
| text-after-edge |
ideographic
| alphabetic
|
mathematical
length
%

caps-height
alignment-baseline

page auto
drop-initial-before-adjust before-edge | text-beforeedge
identifier
| central | middle |
hanging |
mathematical length page-break-after auto | always | avoid | left |
% right

drop-initial-value drop-initial-size
 page-break-before auto | always | avoid | left |
initial
integer right
inline-box-align

auto page-break-inside auto | avoid

integer
line-height size auto | landscape | portrait
%
line length

initial | windows integer

last
integer

normal
number
length
%

www.hostinger.com
appearance normal | inherit | [icon | :active an activated element
window | desktop | workspace
| document | tooltip | dialog | :focus an element while the element
button | pushbutton | hyperlink has focus
| radiobutton | checkbox |
:visited a visited link
menuitem | tab | menu |
menubar
:hover an element when you mouse over it
| pull-down-menu | pop-up-
menu
:link an unvisited link
| list-menu | radio-group |
checkboxgroup | outline-tree
:disabled an element while the element
| range | field | combo-box is disabled
cursor | signature | password]
:enabled an element while the element
auto | crosshair | default | is enabled
pointer
| move | e-resize | ne-resize :checked an element (form element control)
| nw-resize | nresize | se- that is checked
resize | sw-resize | s-resize |
w-resize | text | wait | help :selection an element that is currently
icon selected of highlighted by
url
the user

nav-index auto | inherit :lang Allows the author to specify

url a language to use in a specified
element
nav-up auto | inherit
number :nth-child(n) an element that is the n-th sibling

:nth-last-child(n) an element that is the n-th sibling

auto | inherit
counting from the last sibling
<id> [ current | root |
nav-right
<target-name> ] :first-child an element that is the first sibling

auto | inherit :last-child an element that is the last sibling

<id> [ current | root |
nav-down
<target-name> ] :only-child an element that is the only child

:nth-of-type(n) an element that is the n-th sibling

auto | inherit
of its type.
<id> [ current | root |
nav-left
<target-name> ] an element that is the n-th sibling
:nth-last-of-type(n)
of its type counting from the last
auto | inherit sibling
<id> [ current | root |
resize
<target-name> ] :last-of-type an element that is the first sibling
of its type
none | both | horizontal |
:first-of-type an element that is the last sibling
vertical | inherit
of its type

:only-of-type an element that is the only

child of that type
::first-letter
:empty an element that has no children

Adds special style to the first root element within the document
::first-line :root
letter of a text
:not(x) an element not represented
Adds special style to the first by the argument ‘x’
::before
line of a text
:target a target element as specified
by a target in a URI
Inserts some content before
::after
an element

Inserts some content after an

element
www.hostinger.com
 UNITS

% percentage Hz hertz

cm centimeter kHz kilo-hertz

in inch

mm millimeter

pc pica (1p = 12 points)

pt point (1pt = 1/72 inch) ms milli-seconds

s seconds

ch width of the "0" glyph found in

the font for the font size used to color name red, blue, green, dark green
render
rgb(x,y,z) rgb(x red = rgb(255,0,0)
em 1em = current font size of
current element %,y%,z%) red = rgb(100%,0,0)

ex x-height of the element's font rgba(x,y,z, alpha) red = rgba(255,0,0)

gd the grid defined by 'layout-grid' #rrggbb red = # ff 000 0 (or shorthand =

#f00)
px pixel of the viewing device
hsl(hue, saturation, red = hsl(0, 100%, 50%)
rem the font size of the root element lightness)

vh the viewport's height hsla(hue, saturation, red = hsl(0, 100%, 50%)

lightness, alpha)
vw the viewport's width
flavor An accent color (typically chosen
vm viewport's height or width, by the user) to customize the
whichever is smaller of the two user interface of the user agent
itself

currentColor computed value of the

'currentColor' keyword is the
computed value of the 'color'
property

deg degrees

grad grads

rad radians

turn turns

www.hostinger.com
SELECTOR TYPES

Universal Any element * { font: 10px Arial; }

Type Any element of that type h1 { text-decoration:

underline; }

Grouping Multiple elements of di ff eren t types h1, h2, h3 { font-family: Verdana; }

Class Multiple elements of di ff eren t types .sampleclass { textdecoration:

when you don’t want to a ff ec t all underline; }
instances of that type

Id A single element type when you don’t #sampleid { textdecoration:

want to a ff ec t all instances of that type underline; }

Descendant An element that is below (in the #gallery h1 { textdecoration:

document tree) another element—no underline; }
matter how many levels below

Child An element that is directly below #title > p { font-weight: bold; }

(in the document tree) another element

Adjacent All elements that share the same parent h1 + p { font-style: italic; }
Sibling and elements are in the same immediate
sequence

General All elements that share the same parent h1 ~ p { font-style: italic; }
Sibling and elements are in the same sequence
(not necessarily immediate)

Attribute An element with that matches E[selected] - att whatever the value
the attribute listed 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"
E[att$="val"] - att value that end
with the suffix "val"
E[att*="val"] - att value
contains at least one instance
of the substring "val"

www.hostinger.com