CSS Cheat Sheet Version 2 – Reference

Box Model:

image

Selectors
*

div

div *

div span

div, span

div > span

div + span

.class

div.class

#itemid

div#itemid

a[attr]

a[attr=’x’]

a[class~=’x’]

a[lang|=’en’]

All elements

<div>

All elements within <div>

<span> within <div>

<div> and <span>

<span> with parent <div>

<span> preceded by <div>

Elements of class “class”

<div> of class “class”

Element with id “itemid”

<div> with id “itemid”

<a> with attribute “attr”

<a> when “attr” is “x”

<a> when class is a list

containing ‘x’

<a> when lang begins “en”

~
Pseudo-Selectors and Pseudo-Classes
:first-child

:first-line

:first-letter

:hover

:active

:focus

:link

:visited

:lang(var)

:before

:after

First child element

First line of element

First letter of element

Element with mouse over

Active element

Element with focus

Unvisited links

Visited links

Element with language “var”

Before element

After element

~
Sizes and Colors
0

Relative Sizes

em

ex

%

Absolute Sizes
px
cm
mm
in
pt
pc

Colours
#789abc
#acf
rgb(0,25,50)

0 requires no unit

1em equal to font size of
parent (same as 100%)
Height of lower case “x”
Percentage

Pixels
Centimeters
Millimeters
Inches
1pt = 1/72in
1pc = 12pt

RGB Hex Notation
Equates to “#aaccff”
Value of each of red, green,
and blue. 0 to 255, may be
swapped for percentages.

~
Positioning
display

position

top

right

bottom

left

float

clear

z-index

direction +

unicode-bidi

overflow

clip

visibility

~
Dimensions
width

min-width

max-width

height

min-height

max-height

vertical-align

~
Color / Background
color +

background x

background-color

background-attachment

background-repeat

background-image

background-position

~
Text
teexxtt-indent +

text-align +

text-decoration

text-shadow

letter-spacing +

word-spacing +

text-transform +

white-space +

line-height +

~
Fonts
font + x

font-family +

font-style +

font-variant +

font-weight +

font-stretch +

font-size +

font-size-adjust +

~
Boxes
margin x

margin-top

margin-right

margin-bottom

margin-left

padding x

padding-top

padding-right

padding-bottom

padding-left

border x

border-top x

border-bottom x

border-right x

border-left x

border-color x

border-top-color

border-right-color

border-bottom-color

border-left-color

border-style x

border-top-style

border-right-style

border-bottom-style

border-left-style

border-width x

border-top-width

border-right-width

border-bottom-width

Positioning border-left-width

~
Tables
caption-side +

table-layout

border-collapse +

border-spacing +

empty-cells +

speak-header +

~
Paging
size

marks

page-break-before

page-break-after

page-break-inside +

page +

orphans +

widows +

Interface
cursor +

outline x

outline-width

outline-style

outline-color

~
Aural
volume +

speak +

pause x

pause-before

pause-after

cue x

cue-before

cue-after

play-during

azimuth +

elevation

speech-rate

voice-family

pitch

pitch-range

stress

richness

speak-punctuation

speak-numeral

~
Miscellaneous
content

quotes +

counter-reset

counter-increment

list-style + x

list-style-type +

list-style-image +

list-style-position +

marker-offset

~

About onlinejt

Blogger

, ,

No comments yet.

Leave a Reply

*