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 has two values assigned to it, then the latter one is used.

important

format: selector { property:value ! important}

Anything in an author's style sheet that uses the ! important attribute will over ride the user's default sheet, unless the user has also specified ! important for that property. Note that this is slightly different to CSS Level 1
example: H1 { color : red ! important}

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

In addition, CSS2 defines the following special colour names, which refer to the respective items in an operating system. They are useful if you want your document to match the user's desktop colour scheme.

ActiveBorder, ActiveCaption Colours for borders and titlebar of an active window.
AppWorkspaceBackground color for multi-window applications.
Background Desktop colour.
ButtonFace, ButtonHighlight, ButtonShadow , ButtonText surface , dark border, shadow and text colour respectively for buttons and 3D objects.
CaptionText Text in caption, size box, and scrollbar arrow box.
GrayText Text for diabled items.
Highlight Selected Items
HighlightText Text of selected items
InactiveBorder, InactiveCaption, InactiveCaptionText Colours for borders, titlebar and titlebar text of an inactive window.
InfoBackground "tooltip" background
InfoText "tooltip" text colour.
Menu , MenuText Background and text colour in menus.
Scrollbar Scroll bar gray area.
ThreeDDarkShadow , ThreeDFace , ThreeDHighlight , ThreeDLightShadow Dark shadow, surface colour, highlight, and light shadow colours on 3D objects.
Window Window background.
WindowFrame window frame colour.
WindowText Colour of text in windows

Site Map

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