You are on page 1of 2

background () text-indent

Value: <background-color> || <background-image> Value: <length> | <percentage>


<background-repeat> || <background-attachment> Default: 0
<background-position> Applies to: block-level elements
Default: not defined for shorthand properties Percentage values: refer to parent elements width
Percentage values: allowed on <background-position>
line-height
color Value: normal | <number> | <length> | <percentage>
Value: <color> Percentage values: relative to the font size of the element itself
Default: UA specific

CSS SAMPLES
FONT PROPERTIES
H1 { font-family: Times } /* all H1 elements */
font-family H1, H2 { color: blue } /* all H1 and H2 elements */
Value: [[<family-name> | <generic-family>],]* H1 EM { color : red } /* EM elements within H1 elements/
[<family-name> | <generic-family>] .para { font-family: Arial } /* all elements with CLASS para */
Default: UA specific H1#z98y { letter-spacing: 0.5em } /* the H1 element with ID z98y */

<generic-family>
serif | sans-serif | cursive | fantasy | monospace NOTATION
font-style a b a followed by b
[a b] Grouping of a and b
Value: normal | italic | oblique
a | b a or b
a || b either a or b or both in any order
font-variant a? a is optional
Value: normal | small-caps a* zero or more occurrences of a
a+ one or more occurrences of a
a{1, 4} a occurs at least once and at most 4 times
font-weight
Value:

normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
CSS Quick Reference Manual
PSEUDO CLASSES AND PSEUDO ELEMENTS
font-size
Anchor Pseudo Classes Typographic Pseudo Elements
Cascading Style Sheets
Value: <absolute-size> | <relative-size> | <length> | <percentage>
Percentage values: relative to parent elements font size A:link /* unvisited link */ P:first-line /* first line of a P element */
A:visited /* visited links */ P:first-letter /* first letter of a P element */
<absolute-size> A:active /* active links */
xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size>
larger | smaller UNITS

font Properties
Value: [ <font-style> || <font-variant> || <font-weight> ]?
Length units - Box Properties
<font-size> [ / <line-height> ]? <font-family> <length> - Classification Properties
Default: not defined for shorthand properties (+ | -)? <number> <unit> - Color and Background Properties
Percentage values: allowed on <font-size> and <line-height> <number> - Font Properties
<digit>+[. <digit>*]?
<unit>
- Text Properties
TEXT PROPERTIES <absolute-unit> | <relative-unit>
<absolute-unit> CSS Samples
word-spacing mm | cm | in | pt | pc
Value: normal | <length> <relative-unit> Notation
em | ex | px
letter-spacing Pseudo Class and Pseudo element
Value: normal | <length> Percentage Units
<percentage> Units
text-decoration () <number>% - Length Units
Value: none | [ underline || overline || line-through || blink ] - Percentage Units
Color Units - Color Units
vertical-align () <color> - Url
Value: baseline | sub | super | top | text-top | middle | bottom | <color-name> | <rgb-color>
text-bottom | <percentage> <color-name>
Applies to: inline elements aqua | black | blue | fuchsia | gray | green | lime | maroon |
Percentage values: refer to the line-height of the element itself navy | olive | purple | red | silver | teal | white | yellow
<rgb-color>
#<hex><hex><hex> |
text-transform
#<hex><hex><hex><hex><hex><hex> |
Value: capitalize | uppercase | lowercase | none rgb(<number>, <number>, <number>) | Day Two B.V.
rgb(<percentage> <percentage>, <percentage>) http://www.day-two.nl/
text-align info@day-two.nl
Value: left | right | center | justify URL
Default: UA specific <url>
Applies to: block-level elements url(text)
CSS PROPERTIES border-bottom-width () bottom ()
Value: thin | medium | thick | <lenght> Value: <length> | <percentage> | auto | inherit
The Cascading Style Sheets properties outlined here are grouped Applies to: positioned elements
into the appropriate categories. For each property the following border-left-width () Percentage values: refer to parent elements height
information is specified: Value: thin | medium | thick | <lenght>
? ? The property name left ()
? ? The set of possible values for the property border-width ()
? ? The default value (in bold, or specified separately) Value: <length> | <percentage> | auto | inherit
Value: thin | medium | thick | <lenght> {1, 4} Applies to: positioned elements
? ? The elements that the property applies to (all unless otherwise stated)
Default: not defined for shorthand properties Percentage values: refer to parent elements width
? ? indicates a property that is not inherited
The notation used in this Quick Reference is summarised at the end.
border-color ()
Value: <color>{1,4} z-index ()
Default: the value of the color property Value: auto | <integer> | inherit
Applies to: positioned elements
BOX PROPERTIES border-style ()
Value: none | dotted | dashed | solid | double | overflow ()
margin-top () groove | ridge | inset | outset Value: visible | hidden | scroll | auto | inherit
Value: <length> | <percentage> | auto
Default: 0 Applies to: block-level and replaced elements
border-top ()
Percentage values: refer to parent elements width
Value: <border-top-width> || <border-style> || <color>
Default: not defined for shorthand properties CLASSIFICATION PROPERTIES
margin-right ()
Value: <length> | <percentage> | auto border-right () display ()
Default: 0 Value: block | inline | list-item | none
Value: <border-right-width> || <border-style> || <color>
Percentage values: refer to parent elements width
Default: not defined for shorthand properties
white-space
margin-bottom ()
border-bottom () Value: normal | pre | nowrap
Value: <length> | <percentage> | auto
Value: <border-bottom-width> || <border-style> || <color>
Default: 0
Percentage values: refer to parent elements width
Default: not defined for shorthand properties list-style-type
Value: disc | circle | square | decimal | lower-roman | upper-roman |
margin-left () border-left () lower-alpha | upper-alpha | none
Value: <border-left-width> || <border-style> || <color> Applies to: elements with display value list-item
Value: <length> | <percentage> | auto
Default: not defined for shorthand properties
Default: 0
Percentage values: refer to parent elements width list-style-image
border () Value: <url> | none
margin () Value: <border-width> || <border-style> || <color> Applies to: elements with display value list-item
Default: not defined for shorthand properties
Value: <length> | <percentage> | auto {1, 4}
Default: not defined for shorthand properties list-style-position
Percentage values: refer to parent elements width width () Value: inside | outside
Value: <length> | <percentage> | auto Applies to: elements with display value list-item
padding-top () Applies to: block-level and replaced elements
Value: <length> | <percentage>
Percentage values: refer to parent elements width list-style
Default: 0 Value: <list-style-type> || <list-style-position> || <list-style-image>
Percentage values: refer to width of closest block-level ancestor height () Default: not defined for shorthand properties
Value: <length> | auto Applies to: elements with display value list-item
padding-right () Applies to: block-level and replaced elements
Value: <length> | <percentage>
Default: 0 float () COLOR AND BACKGROUND PROPERTIES
Percentage values: refer to width of closest block-level ancestor Value: left | right | none
background-color ()
padding-bottom () clear () Value: <color> | transparent
Value: <length> | <percentage> Value: none | left | right | both
Default: 0 background-image ()
Percentage values: refer to width of closest block-level ancestor visibility () Value: <url> | none
Value: visible | hidden | collapse | inherit
padding-left () background-repeat ()
Value: <length> | <percentage>
Default: 0 position () Value: repeat | repeat-x | repeat-y | no-repeat
Percentage values: refer to width of closest block-level ancestor Value: static | relative | absolute | fixed | inherit
Applies to: all elements, but not to generated content background-attachment ()
padding () Value: scroll | fixed
Value: <length> | <percentage> {1, 4} top ()
Default: not defined for shorthand properties Value: <length> | <percentage> | auto | inherit background-position ()
Percentage values: refer to width of closest block-level ancestor
Applies to: positioned elements Value: [<percentage> | <length>]{1,2} | [top | center
Percentage values: refer to parent elements height [left | center | right]
border-top-width () Default: 0% 0%
Value: thin | medium | thick | <lenght> Applies to: block-level and replaced elements
right ()
Percentage values: refer to the size of the element itself
Value: <length> | <percentage> | auto | inherit
border-right-width () Applies to: positioned elements
Value: thin | medium | thick | <lenght> Percentage values: refer to parent elements width

You might also like