CSS Cheat Sheet
@ Rules
RULE USAGE EXAMPLES
import page media font-face charset
SELECTOR
@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(/styles/core.css); @import url(/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
SELECTOR
E:first-child E:first-line E:first-letter E:before E:after
1 1
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 Properties
PROPERTY VALUES
Table Model
border-spacing
table-layout i i i i border-collapse border-spacing empty-cells caption-side
PROPERTY
auto | fixed collapse | separate { horizontal vertical } | length hide | show bottom | top
Table Height
TABLE MARGIN TABLE BORDER
CELL BORDER CELL PADDING
Text Properties
VALUES
i
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
i
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
letter-spacing 5 word-spacing 6
5) The value is in addition to the default spacing between characters 6) The value is in addition to the default spacing between words
line-height
User Interface Properties
PROPERTY VALUES
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
PROPERTY
4) This property is used within the @font-face rule
PROPERTY
VALUES
i
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
7
{ 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
PROPERTY VALUES
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