Css Cheat Sheet

1. Boxes Paging
css
margin * size
margin-top marks
margin-right page-break-before
margin-bottom page-break-after
margin-left page-break-inside
page
padding * orphans
padding-top widows
padding-right
padding-bottom Color / Background
/* Comment */ Width
Visible Area
padding-left color
@media type {
* background
selector {
border * background-color
property: values;
border-top * background-image
border-bottom * background-repeat
}
border-right * background-attachment
} (Media type optional)
border-left * background-position
border-color * Fonts
border-top-color * font
border-right-color font-family
Styles apply to:
border-bottom-color font-style
* All elements
border-left-color font-variant
div <div>
font-weight
Height Border Padding Margin
div * Elements within <div>
border-style * font-stretch
border-top-style div span font-size
<span> within <div>
border-right-style font-size-adjust
div, span <div> and <span>
border-bottom-style
div > span <span> with <div> as
border-left-style Text
parent px Pixels text-indent
border-width * div + span text-align
<span> preceded by em 1em equal to font size of
border-top-width text-decoration
<div> ... </div> parent (same as 100%)
border-right-width text-shadow
.class Elements of class quot;classquot; ex Height of lower case quot;xquot;
border-bottom-width letter-spacing
div.class <div> of class quot;classquot; % Percentage
border-left-width word-spacing
#itemid text-transform
Element with id quot;itemidquot; in Inches
Positioning white-space
div#itemid <div> with id quot;itemidquot; cm Centimeters
display
a[class] <a> with class attribute mm Millimeters
position Tables
a[class='x'] <a> when class is quot;xquot; pt 1pt = 1/72in
top caption-side
right a[class~='x'] <a> when class is a list table-layout
pc 1pc = 12pt
bottom border-collapse
of space-seperated values #789abc RGB Hex Notation
left border-spacing
and one of those is 'x' #acf Equates to quot;#aaccffquot;
float empty-cells
a[lang|='en'] <a> when lang begins rgb(0,25,50) Value (0 to 255) of each
clear speak-header
z-index with quot;enquot; of red, green, and blue.
direction Interface
May also be percentages
unicode-bidi cursor
0 0 requires no unit
overflow * outline
clip outline-width
Styles apply to:
visibility outline-style
outline-color
:first-child First child of element
Dimensions azimuth list-style
:first-line First line of element
width Aural
border-collapse list-style-image
:first-letter First letter of element
min-width volume
border-spacing list-style-position
:hover Element when mouse over
max-width speak
caption-side list-style-type
height * pause
:active Active element
min-height pause-before
color orphans
:focus Element with focus
max-height pause-after
cursor page
:link Non-active, unvisited
line-height * cue
direction page-break-inside
links without mouse over.
vertical-align cue-before
empty-cells quotes cue-after
:visited Visited links
Miscellaneous play-during
font speak
:lang(lang) Element with text of
content azimuth
font-family speak-header
language quot;langquot;
quotes elevation
font-stretch text-align
counter-reset speech-rate
font-size text-indent
counter-increment voice-family
marker-offset pitch
font-size-adjust text-transform
list-style * pitch-range
font-style volume
all projection
list-style-type stress
font-variant white-space
braille screen
list-style-image richness
font-weight widows
list-style-position speak-punctuation
embossed speech
speak-numeral
letter-spacing word-spacing
handheld tty
Shorthand properties
line-height Available free from
print tv
are marked with *
ILoveJackDaniels.com