CSS2 Quick Reference


BOX MODEL direction 9.10 marks 13.2.3
Value: ltr | rtl | inherit Value: [crop || cross] | none | inherit
margin-top, margin-right, margin-bottom, margin-left ż 8.3
unicode-bidi 9.10 page-break-before, page-break-after 13.3
Value: | | auto | inherit
Default: 0
Value: normal | embed | bidi-override | inherit Value: auto | always | avoid | left | right | inherit
margin ż 8.3
page-break-inside 13.3
VISUAL FORMATTING MODEL DETAILS
Value: ( | | auto){1,4} | inherit
Value: avoid | auto | inherit
width 10.2 height 10.5
Default: not defined for shorthand properties
page 13.3.2 orphans, widows 13.3.3
padding-top, padding-right, padding-bottom, padding-left ż 8.4 Value: | | Value: | |
Value: | auto Value: | inherit
auto | inherit auto | inherit
Value: | | inherit
Default: 2
min-width 10.4 min-height 10.7
Default: 0
COLORS AND BACKGROUNDS
Value: | | Value: | |
padding ż 8.4
inherit inherit
color 14.1 background-image 14.2.1
Value: ( | ){1,4} | inherit
Default: UA dependent Default: 0
Default: not defined for shorthand properties
Value: | inherit Value: | none | inherit
max-width 10.4 max-height 10.7
border-top-width, border-right-width, border-bottom-width, Default: depends on user agent
background-attachment 14.2.1
Value: | | Value: | |
border-left-width ż 8.5.1
background-color 14.2.1
none | inherit none | inherit
Value: scroll | fixed | inherit
Value: thin | medium | thick | | inherit
Default: | transparent |
line-height 10.8.1
inherit
border-width ż 8.5.1
Value: normal | | | | inherit
background-repeat 14.2.1
Value: (thin | medium | thick | ){1,4} | inherit
vertical-align 10.8.1
Default: see individual properties
Value: repeat | repeat-x | repeat-y | no-repeat | inherit
Value: baseline | sub | super | top | text-top | middle | bottom |
border-top-color, border-right-color, border-bottom-color,
background-position 14.2.1
text-bottom | | | inherit
border-left-color ż 8.5.2
Value: [[ | ]{1,2} | [[top | center | bottom] ||
Value: | inherit VISUAL EFFECTS
[left | center | right]]] | inherit
Default: the value of the 'color' property
Default: 0% 0%
overflow 11.1.1
border-color ż 8.5.2
background 14.2.1
Value: visible | hidden | scroll | auto | inherit
Value: {1,4} | transparent | inherit
Value: [ || || clip 11.1.2
Default: see individual properties
repeat> || || ] |
inherit
Value: rect( || || || ) | auto | inherit
border-top-style, border-right-style, border-bottom-style,
Default: not defined for shorthand properties
border-left-style ż 8.5.3
visibility 11.2
Value: none | hidden | dotted | dashed | solid | double | groove | FONTS
Value: visible | hidden | collapse | inherit
ridge | inset | outset | inherit
font-family 15.2.2
GENERATED CONTENT, AUTOMATIC NUMBERING, AND LISTS
border-style ż 8.5.3
Value: [[ | (serif | sans-serif | cursive | fantasy |
Value: (none | hidden | dotted | dashed | solid | double | groove |
content 12.2
monospace)],]* [ | (serif | sans-serif | cursive
ridge | inset | outset){1,4} | inherit
| fantasy | monospace)] | inherit
Value: [ | | | attr(X) | open-quote | close-
Default: see individual properties
Default: depends on user agent
quote | no-open-quote | no-close-quote ]+ | inherit
border-top, border-right, border-bottom, border-left ż 8.5.4
Default: empty string
font-style 15.2.3 font-variant 15.2.3
Value: [ || || ] | inherit
quotes 12.4.1
Value: normal | italic | oblique Value: normal | small-caps |
Default: see individual properties
| inherit inherit
Value: [ ]+ | none | inherit
border ż 8.5.4
Default: depends on user agent
font-weight 15.2.3
Value: [ || || ] | inherit
counter-reset, counter-increment 12.5
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500
Default: see individual properties
| 600 | 700 | 800 | 900 | inherit
Value: [ ?]+ | none | inherit
font-stretch 15.2.3
VISUAL FORMATTING MODEL
marker-offset 12.6.1
Value: normal | wider | narrower | ultra-condensed | extra-condensed
Value: | auto | inherit
display 9.2.5
| condensed | semi-condensed | semi-expanded | expanded |
extra-expanded | ultra-expanded | inherit
list-style-type 12.6.2
Value: inline | block | list-item | run-in | compact | marker | table
| inline-table | table-row-group | table-header-group | table-
font-size 15.2.4
Value: disc | circle | square | decimal | decimal-leading-zero |
footer-group | table-row | table-column-group | table-column |
lower-roman | upper-roman | lower-greek | lower-alpha | lower-
table-cell | table-caption | none | inherit Value: [xx-small | x-small | small | medium | large | x-large | xx-
latin | upper-alpha | upper-latin | hebrew | armenian |
large ] | [ larger | smaller ] | | |
position 9.3.1 georgian | cjk-ideographic | hiragana | katakana | hiragana-
inherit
iroha | katakana-iroha | none | inherit
Value: static | relative | absolute | fixed | inherit
font-size-adjust 15.2.4
list-style-image 12.6.2 list-style-position 12.6.2
top, right, bottom, left 9.3.2
Value: | none | inherit
Value: | none | inherit Value: inside | outside | inherit
Value: | | auto | inherit
Font 15.2.5
list-style 12.6.2
float 9.5.1
Value: [[ || || ]? Value: [<'list-style-type'> || <'list-style-position'> || <'list-
size> [/ ]? ] | caption | icon |
Value: left | right | none | inherit
style-image'>] | inherit
menu | message-box | small-caption | status-bar | inherit
Default: not defined for shorthand
clear 9.5.2
Default: see individual properties
Value: none | left | right | both | inherit
PAGED MEDIA
z-index 9.9.1
Size 13.2.2
Value: auto | | inherit
Value: {1,2} | auto | portrait | landscape | inherit
TEXT cue 19.5
Value: [ <'cue-before'> || <'cue-after'> ] | inherit
text-indent 16.1
Default: not defined for shorthand properties
Value: | | inherit
play-during 19.6
Default: 0
Default: mix? repeat? | auto | none | inherit
text-align 16.2
azimuth 19.7
Value: left | right | center | justify | | inherit
Default: depends on user agent and writing direction
Value: | [[ left-side | far-left | left | center-left |
center | center-right | right | far-right | right-side ] ||
text-decoration 16.3
behind ] | leftwards | rightwards | inherit
QUICK REFERENCE
Value: none | [ underline || overline || line-through || blink ] |
elevation 19.7 speech-rate 19.8
inherit
Value: | below | level | Value: | x-slow | slow |
text-shadow 16.3.2
above | higher | lower | medium | fast | x-fast |
Value: none | [ || ? ,]* [ || inherit faster | slower | inherit
?] | inherit
voice-family 19.8
letter-spacing 16.4 text-transform 16.5 Cascading Style Sheets
Value: [[ | ],]* [ |
Value: normal | | Value: capitalize | uppercase | ] | inherit
inherit lowercase | none | inherit Default: depends on user agent
(CSS)
word-spacing 16.4 white-space 16.6 pitch 19.8 speak-punctuation 19.9
Level 2
Value: normal | | Value: normal | pre | nowrap | Default: | x-low | low Value: code | none | inherit
inherit inherit | medium | high | x-high |
speak-numeral 19.9
inherit
TABLES
Value: digits | continuous |
pitch-range, stress, richness 19.8
W3C Recommendation
inherit
caption-side 17.4.1 border-spacing 17.6.1
Value: | inherit
12-May-1998
Default: 50
Value: top | bottom | left | Value: ? |
right | inherit inherit
UNITS
Default: 0
table-layout 17.5.2
http://www.w3.org/TR/REC-CSS2/
empty-cells 17.6.1 Relative Length Units 4.3.2 Times 4.3.8
Value: auto | fixed | inherit
Value: show | hide | inherit em, ex, px ms, s
border-collapse 17.6
speak-header 17.7.1 Absolute Length Units 4.3.2 Frequencies 4.3.9
Value: collapse | separate |
in, cm, mm, pt, pc Hz, kHz
inherit Value: once | always | inherit
Table of Contents:
Angle 4.3.7 Color Units 4.3.6
BOX MODEL
USER INTERFACE
VISUAL FORMATTING MODEL
deg, grad, rad #f00, #ff0000, rgb(255,0,0),
cursor 18.1 rgb(100%, 0%, 0%) VISUAL FORMATTING MODEL DETAILS
VISUAL EFFECTS
Value: [ [ ,]* [ auto | crosshair | default | pointer | move |
PSEUDO CLASSES, PSEUDO ELEMENTS AND MEDIA TYPES GENERATED CONTENT, AUTOMATIC NUMBERING, AND LISTS
e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-
PAGED MEDIA
resize | s-resize | w-resize| text | wait | help ] ] | inherit
Anchor Pseudo Classes Media Types
COLORS AND BACKGROUNDS
outline 18.4 outline-width 18.4 FONTS
a:link /* unvisited link */ all, aural, braille, embossed,
TEXT
a:visited /* visited links */ handheld, print, projection,
Value: [ <'outline-color'> || Value: | inherit
TABLES
a:active /* active links */ screen, tty, tv
<'outline-style'> ||
Default: medium
USER INTERFACE
<'outline-width'> ] |
Typographic Pseudo Elements
outline-style 18.4 AURAL STYLE SHEETS
inherit
UNITS
p:first-line /* first line of p element */
Default: see individual properties
Value: | inherit
p:first-letter /* first letter of p element */ PSEUDO CLASSES, PSEUDO ELEMENTS AND MEDIA TYPES
Default: none
p:before /* content before p in document tree */ CSS SAMPLES
p:after /* content after p in document tree */
outline-color 18.4 NOTATION
@page:left /* left page margin properties */
Value: | invert | inherit
@page:right /* right page margin properties */
AURAL STYLE SHEETS
CSS SAMPLES
h1 { font-family: Times; } /* all h1 elements */
volume 19.2
h1, h2 { font-width: bold; } /* all h1 and h2 elements */
h1 em { color: red; } /* em elements within h1 elements/
Value: | | silent | x-soft | soft | medium |
.para { font-family: Arial; } /* all elements with class= para */
loud | x-loud | inherit
#p4 { letter-spacing: 12px; } /* the element with id= p4 */
speak 19.3 pause-before, pause-after 19.4
@page:left { margin: 2cm } /* margin for media type  page */
@import "list.css"; /* import from file  list.css */
Value: normal | none | spell-out Value: