Basic CSS 1 Properties

This is an abridged list of properties found in CSS 1, to get you started.

Note: <word> means replace with the "word" value.
a | b means either a or b.
See section at end about <length>.

Thywissen, John A. Basic CSS 1 Properties [Web page]. Plano (TX): c2007 [revised 2007 Oct 20; cited 2024 Apr 26]. Available from: http://john.thywissen.org/css_properties.html

Typeface properties

font: <font-style> <font-variant> <font-weight> <font-size> / <line-height> <font-family>

Note: When specifying a font property, omit the "normal"s. So, instead of "font: normal normal normal 12pt / 14pt Times, serif", specify "font: 12pt / 14pt Times, serif".

font-style: normal | italic | oblique

font-variant: normal | small-caps

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Note: normal = 400, bold = 700

font-size: <length>

font-family: <family-name>

Note: family-name can be repeated in a comma-seperated list, like "Gill, Helvetica, Arial". You can also specify one of the standard "generic families":
serif (e.g. Times)
sans-serif (e.g. Helvetica)
cursive (e.g. Zapf-Chancery)
fantasy (e.g. Western)
monospace (e.g. Courier)

Color properties

color: #<RGB-hex>

background-color: #<RGB-hex> | transparent

Text properties

word-spacing: normal | <length>

letter-spacing: normal | <length>

text-decoration: none | underline | overline | line-through | blink

text-transform: capitalize | uppercase | lowercase | none

text-align: left | right | center | justify

text-indent: <length> | <percentage>

line-height: normal | <number> | <length> | <percentage>

Box properties

Note: the CSS box model is like this:

           _______________________________________
          |                                       |
          |         margin (transparent)          |
          |   _________________________________   |
          |  |                                 |  |
          |  |      border                     |  |
          |  |   ___________________________   |  |
          |  |  |                           |  |  |
          |  |  |    padding  (background)  |  |  |
          |  |  |   _____________________   |  |  |
          |  |  |  |                     |  |  |  |
          |  |  |  |  content            |  |  |  | 
          |  |  |  |  (height and width) |  |  |  |
          |  |  |  |_____________________|  |  |  |
          |  |  |___________________________|  |  |
          |  |_________________________________|  |
          |_______________________________________|

margin: <margin-top> <margin-right> <margin-bottom> <margin-left>

border: <border-width> | <border-style> | <color>

border-width: thin | medium | thick | <length>

padding: <padding-top> <padding-right> <padding-bottom> <padding-left>

width: <length> | auto

Note: This sets the content width. Padding, borders, and margin are added outside of this.

height: <length> | auto

Note: This sets the content height. Padding, borders, and margin are added outside of this.

Length units

<length> is specified in pixels, points, or em units. Note that there is no space between the number and units.

3 pixels is 3px
10 points is 10pt
1.5 em units is 1.5em

em unit is current font height (an em quad size).