Notes: The table contains most common CSS properties/values. The browsers might ignore some of the properties!
Most off the properties have 'initial', 'unset' and 'inherit' values:
Look also at CSS Code Generator.
| Property | Value | Description | Comments |
|---|---|---|---|
| Font properties | |||
| font-family | family name(s) or generic family, separated by a comma | A prioritised list of font family names and a generic family name for an element | If a font name contains white spaces, it should be quoted.
There are five generic-families:
|
| font-size | [absolute-size] | [relative-size] | [length] | [percentage]
absolute-size: xx-small | x-small | small | medium | large | x-large | xx-large relative-size: larger | smaller length: 12px, 0.8em ... |
Sets the size of a font | em unit = desired element pixel value / parent element font-size in pixels.
A popular technique to use throughout the document is to set the font-size of the body to 62.5% ( that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way: 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em. The modern approach is to set 62.5% to html and then to use always rem units for font-size. em units and percentages do the same thing for font-size. |
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | Sets the weight of a font | 100 is thin, 200 is extra light, ..., 900 is very bold |
| font-style | normal | italic | oblique | Sets the style of the font | |
| font-variant | normal | small-caps | Displays text in a small-caps font or a normal font | In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text. |
| font | combination of 'font-style' 'font-variant' 'font-weight' 'font-size' 'font-family' | A shorthand property for setting all of the properties for a font in one declaration | Look for the values order in the documentation. Avoid using the shorthand font property because of its side-effects. |
| Text Spacing | |||
| line-height | normal | [number] | [length] | [percentage] | Height between lines | number: will be multiplied with the current font size to set the line height |
| letter-spacing | normal | [length] | Increase or decrease the space between characters | |
| word-spacing | normal | [length] | Increase or decrease the space between words | |
| text-align | start | end | left | right | center | justify | match-parent | Aligns the text in an element | |
| text-indent | [length] | [percentage] | Indents the first line of text in an element | |
| vertical-align | [length] | [percentage] | baseline | sub | super | top | text-top | middle | bottom | text-bottom | Sets how white space inside an element is handled | Negative values are allowed for [length] and [percentage]. |
| white-space | normal | pre | nowrap| pre-wrap | pre-line | Sets how white space inside an element is handled | |
| Various properties | |||
| color | color value (hex, rgb, rgba, ...) or color name | Sets the colour of a text | |
| text-decoration | [text-decoration-line] || [text-decoration-style] || [text-decoration-color] | Adds decoration to text (line e.g underline | overline | line-through | blink) | Multiple line decorations can be defined |
| text-underline-position | auto | [ under || [ left | right ]] | Specifies the position of the underline which is set using the text-decoration property underline value | |
| text-transform | capitalize | uppercase | lowercase | none | Controls the letters in an element | capitalize is a keyword forcing the first letter of each word to be converted to uppercase. Other characters are unchanged |
| text-shadow | [offset-x] [offset-y] [blur-radius] [color]| none | Adds shadows to text | Each shadow is specified as an offset from the text, along with optional color and blur radius values.
Offsets and blur-radius are in [length] values. |
| word-wrap | normal | break-word | Specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box | |