CSS Precedence

Until you really work with it and get your hands dirty, it can be a little tough to understand what CSS selection will override others. I learned the hard way that where you link your CSS on your HTML page matters by linking to Bootstrap AFTER my own CSS stylesheet. I could not figure out why my code was not overriding Bootstrap. It had worked before! Turns out that the last CSS style sheet you link is the most dominate one and that’s because it Cascades. That’s right, the cascades portion of Cascading Style Sheet actually means something.

If you link two style sheets, the first style sheet will be iterated first, meaning it will be higher in the cascade, meaning that it is less important. The second style sheet has all of the momentum of the cascade will override any conflicting elements that it shares with the first. Think of the cascade as the formation of a river. Higher up it’s just a stream, it doesn’t have a lot of force, you can’t put a boat in it, but by the time you get down the mountain that little stream has the power of the Mississippi able to wipe away and obfuscate anything that has been brought down from the original stream.

The river flows something like this:

Separate stylesheet 1 –> separate stylesheet 2 -> any embedded HTML style –> inline style described in HTML –> the ocean of your beautiful webpage.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s