This week I learned something very important about CSS3.

When you write a CSS code, a rule can ‘rule over another rule’. So the style you give to an attribute (id or  or class) of a tag  will be prioritized over the way you style a tag itself.

What? Yeah… I will explain with an example!

Let’s say you have styled the color of the links on your page using this rule:

a {color: blue};

And you have a navigation bar with links on it (obviously…) And your navigation id is “site-nav“.

Then you decided that the links on the navigation bar should be a different color from the other links on the website.

So you write this CSS rule:

#site-nav a {color: white};

This rule makes the elements with the id “site-nav” WHITE.

And just like that the links on the menu will now will be white instead of blue! Wow!

See… That’s what I meant when I said that “a more detailed tag (#site-nav a) will be prioritized over the way you style a single tag (a)

Now you can style miracles on your page!

Advertisements