CSS Cheat Sheet

@ Rules
RULE USAGE EXAMPLES

import @import url(uri) [ { all | screen | print } [ , ... ] ] @import url(/styles/core.css);

@import url(/styles/print.css) print;

page @page [ :first | :left | :right | identifier ] { margin | size | marks } @page { margin: 0.5in; }
@page :left { margin-right: 0.75in; }
media @media { all | screen | print } [ , ... ] { rules } @media print { #menu { display: none; } }
font-face @font-face { font-family | src } @font-face { font-family: “Robson Celtic”; src: url(http://site/fonts/rob-celt”); }
charset @charset charset @charset “ISO-8859-1”;

Selectors Lengths and Percentages Box Model 3

SELECTOR DESCRIPTION UNIT DESCRIPTION

* All elements 0 Zero (unit is optional)

MARGIN margin-top
E All E elements em 1em = font size of parent BORDER border-top
PADDING padding-top
E, F All E and F elements ex 1ex = height of an ‘x’
CONTENT

padding-right

margin-right
padding-left

border-right
margin-left
border-left
All F elements within E px Pixels

Height
EF elements
% Percentage
E>F All F elements with parent E
elements cm Centimeters
padding-bottom
All F elements preceded by E mm Millimeters
E+F elements border-bottom
in Inches, 1in = 2.54cm margin-bottom
.class All elements with class class Width
pt Points, 1pt = 1/72in
E.class All E elements with class class Visible Area
pc Picas, 1pc = 12pt
#identifier Element with id identifier 3) The IE Box model is similar except that the border and padding are included in the computed width

E#identifier Element E with id identifier Box Properties

PROPERTY VALUES

E[attr] All E elements with attribute attr width, height length | percentage | auto

E[attr=’value’] All E elements when attribute min-width, min-height length | percentage

attr is equal to value
max-width, max-height length | percentage | none
E[attr~=’value’] All E elements when attribute s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } |
attr is a list containing value margin length | percentage
E[attr|=’value’] All E elements when attribute
attr is a list beginning with value margin-top, margin-right
margin-bottom, margin-left length | percentage
Pseudo-Elements and Pseudo-Classes s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } |
SELECTOR DESCRIPTION
padding length | percentage | auto
E:first-child First child of E elements
padding-top, padding-right
E:first-line First line of E elements padding-bottom, padding-left length | percentage | auto
E:first-letter First letter of E elements border, s
1 border-top, border-right, border-width || border-style || border-color
E:before Insert before E elements border-bottom, border-left
1
E:after Insert after E elements s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } |
border-width length | thin | medium | thick
E:hover All E elements with mouse over
border-top-width
E:active All active E elements border-right-width
border-bottom-width length | thin | medium | thick
E:focus All E elements with focus border-left-width
All E elements with language s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } |
E:lang(lang) lang border-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
A:link All unvisited A links border-top-style
border-right-style none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
:link All unvisited links border-bottom-style
border-left-style
A:visited All visited A links
s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } |
:visited All visited links border-color color | transparent
1) These pseudo-elements are used in conjunction with the content property
border-top-color
Colors border-right-color
COLOR DESCRIPTION
border-bottom-color color | transparent
name Any named color border-left-color
Any color where rr, gg, bb are List Properties
#rrggbb between 0 and 255 in PROPERTY VALUES
hexadecimal notation (00 – FF) i s list-style-type || list-style-position || list-style-image
list-style
Any color where r, g, b are i
#rgb 2 between 0 and 16 in none | circle | disc | square | decimal | decimal-leading-zero | georgian |
hexadecimal notation (0 – F) list-style-type lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin |
(equivalent to #rrggbb) upper-roman | armenian
i list-style-position inside | outside
Any color where red, green,
rgb(red, green, blue) blue are between 0 and 255 (or i
percentages between 0% and list-style-image none | url(uri)
100%)
marker-offset length | auto
2) Web-safe colors limit the values to 0, 3, 6, 9, C, and F

Legend
SYNTAX DESCRIPTION SYNTAX DESCRIPTION SYNTAX DESCRIPTION

value data type values || one or many values ... repeat previous value(s)
keyword keyword values {} group of values s shorthand property
| one value [] optional value(s) i inherited property
 CSS Cheat Sheet
Table Properties Table Model
PROPERTY VALUES

table-layout auto | fixed border-spacing

i border-collapse collapse | separate
i TABLE MARGIN
border-spacing { horizontal vertical } | length TABLE BORDER
i empty-cells hide | show CELL BORDER
CELL PADDING
i caption-side bottom | top CELL

Table Height

border-spacing
Text Properties
PROPERTY VALUES

Cell Height
i text-align string | left | right | center | justify
text-decoration none | { underline || overline || line-through || blink }
i text-indent length | percentage
text-shadow { { [ color ] x-offset y-offset [ blur ] } [ , ... ] } | none
i text-transform none | capitalize | lowercase | uppercase Cell Width
i line-height length | number | percentage | none Table Width
Visible Area
i letter-spacing,
word-spacing length | normal
Text Spacing
i white-space normal | nowrap | pre
length | percentage | baseline | bottom | middle | sub | super | text-bottom |
vertical-align text-top | top Lorem ipsum
Font Properties line-height

i
PROPERTY VALUES
s { [ font-style || font-variant || font-weight ] font-size [ /line-height ] font-family } |
dolor sit amet
font caption | icon | menu | message-box | small-caption | status-bar
letter-spacing 5 word-spacing 6
i font-style normal | italic | oblique
5) The value is in addition to the default spacing between characters
i font-variant normal | small-caps
6) The value is in addition to the default spacing between words

User Interface Properties

i bolder | lighter | 100 | 200 | 300 | { normal | 400 } | 500 | 600 | { bold | 700 } | PROPERTY VALUES
font-weight 800 | 900 i
default | crosshair | pointer |
i move | e-resize | ne-resize |
font-size length | percentage | larger | smaller | xx-small | x-small | small | medium | large | cursor nw-resize | n-resize |
x-large | xx-large se-resize | sw-resize |
i s-resize | text | wait | help
font-size-adjust number | none
i s outline-width || outline-style ||
i font-family { family-name | generic-name } [ , ... ] outline outline-color
i normal | wider | narrower | ultra-condensed | extra-condensed | condensed | outline-width length | thin | medium | thick
font-stretch semi-condensed | normal | semi-expanded | expanded | extra-expanded |
ultra-expanded none | dotted | dashed |
outline-style solid | double | groove |
src 4 url(uri) ridge | inset | outset
4) This property is used within the @font-face rule
outline-color color | invert
Color and Background Properties
PROPERTY VALUES
i Page Properties
color color PROPERTY VALUES

s background-color || background-image || background-repeat || 7 { width height } | length |

background size auto | portrait | landscape
background-attachment || background-position
background-color color | transparent marks 7 none | { crop || cross }
i page 8 identifier | none
background-image none | url(uri)
background-repeat no-repeat | repeat | repeat-x | repeat-y page-break-before auto | always | avoid | left |
page-break-after right
background-attachment scroll | fixed i page-break-inside auto | avoid
background-position { { percentage | length } [ ... ] } | { { top | center | bottom } || i
{ left | center | right } } orphans integer
widows
7) This property is used within the @page rule
Layout Properties 8) The identifier refers to the identifier specified in a @page rule
PROPERTY VALUES
Generated Content Properties
none | block | inline | list-item | run-in | compact | marker | inline-block | PROPERTY VALUES
display inline-table | table | table-cell | table-row | table-column | table-caption |
table-header-group | table-row-group | table-column-group | table-footer-group string || uri || counter ||
content 9 attr(x) || open-quote ||
position absolute | fixed | relative | static close-quote || no-open-quote ||
no-close-quote
top, right, bottom, left length | percentage | auto i
quotes { { string string } [ ... ] } |
visibility visible | hidden | collapse none

float none | left | right counter-reset { { identifier [ integer ] }

counter-increment [ ... ] } | none
clear none | left | right | both 9) This property is used in conjunction with the :before and :after pseudo-elements

z-index integer | auto

overflow auto | hidden | visible | scroll
clip shape | auto
i direction ltf | rtl
unicode-bidi normal | embed | bidi-override