Reply to comment

CSS File Include Order

Submitted by Ben Hodson on Thu, 09/03/2009 - 09:24

Most of the time, when elements are put in the HTML HEAD tag, order does not matter.  But in the case of CSS, not only do styles cascade from the include file to the local file to the element, but styles also cascade in the order that files are included in the page's HEAD tag.  The following is a quick test that shows how the order that files are included affects the rendering of a CSS styled element.  This CSS code has been tested on Internet Explorer 8, Safari 4, and Firefox 3.5. 

We will use 2 different CSS style sheets.  Here is what each sheet contains:



 

/* redstyle.css */
.big_text
{
  color:Red;
  font-size:22px;
  font-family:Times New Roman;
  font-weight:bold;
}
/* greenstyle.css */
.big_text
{
  color:Green;
  font-size:22px;
  font-family:Verdana;
  font-weight:bold;
}

 

In the BODY of the page itself, we will apply our "big_text" CSS class to a simple DIV element like this:

 

<div class="big_text">This is the text that is being styled</div>

 

Finally, in the HEAD of the page, we will put an include link to each of our CSS files like this:

 

<head runat="server">
    <title></title>
    <link href="css/redstyle.css" rel="stylesheet" type="text/css" />
    <link href="css/greenstyle.css" rel="stylesheet" type="text/css" />
</head>

 

Now run the page in your browser and you will see that the element is styled with the CSS from the last file include listed in your HEAD tag.  If you now switch the order of the includes to put the last one first and the first one last, notice now that your DIV element will change color and style to use the newly "last" file included in your HEAD tag. 

With this technique, you could have a master CSS file and then specific pages could override CSS with their own included files that have the same name as the master CSS classes.  As long as this custom file is included in the order as the last CSS include, it will override all other included CSS styles.

Reply