Summary of style sheet properties in CSS1

This document summarizes, in tabular form, some basic features of style sheet rules. It hopefully acts as a quick reference and also gives some sort of overview. The information is taken from the official recommendation Cascading Style Sheets, level 1 (CSS1) but presented in a less formal and hopefully more readable way. If CSS1 defines a default value for a property, it appears strongly emphasized. For other notations, see notes at the end of this document.

Jukka Korpela

Font properties
propertymeaningpossible valuesnotes
font-family font type (family) prioritized, comma-separated list of font family names generic fonts are: serif, sans-serif, cursive, fantasy, monospace
font-style style of font: normal (upright), italic, or oblique (slanted) normal | italic | oblique  
font-variant small caps (i.e. lower case letters are similar to upper case but smaller) or normal normal | small-caps  
font-weight the degree of bolding ("darkness") normal |
bold |
bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 
font-size size (height) of characters xx-small | x-small | small | medium | large | x-large | xx-large |
larger | smaller |
length |
percentage
percentage is relative to the font size of the parent element
font shorthand notation; can be used to specify all above-mentioned font properties in a single declaration [ font-style || font-variant || font-weight ]?
font-size
[/line-height]?
font-family
font-style means any value allowed for font-style property above, etc

Color and background properties

propertypossible valuesdefaultapplicable toinherited? interpretation of percentages
colorcolor UA specific all elementsyes N/A
background-colorcolor | transparent transparent all elementsno (but see note below) N/A
background-imageURL | none none all elementsno (but see note below) N/A
background-repeat repeat | repeat-x | repeat-y | no-repeat repeat all elementsno (but see note below) N/A
background-attachment scroll | fixed scroll all elementsno (but see note below) N/A
background-position [percentage|length]{1,2} | [ [top | center | bottom] || [left | center | right] ] top left (equivalently, 0% 0%) block-level and replaced elementsno (but see note below) relative to size of the element itself
background background-color || background-image || background-repeat || background-attachment || background-position defaults for the individual properties all elementsno (but see note below) applicable to background-position

Note: The background properties are not inherited, but the background of the parent element will shine through by default because of the initial transparent value on background-color.

Text properties

propertypossible valuesdefaultapplicable toinherited? interpretation of percentages

Box properties

propertypossible valuesdefaultapplicable toinherited? interpretation of percentages

Classification properties

propertypossible valuesdefaultapplicable toinherited? interpretation of percentages

Notes

Syntactic (metalanguage) notations used:
| or, ie separates alternatives from each other, meaning that exactly one of them must appear
|| and/or, ie separates alternatives from each other so that one or more of the alternatives may appear, in any order
?optionality indicator, meaning that the preceding construct may or may not appear
{1,n}repetition indicator, meaning that preceding construct shall appear at least once and at most n times
[]used for grouping

UA means user agent, which typically is a program (such as Netscape Navigator or Internet Explorer or Lynx) that presents the document on a screen, in which case it is often called a browser. More generally and abstractly, a user agent is a component of a distributed system that presents an interface and processes requests on behalf of a user.

The set of recognized font family names depends on the UA but it shall contain the following generic family names:
nameexample of more specific namesample text
serif TimesSample text
sans-serif HelveticaSample text
cursive Zapf-ChancerySample text
fantasy WesternSample text
monospace CourierSample text

In the table above, the sample text is displayed using the implementation of the generic family name in your browser, if the browser supports Cascading Style Sheets, level 1 (CSS1).

Style sheet designers are encouraged to offer a generic font family as a last alternative.

A length value shall consist of the following, with no intervening blanks:

. Example: 5.5mm. (After a 0 number, the unit identifier is optional.) The unit identifiers are two-letter abbreviations as follows:

Percentages shall be presented so that a number (with or without a decimal point, with or without a leading sign character + or -) is followed by the character %, and no intervening blanks are allowed. Percentage values are always relative to another value.

The format of a color specification is either a keyword or a numerical RGB specification. The keywords are the same as in the HTML language: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Numerical RGB specifications have a syntax different from that of HTML: in style sheets, the six-digit hexadecimal specification is prefixed with the # character but not enclosed in quotes. Example: #ff0000 (to be used in a context like EM { color: #ff0000 }). Moreover, there are alternative formats, such as #f00 and rgb(255,0,0) and rgb(100%,0%,0%), for numerical RGB specifications (see Cascading Style Sheets, level 1, subsection Color units.

An URL is presented in a style sheet enclosed in parenthesis and prefixed with the string url, for example url(../styles/table.html). See Cascading Style Sheets, level 1, subsection URL, for details.


Jukka Korpela, jkorpela@malibutelecom.com
February 12, 1997