CSS Cheat Sheet

@ Rules
RULE USAGE EXAMPLES

import page media font-face charset

@import url(uri) [ { all | screen | print } [ , ... ] ] @page [ :first | :left | :right | identifier ] { margin | size | marks } @media { all | screen | print } [ , ... ] { rules } @font-face { font-family | src } @charset charset Selectors
DESCRIPTION UNIT

@import url(/https/www.scribd.com/styles/core.css); @import url(/https/www.scribd.com/styles/print.css) print; @page { margin: 0.5in; } @page :left { margin-right: 0.75in; } @media print { #menu { display: none; } } @font-face { font-family: Robson Celtic; src: url(http://site/fonts/rob-celt); } @charset ISO-8859-1; Lengths and Percentages
DESCRIPTION

Box Model 3
margin-top MARGIN border-top BORDER PADDING padding-top CONTENT margin-left border-left padding-left

* E E, F EF E>F E+F .class E.class #identifier E# identifier E[attr ] E[attr=value] E[attr~=value] E[attr|=value]

All elements All E elements All E and F elements All F elements within E elements All F elements with parent E elements All F elements preceded by E elements All elements with class class

0 em ex px % cm mm in pt

Zero (unit is optional) 1em = font size of parent 1ex = height of an x Pixels Percentage Centimeters Millimeters Inches, 1in = 2.54cm Points, 1pt = 1/72in Picas, 1pc = 12pt

padding-right border-right
DESCRIPTION

margin-right

padding-bottom border-bottom margin-bottom Width Visible Area

All E elements with class class pc Element with id identifier Element E with id identifier All E elements with attribute attr All E elements when attribute attr is equal to value All E elements when attribute attr is a list containing value All E elements when attribute attr is a list beginning with value
DESCRIPTION PROPERTY

3) The IE Box model is similar except that the border and padding are included in the computed width

Box Properties
VALUES

width, height min-width, min-height max-width, max-height margin margin-top, margin-right margin-bottom, margin-left padding

length | percentage | auto length | percentage length | percentage | none s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } | length | percentage length | percentage s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } | length | percentage | auto

Pseudo-Elements and Pseudo-Classes

E:first-child E:first-line E :first-letter E:before E:after

First child of E elements First line of E elements First letter of E elements Insert before E elements Insert after E elements All E elements with mouse over All active E elements All E elements with focus All E elements with language lang All unvisited A links All unvisited links All visited A links All visited links Colors border-top-width border-right-width border-bottom-width border-left-width border-style border-top-style border-right-style border-bottom-style border-left-style border-color border-top-color border-right-color border-bottom-color border-left-color

padding-top, padding-right padding-bottom, padding-left length | percentage | auto s border, border-top, border-right, border-width || border-style || border-color border-bottom, border-left border-width s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } | length | thin | medium | thick length | thin | medium | thick s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset s { top right bottom left } | { top right/left bottom } | { top/bottom right/left } | color | transparent color | transparent

E:hover E:active E:focus E :lang(lang) A :link :link A:visited :visited

1) These pseudo-elements are used in conjunction with the content property

COLOR

DESCRIPTION

name #rrggbb

Any named color Any color where rr, gg, bb are between 0 and 255 in hexadecimal notation (00 FF) Any color where r, g, b are between 0 and 16 in hexadecimal notation (0 F) (equivalent to #rrggbb) Any color where red, green, blue are between 0 and 255 (or percentages between 0% and 100%)

List Properties
PROPERTY VALUES

i i

list-style list-style-type

s list-style-type || list-style-position || list-style-image none | circle | disc | square | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | armenian inside | outside none | url(uri) length | auto Legend
DESCRIPTION SYNTAX

#rgb 2

i i

list-style-position list-style-image marker-offset

rgb(red, green, blue)

2) Web-safe colors limit the values to 0, 3, 6, 9, C, and F

SYNTAX

DESCRIPTION

SYNTAX

value keyword |

data type values keyword values one value

|| {} []

one or many values group of values optional value(s)

... s i

repeat previous value(s) shorthand property inherited property

Height

CSS Cheat Sheet

Table Model
border-spacing

table-layout i i i i border-collapse border-spacing empty-cells caption-side

auto | fixed collapse | separate { horizontal vertical } | length hide | show bottom | top
Table Height
TABLE MARGIN TABLE BORDER

CELL BORDER CELL PADDING

Text Properties
VALUES

text-align text-decoration

string | left | right | center | justify none | { underline || overline || line-through || blink } length | percentage { { [ color ] x-offset y-offset [ blur ] } [ , ... ] } | none none | capitalize | lowercase | uppercase length | number | percentage | none length | normal normal | nowrap | pre length | percentage | baseline | bottom | middle | sub | super | text-bottom | text-top | top Font Properties
VALUES

text-indent text-shadow

i i i i

text-transform line-height letter-spacing, word-spacing white-space vertical-align

Cell Height

Cell Width Table Width Visible Area

Text Spacing

PROPERTY

i i i i i i i i

font font-style font-variant font-weight font-size font-size-adjust font-family font-stretch src 4

s { [ font-style || font-variant || font-weight ] font-size [ /line-height ] font-family } | caption | icon | menu | message-box | small-caption | status-bar normal | italic | oblique normal | small-caps bolder | lighter | 100 | 200 | 300 | { normal | 400 } | 500 | 600 | { bold | 700 } | 800 | 900 length | percentage | larger | smaller | xx-small | x-small | small | medium | large | x-large | xx-large number | none { family-name | generic-name } [ , ... ] normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded url(uri) Color and Background Properties i

Lorem ipsum dolor sit amet

line-height

User Interface Properties

i cursor

default | crosshair | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | text | wait | help s outline-width || outline-style || outline-color length | thin | medium | thick none | dotted | dashed | solid | double | groove | ridge | inset | outset color | invert Page Properties
VALUES

outline outline-width outline-style outline-color

4) This property is used within the @font-face rule

PROPERTY

VALUES

color background background-color background-image background-repeat background-attachment background-position

color s background-color || background-image || background-repeat || background-attachment || background-position color | transparent none | url(uri) no-repeat | repeat | repeat-x | repeat-y scroll | fixed { { percentage | length } [ ... ] } | { { top | center | bottom } || { left | center | right } } Layout Properties
VALUES

size

{ width height } | length | auto | portrait | landscape none | { crop || cross } identifier | none auto | always | avoid | left | right auto | avoid integer

marks 7 i page 8 page-break-before page-break-after i i page-break-inside orphans widows

7) This property is used within the @page rule 8) The identifier refers to the identifier specified in a @page rule

PROPERTY

display position top, right, bottom, left visibility float clear z-index overflow clip i direction unicode-bidi

none | block | inline | list-item | run-in | compact | marker | inline-block | inline-table | table | table-cell | table-row | table-column | table-caption | table-header-group | table-row-group | table-column-group | table-footer-group absolute | fixed | relative | static length | percentage | auto visible | hidden | collapse none | left | right none | left | right | both integer | auto auto | hidden | visible | scroll shape | auto ltf | rtl normal | embed | bidi-override i

Generated Content Properties

content 9

string || uri || counter || attr(x) || open-quote || close-quote || no-open-quote || no-close-quote { { string string } [ ... ] } | none { { identifier [ integer ] } [ ... ] } | none

quotes counter-reset counter-increment

9) This property is used in conjunction with the :before and :after pseudo-elements

border-spacing

CELL