Cascading Order

Styles can be specified:

So which style will be used when there is more than one style specified for an HTML element? Generally speaking, all the styles will "cascade" into a new "virtual" style sheet by the following rules, where the highest priority starts at the bottom and works its way up:

  1. Browser default
  2. External astyle sheets (from an external source)
  3. Internal style sheets (in the head section)
  4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or even a browser's default values.

Note: If the link to the external style sheet is placed below the internal style sheet in the HTML <head> element, then the external style sheet will override the internal style sheet!

Gee...Talk about messed up webpages... and I had forgotten about the browser defaults, but at least it doesn't have priority!

Back button Table of Contents Next button