CSS Specificity

I had a quick chat with a friend who was trying to override some CSS styles so he can change the look and feel of the Telerik menu for DNN and I thought to post some useful information that many others could benefit from.
It's about CSS specificity and I will not go in the details of this concept because it's well covered in several good articles, some of them are listed at the bottom of this post. I just want to point out that it is a concept that may not be so important on web sites that use one style sheet but within a framework like DNN where multiple CSS files and CSS overrides are so extensively used, it is really something that we need to be aware of.
Just to give a quick overview of the concept, every CSS selector has a weight which is called specificity. The more specific is a selector the more weight it has.
See this example:

span.text{color:red;}
 
 .text{color:green;}

In the above we have two selectors that look similar but the first one is more specific (has more weight) because it targets only SPAN elements. The second targets any element with class="text" so it will not be applied on SPAN elements with class="text" because it can't override the first one.
If we want to override the first selector, we have to create another one with more weight like below:

div span.text{color:green;}

Keep in mind that specificity is more important than the order of the selectors in our sheets. So a selector with more weight will override another with less even if the second one came last in the browser.
Hope I gave you a very basic idea. Below you can find some good articles for further reading about the topic.