Cascades and terminology

Cascades

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.

important

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

Units

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 */

Site Map

(C)opyright 2001-2008, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.