Loading...

Keep in mind the order that CSS prioritizes rules.

When it comes to priorities between different CSS calling methods, think of how far the call is from the content. Inline styling, which is placed right inside a tag, takes top priority. Then, an internal style sheet, which is up in the head section right above your content, is the next highest. Finally, external style sheets in separate CSS files are lowest priority. This doesn't mean they're not important, as they carry the bulk of the styling responsibilities. Inline styling and internal style sheets are mostly implemented for one-time features or style variations. But what happens with priorities between multiple CSS files?

While you generally want to avoid rule conflicts between multiple CSS files, remember, this is only a problem when they're being called at the same time. You can, however, create alternate design schemes that you can switch between. You can more or less duplicate a CSS file while only changing the property values to create an entirely new look for your site.

Contents of myfile.css:

body {
background-color:#CCCCFF;
}
h2 {
font-size:24px;
}
p {
font-style:italic;
}

Welcome to my page!

This page demonstrates how an external style sheet is applied.


Contents of myfile2.css:

body {
background-color:#000055;
}
h2 {
font-size:20px;
color:#FFFFFF;
}
p {
font-weight:bold;
color:#AAAAAA;
}

Welcome to my page!

This page demonstrates how an external style sheet is applied.

If you do have multiple CSS files competing over the same rule, however, it will come down to a matter of the order the files were called in. Since HTML parsing runs from top to bottom, the last (or latter) will take priority. If you call two files, any conflicts encountered will follow the second file's rule. Keep in mind though, that only duplicate properties on duplicate selectors will have a conflict. So if you have the same selector in two different files, but they only have one property in common, only that property will be in conflict. Any other properties not in conflict will just be layered and combined onto the selector.

See in the example below that the only property in conflict is the font color, so the most recently called file will take priority. Every other declared property and value not in conflict is applied.

Contents of style1.css:

p {
font-size:12px;
color:#6A4B7F;
}

Contents of style2.css:

p {
color:#0000FF;
font-style:italic;
}

The result:

p {
font-size:12px;
color:#0000FF;
font-style:italic;
}