CSS stands for​ Cascading Style Sheets.

The documents written in HTML are formatted and

presented using CSS. There are many features in HTML and CSS is the most popular addition
to it. Rather than changing the web page itself, with CSS, only the styles need to be changed,
which means fewer chances to the overall code. Further, HTML contained a lot of repeated
code for each web page, which can be put in a common file with CSS and used across web
pages. ​CSS contains​ – selector and declaration block. A declaration block consists of
property-value pairs. Example,

#title

Here, title is the selector and the declaration block is the entire thing inside the curly braces.
Saved as​ - .css file

CSS Cheat sheet

1. Font
Property Values Example

font-style normal/italic/inherit/oblique font-style: normal

font-variant normal/inherit/small-caps font-variant: small-caps

font-weight normal/bold/bolder/lighter/100-900/inherit font-weight:bold

font-size ?px/?%/small/medium/large font-size: large font-size :5

font-family verdana/calibri.. etc… font-family: verdana

2. Text
Property Values Example

text-align left/right/center/justify text-align: justify;

letter spacing normal/length/?% letter spacing : 3%;

Text-outline None/length/color Text-outline: red

word-wrap normal/length word-wrap: normal;

direction ltr/rtl/inherit Direction: ltr;

text-wrap normal/unrestricted/none text-wrap: normal

text-indent ?%/?px text-indent: 2%

word-spacing normal/?%/?px word-spacing: normal

text-transform none/uppercase/lowercase/capitaliz text-transform: lowercase

e

text-emphasis none/dot/open/filled/circle/triangle text-emphasis: filled

text-justify auto/distribute/inter-word text-justify:distribute

3. User Interface
Property Values Example

appearance – apply platform normal | inherit | [icon | window | desktop | appearance:

specific styling work-space | document | tooltip | dialog | password;
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 |
signature | password]

cursor auto | crosshair | default | pointer | move | .help { cursor:

e-resize | neresize | nw-resize | n-resize | help; }
se-resize | sw-resize | swresize | s-resize |
w-resize | text | wait | help

nav-index - specifies the auto | inherit number nav-index: 1;

sequential navigation order
of current element. Similar
to tab index in html. Values
can be auto or a positive
number representing the
navigation order. First value
is 1.

nav-up auto | inherit <id> [current | root | nav-up: auto;

<target-name> auto (browser decides where
to navigate to)/ id (specific ID to be navigated
to)/ target_name (target frame to navigate
to)/inherit (value computed based on
element’s parent; root or current)
nav-down auto | inherit <id> [current | root | nav-down:
<target-name> #b2;

nav-left auto | inherit <id> [current | root | nav-left: #b1;

<target-name>

nav-right auto | inherit <id> [current | root | nav-right: #b2;

<target-name>

resize none | both | horizontal | vertical | inherit resize:

horizontal;

icon auto | inherit url icon:

url(“like.png”);

4. Backgrounds
Property Values Example

background-size auto/cover/?px/?% background

-size: cover

background-image url/none background

-image:
none

background-repeat no-repeat/repeat-x/repeat-y/repeat background

-repeat:
repeat

background-attachment fixed/scroll background

-attachment
: fixed

background-color color/transparent background

-color: white

background-position can be any position from different background

combinations like top left, top right, top -position:
center. Same with bottom. can be top-left;
mentioned in terms of position x-% and
y-%

background-origin the starting point of the background background

-origin: 0;
background-clip - lets you control content-box/padding-box/border-box/no-cli background
how much of the background p/?%/?px -clip: no-clip
image should extend beyond the
element’s content or padding

5. Borders
Property Values Example

border-width thin/thick/medium/?px border-widt

h: medium
border-widt
h: 20px

border-style none/dashed/dotted/inset/double/sol border-styl

id e : dotted

border-color name of the color border-col

or: black

border-left:​ border-left-color border-left-

border-left-width color:
black
border-left-
width :
10px

border-right:​ border-right-color border-righ

border-right-width t-color :
black
border-righ
t-width :
15px

border-top:​ border-top-width border-top-

border-top-color width :
10px
border-top-
color : blue
border-bottom:​ border-bottom-color border-bott
border-bottom-width om-color :
black
border-bott
om-width :
15px

border-decoration-break maintain consistent design amongst border-dec

fragments of broken element oration-bre
slice/clone ak: slice;

border-radius​ border-top-right-radius ?px border-top-

border-bottom-right-radius left-radius :
border-bottom-left-radius 20px
border-top-left-radius

border-image ?%/stretch/repeat/round/none border-ima

ge : repeat
border-ima
ge : 12px

6. Box Model
Property Values Example

float left | right | none float : right

height auto length % height : 10px

max-height none length % max-height : 10px

max-width none length % max-width : 120%

min-height none length % min-height : 50%

min-width auto % length min-width : 30px

6.1. margin

Property Values Example

margin-bottom auto/length % margin-bottom : 20px

margin-left auto/height % margin-left : auto

margin-right auto/height % margin-right : 30%

margin-top auto/length % margin-top : 40mm

6.2. padding

Property Values Example

padding- length % padding-

bottom bottom :
20px

padding-t length % padding-t

op op : 20px

padding-r length % padding-r

ight ight :
20px

padding-l length % padding-l

eft eft : 20px

display none/inline/block/inline-block/list-item/run-in/compact/table/inline-table display :

/table-row-group/table-headergroup/table-footer-group/table-row/table- inline
column-group/table-column/table-cell/table-caption/ruby/ruby-base/rub
y-text/ruby-base-group/ruby-text-group

marquee forward/reverse marquee

-direction -direction
: forward

marquee infinite/integer marquee

-loop -loop : 10

marquee infinite/integer marquee

-play-cou -play-cou
nt nt : 50

marquee slow/normal/fast marquee

-speed -speed :
slow
marquee scroll/slide/alternate marquee
-style -style :
scroll

overflow visible/hidden/scroll/auto/no-display/no-content/overflow-x/overflow-y overflow

: visible

overflow- auto/marquee-line/marquee-block overflow-

style style :
auto

overflow- visible/hidden/scroll/auto/no-display/no-content overflow-

x x : scroll

rotation angle rotation :

20deg

rotation-p position (paired value off-set) rotation-p

oint oint :
50%
50%

visibility visible/hidden/collapse visibility:

hidden

clear left/right/both/none clear: left

7. Template layout
Property Values Example

box-align start/end/center/base box-align : start

box-direction normal/reverse box-direction : normal

box-flex normal box-flex : normal

box-flex-group integer box-flex-group : 2

box-lines single/multiple box-lines : single

box-orient horizontal/vertical/inline-axis/block-axis box-orient : inline

box-pack start/end/center/justify box-pack : justify

box-sizing content-box/padding-box/border-box/margin-box box-sizing : margin-box

tab-side top/bottom/left/right tab-side : left

8. Table
Property Possible values

border-collaps collapse/separate
e

empty-cells show/hide

border-spacing ?%/?px

table-layout auto/fixed

caption-side top/bottom/left/right

9. Columns
Property Values Example

column-co auto/number column-count : 10

unt

column-fill auto/balance/balance-all column-fill : balance

column-ga normal/?px column-gap : 5px

p

column-rul thin/medium/thick/?px column-rule-width : medium

e-width column-rule-width : 2px

column-rul border-style – dotted/solid/hidden/double/ column-rule-style : dotted

e-style dashed/groove/hidden/inset/outset/inherit

column-rul color column-rule-color : black

e-color

column-wi auto/?px column-width : 10px

dth

column-sp 1/all column-span : all

an

10. Colors
Property Values Example

color inherit/color color : green

opacity inherit/number level opacity : 4

11. Grid positioning

Property Values Example

grid-columns none/inherit/?px/?%/x%-y% grid-columns : 10px

grid-rows none/inherit/?px/?%/x%-y% grid-rows : 40%

12. List and Markers

Property Values

list-style-t none/asterisks/box/check/circle/diamond/disc/hyphen/square/decimal/decimal-lea
ype ding-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/lower-greek/lower-la
tin/upper-latin/hebrew/armenian/georgian/cjk-ideographic/hiragana/katakana/hirag
ana-iroha/katakana-iroha/footnotes

Example:

{ list-style-type : upper-roman}

list-style- ?%/?px
position
Example:

list-style-position : 20px

list-style-i none/url
mage
Example:

list-style-image : url(‘hackrhome.gif’);

marker-of auto/?px
fset
Example:
 marker-offset : auto

13. Animations
Property Values Example

animation-nam none/ID animation-name :

e myfirstanim

animation-durat time animation-duration :

ion 5s

animation-timin ease/linear/ease-in/easeout/ease-in-out/cubic-Bezie animation-timing-fun

g-function r(number, number, number, number) ction : linear;

animation-dela time animation-delay :

y 5ms

animation-iterat inherit/number animation-iteration-c

ion-count ount : 5

animation-direc normal/alternate animation-direction :

tion alternate

animation-play- running/paused animation-play-state

state : running

animation-fill-m None/backwards/ forwards/both/initial/inherit animation-fill-mode :

ode both

14. Outline
Property Values Example

outline-col Color name outline-color : green

or

outline-sty none/dotted/dashed/solid/double/groove/ridge/inset/out outline-style : solid

le set

outline-wi thin/medium/thick/?px outline-width : medium

dth outline-width : 20px

outline-off inherit/?px outline-offset : 15px

set
15. Hyperlink
Property Values Example

target-name current/root/parent/new/modal/"string" target-name : parent

target-new tab/window/none target-new : window

target-position front/back/above/behind target-position : front

16. Paged Media

Property Values Example

fit fill/hidden/meet/slice fit : fill

fit-position top/center/bottom or left/center/right ?%/?px fit-position : top 35%

orphans integer orphans : 4

image-orientation auto/angle (deg/rad/turn/grad) image-orientation : 0grad

page auto/id page : auto

page-break-after auto/always/avoid/left/right page-break-after :

always

page-break-befor auto/always/avoid/left/right page-break-before: left

e

page-break-inside auto/avoid page-break-inside :

avoid

size auto/landscape/portrait/?px Size : landscape

windows integer Windows : 4

17. Positioning
Property Values Example

bottom/right/top/left auto/%/length bottom: 20% top : auto left : 40px right :

25px

z-index auto/number z-index : 2

clip shape/auto clip : auto

position fixed/static/relative/absolut position : static
e

18. Transitions
Property Values Example

transitions-del time (ms/s) transitions-delay :

ay 20ms

transitions-dur time (ms/s) transitions-duration :

ation 2s

transitions-pro none/all transitions-property:

perty none

transition-timin ease/linear/ease-in/ease-out/ease-in-out/cubicBezi transition-timing-functi

g-function er(number, number, number, number) on: ease-in-out;

19. 3D / 2D Transform
Property Values Example

backface-v visible/hidden backface-visi

isibility bility : hidden

perspectiv length | none | initial | inherit perspective :

e 100px

perspectiv [ [?%/?px/left/center/right ] [?%/?px/top/center/bottom ]] ?px ]/[ [ [ perspective-o

e-origin left/center/right ] or [ top/center/bottom ] ] ?px ] rigin : 10px
30px
perspective-o
rigin : 10%
30%
perspective-o
rigin : left
center;

transform none/matrix/matrix3d/translate3d/tranlateX/translateY/translateZ/ transform:

scale/ skewy(40deg
scale3d/scaleX/scaleY/scaleZ/rotate/rotate3d/rotateX/rotateY/rot ); transform:
ateZ/ scalex(10);
skewX/skewY/skew/perspective transform:
 rotate(50deg)
;

transform- [ [ [ ?%/?px/left/center/right ] [ ?%/?px/top/center/bottom ]? ] transform-ori

origin <length> ]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ] gin : 20%
50%;
transform-ori
gin : center;
transform-ori
gin : 20px
50px;

transform- flat/preserve-3d transform-sty

style le :
preserve-3d

21. Speech
Property Values Example

cue-before – play a url [ silent | x-soft | soft | medium | loud | .voice;

sound file before an x-loud | none | inherit]
element

cue-after - play a url [ silent | x-soft | soft | medium | loud | .voice;

sound file after an x-loud | none | inherit]
element

pause Time pause: 25ms

pause-before <time> | none | x-weak | weak | medium | pause-before : 25ms

strong | x-strong

pause-after <time> | none | x-weak | weak | medium | pause-after : 25ms

strong | x-strong

phonemes – give a <string> #computer

phonetic
pronunciation to
elements

voice-stress normal | strong | moderate | none | reduced voice-stress :

moderate;
voice-pitch <frequency> && absolute | [[x-low | low | voice-pitch: high;
medium | high | x-high] || [<frequency> | voice-pitch: 350hz;
<semitones> | <percentage>]] voice-pitch: 45%

voice-duration auto | <time> voice-duration: auto;

voice-duration: 60s;

voice-volume silent | [[x-soft | soft | medium | loud | x-loud] voice-volume: 25db;

|| <decibel>] voice-volume: silent;
voice-volume: soft;

voice-family [[<name> | <generic-voice>],]* [<name> | voice-family : “child”,

<generic-voice>] | preserve <generic-voice> “female”
= [<age>? <gender> <integer>?]

voice-rate [normal | x-slow | slow | medium | fast | x-fast] voice-rate: slow;

|| <percentage> voice-rate: 30%;

speak none | normal | spell-out | digits | speak : none;

literal-punctuation | no-punctuation |
inherit-number

caption-side – top | bottom | left | right | inherit caption-side: left;

position for table
caption

rest-before <time> | none | x-weak | weak | medium | rest-before: medium;

strong | x-strong rest-before: 20ms;

rest-after <time> | none | x-weak | weak | medium | rest-after: medium;

strong | x-strong rest-after: 20ms;

22. Pseudo-class
Property Meaning

:active the active element

:focus Element in focus

:link an unvisited link

:enabled an element when enabled

:disabled an element when disabled

:hover element when you mouse over

:checked Checked element

:selection an element currently selected or highlighted by the user

:lang allows the author to specify a language to use in a specied

element

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

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

:rst-child rst sibling

:last-child last sibling

:only-child only child element

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

:nth-last-of-type(n) n-th sibling of its type counting from the last sibling

:rst-of-type rst sibling of its type

:last-of-type an element that is the last sibling of its type

:only-of-type only child of its type

:empty Element with no children

:root Root element of the document

:target Target specified by a URL

:not(x) element not represented by the argument ‘x’

23. Pseudo-element
Property Meaning Example

::rst-lett Adds special style to the rst letter p::first-letter { font-size: 150%; color:
er of a text #FFF00; }

::rst-line Adds special style to the rst line of p::first-letter { font-size: 150%; color:
a text black; }
::before Inserts some content before an p::before { content: "Welcome to hackr: ";
element }

::after Inserts some content after an p::after { content: "Thank you for
element watching"; }
​Absolute Measurements

Symbol Representation

% percentage

ms millisecond

s second

in inches

mm millimetre

cm centimetre

pt point (1/72 inch)

pc pica (12 points)

24. Angles/Time/Frequency
Unit Representatio
n

deg degree

grad gradient

rad radian

turn turns

ms millisecond

s second

Hz hertz

khz kilohertz

25. Relative measurement

Unit Representation

px pixel of the device

gd grid defined by layout-grid

em font size of current element

rem font size of root element

ex x-height of the element’s font

vh viewport height

vm viewport height or width (lower value)

vw viewport width

26. Selector types

Type Meaning Example

class multiple elements of various types .class

id single element #id

universal applicable to all elements *

group apply style to multiple elements p h1 h2

type element of the specified type p

tree element that is below another (any level) #

descendant elementnam
e h3

child element one below the parent element #

elementnam
e > h3

sibling adjacent share the same parent and in the same immediate h2 + p h2 ~
adjacent sequence general share the same parent but can be in any p
general sequence

27. Generated content

Property Value Example
bookmark-label Content/attr/label string bookmark-label : “This is bookmark”

bookmark-level None/integer bookmark-level : 2;

bookmark-target Self/url/attr bookmark-target : url(http://hackr.io);

counter-reset None/number counter-reset : 5

crop Auto/shape Crop : auto

display none/inline/block/inline-block Display : block;

content normal | none | inhibit url Content : normal

float-offset length float-offset : 20px 20px

hyphenate-after auto/integer hyphenate-after : 15

hyphens none/auto/manual hyphens : manual

hyphenate-lines no-limit/integer hyphenate-lines : no-limit

hyphenate-resource none/url hyphenate-resource :

url(http://hackr.io)

hyphenate-before auto/integer hyphenate-before : 10

hyphenate-characte auto/string hyphenate-character : “\1234”

r

counter-increment none/number counter-increment : 10

marks crop | cross/none marks : crop

move-to normal/here/id move-to : normal

image-resolution auto/normal/dpi image-resolution : auto

page-policy start/first/last page-policy : last

quotes none/string quotes : “’” “’”

string-set [id string] [id string] string-set : header content();

text-replace none [string string] text-replace : “foo” “bar”

28. Line box

Property Value Example

alignment- auto | baseline | before-edge | text-before-edge alignment-adjust : middle

adjust | middle | central | after-edge | textafter-edge |
ideographic | alphabetic | hanging |
mathematical length | %

alignment- baseline | ise-script | beforeedge | alignment-baseline : hanging

baseline text-before-edge | afteredge | text-after-edge |
central | middle | ideographic | alphabetic |
hanging | mathematical

drop-initial central | middle | after-edge | text-after-edge | drop-initial-after-align : 30%

-after-alig ideographic | alphabetic | mathematical | %
n

drop-initial caps-height | <alignment-baseline> drop-initial-before-align :

-before-ali central
gn

drop-initial before-edge | text-before-edge | central | middle drop-initial-before-adjust : 10px

-before-ad | hanging | mathematical | length | % drop-initial-before-adjust : 10%
just drop-initial-before-adjust :
middle

drop-initial initial integer drop-initial-value : 20

-value

drop-initial auto integer % line drop-initial-size : 25%

-size

baseline-s sub | super | length % baseline-shift : super

hift

dominant- baseline/hanging/middle dominant-baseline : middle

baseline x=25 y = 50

line-stacki consider-shifts | disregard-shifts line-stacking-shift :

ng-shift disregard-shifts

line-stacki inline-line-height | block-line-height | max-height line-stacking-strategy:

ng-strateg | grid-height max-height
y
inline-box- Initial | last| integer inline-box-align : 2
align inline-box-align : initial

line-height Normal/number/ length/ % line-height : 30%

text-height auto | font-size | text-size | max-size text-height : auto

vertical-ali Baseline | sub | super | top | text-top | middle | vertical-align : middle

gn bottom | text-bottom length | %