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 element’s 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 element’s 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 element’s 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 element’s 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 element’s 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 element’s 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 element’s 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 element’s 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 element’s 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 element’s 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 element’s 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 element’s width

You might also like