There are multiple ways of including CSS styles in a HTML document:

  • a linked style-sheet in the head section of the HTML document
  • a style block in the head section of the HTML document
  • using the @import directive in a CSS document
  • with the style property of a HTML tag

While working on a project I created a style-sheet with all definitions used in the document (classes or tags) and I implemented that file in all pages of the website. However a small number of documents required a particular way to display the body of the page, and since that was implemented in the master style-sheet, I researched ways of overriding existing code, so that I do not have to maintain two different style-sheets.

I found that there are a few rules that enable core overriding, which are translated into the following order (top of list takes over the ones bellow):

  • the style attribute overrides
  • a style block, which overrides
  • a linked stylesheet, which overrides
  • an imported sheet.