Cheat Sheets – CSS2

Citation preview

CSS2 Cheat Sheet by Dave Child (DaveChild) via cheatography.com/1/cs/14/

CSS2 Selectors

CSS2 Sizes

CSS2 Positioning

*

All elements

0

display

clear

div

Relative Sizes

position

z-index

div *

All elements within

em

1em equal to font size of parent (same

top

direction

as 100%)

right

unicod​e-bidi

bottom

overflow

left

clip

float

visibility

div span

within

0 requires no unit

ex

Height of lower case "​x"

with parent

%

Percentage

preceded by

Absolute Sizes

.class

Elements of class "​cla​ss"

px

Pixels

div.class

of class "​cla​ss"

cm

Centim​eters

CSS2 Dimensions

#itemid

Element with id "​ite​mid​"

mm

Millim​eters

width

min-height

div#itemid

with id "​ite​mid​"

in

Inches

min-width

max-height

a[attr]

with attribute "​att​r"

pt

1pt = 1/72in

max-width

vertic​al-​align

a[attr​='x']

when "​att​r" is "​x"

pc

1pc = 12pt

height

a[clas​s~='x

when class is a list

']

containing 'x'

a[lang​|='en'

when lang begins "​en"

div, span div > span div + span

and

] CSS2 Pseudo Selectors and Pseudo Classes :first​-child

First child element

:first​-line

First line of element

:first​-letter

First letter of element

:hover

Element with mouse over

:active

Active element

:focus

Element with focus

:link

Unvisited links

:visited

Visited links

:lang(var)

Element with language "​var​"

:before

Before element

:after

After element

CSS2 Colours

CSS2 Colour and Background

#789abc

RGB Hex Notation

color

backgr​oun​d-r​epeat

#acf

Equates to "​#aa​ccf​f"

background

backgr​oun​d-image

rgb(0,​25,

Value of each of red, green, and

backgr​oun​d-color

backgr​oun​d-p​osition

50)

blue. 0 to 255, may be swapped for percen​tages.

backgr​oun​d-a​tta​chment

CSS2 Box Model

By Dave Child (DaveChild)

Published 19th October, 2011.

Sponsored by Readability-Score.com

cheatography.com/davechild/

Last updated 14th May, 2014.

Measure your website readability!

www.addedbytes.com

Page 1 of 2.

https://readability-score.com

CSS2 Cheat Sheet by Dave Child (DaveChild) via cheatography.com/1/cs/14/

CSS2 Text

CSS2 Paging

text-i​ndent

word-s​pacing

size

page-b​rea​k-i​nside

text-align

text-t​ran​sform

marks

page

text-d​eco​ration

white-​space

page-b​rea​k-b​efore

orphans

text-s​hadow

line-h​eight

page-b​rea​k-after

widows

letter​-sp​acing CSS2 Interface CSS2 Fonts

cursor

outlin​e-style outlin​e-color

font

font-w​eight

outline

font-f​amily

font-s​tretch

outlin​e-width

font-style

font-size

font-v​ariant

font-s​ize​-adjust

CSS2 Boxes

CSS2 Aural volume

elevation

speak

speech​-rate

margin

border​-color

pause

voice-​family

margin-top

border​-to​p-color

pause-​before

pitch

margin​-right

border​-ri​ght​-color

pause-​after

pitch-​range

margin​-bottom

border​-bo​tto​m-color

cue

stress

margin​-left

border​-le​ft-​color

cue-before

richness

padding

border​-style

cue-after

speak-​pun​ctu​ation

paddin​g-top

border​-to​p-style

play-d​uring

speak-​numeral

paddin​g-right

border​-ri​ght​-style

azimuth

paddin​g-b​ottom

border​-bo​tto​m-style

paddin​g-left

border​-le​ft-​style

border

border​-width

content

list-s​tyl​e-type

border-top

border​-to​p-width

quotes

list-s​tyl​e-image

border​-bottom

border​-ri​ght​-width

counte​r-reset

list-s​tyl​e-p​osition

border​-right

border​-bo​tto​m-width

counte​r-i​ncr​ement

marker​-offset

border​-left

border​-le​ft-​width

list-style

CSS2 Miscellaneous

CSS2 Tables captio​n-side

border​-sp​acing

table-​layout

empty-​cells

border​-co​llapse

speak-​header

By Dave Child (DaveChild)

Published 19th October, 2011.

Sponsored by Readability-Score.com

cheatography.com/davechild/

Last updated 14th May, 2014.

Measure your website readability!

www.addedbytes.com

Page 2 of 2.

https://readability-score.com