Cascades and terminology


Multiple stylesheets can be merged to create an overall effect, simply by importing more than one:
  @import url(http://siteaddress/sheet1);
  @import url(http://siteaddress/sheet2);
The effect is called cascading. The style information specified by a document generally overrides any that may have been set by the users. Where style sheets loaded using @import, the last one loaded overrides any settings given to the same properties in the preceding sheets. '@import' must occur at the start of a style sheet.

In general, the cascading order is as follows, with the latter taking precedence of preceding items :
  • default values
  • inherited values
  • specified values for that property. If a property have two values assigned to it, then the latter one is used.


format: selector { property:value ! important}

Anything in a user's sheet that has the ! important attribute will over ride the author's sheet, unless the author has also specified ! important for that property.

Formatting model for elements

Each HTML element (<PRE>, etc) is made up of the following, although some may be set to zero:
  • a transparent margin
  • a border, inside that margin space
  • "padding", a margin inside the border
  • the element's content

Block-level elements

These are elements with a 'display' value of 'block' or 'list-item', as well as floating elements. Block-level elements usually create line breaks at their start and end.

Notation for property definitions

In the sections where I define the various Style properties,
  • Text like this is the text as you would type it
  • | means "or"
  • [ ] means that the enclosed values are optional
  • length, percentage, url, number and color describe a type of value to substitute
  • || means and/or


Length units

Throughout the definitions, property values are specified as being able to be of type length. These consist of an optional sign character, a number and a two letter unit identifier.

relative units are supported as seen in these examples:
  H1 { margin: 0.5em }    /* proportion of the height of the element's font */
  H1 { margin: 1ex }      /* proportion of the height of the letter x */
  P  { font-size: 12px }  /* pixels, (dots) on screen or paper */
These absolute units are supported:
  H1 { margin: 0.5in }    /* inches, 1in = 2.54cm */
  H2 { line-height: 3cm } /* centimeters */
  H3 { word-spacing: 4mm }/* millimeters */
  H4 { font-size: 12pt }  /* points, 1pt = 1/72 in */
  H4 { font-size: 1pc }   /* picas, 1pc = 12pt */

Color units

Colours can be specified as names : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

...or as RBG (red,green,blue) colours combinations:
  EM { color: rgb(255,0,0) }      /* integer range 0 - 255 */
  EM { color: rgb(100%, 0%, 0%) } /* percentage of available values */
  EM { color: #rrggbb} /* red,green,blue hexadecimal values */
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.