In which order are CSS styles applied?

Question

I have the following HTML.

  

    asdas
  

In my CSS stylesheet I have gener

Answer 1

Styles are applied according to which styles are most specific to the element, and then in textual order for rules that have equal specificity. More here in the spec. Because a:link is more specific than ul li a, that style wins regardless of placement.

So tell me, how must I correct my style to achieve the a tag inside the li to be rendered blue and not red?

Make the blue rule at least as specific as the red rule. In this case, you can do that by adding :link to it:

ul li a:link
{
  color:blue;
}

Answer 2

Here's an article about CSS Selector specificity which looks good: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

The section in How to measure specificity? gives you the answer:

a:link   => one tag (a) + one pseudo-class (:link) = 1 + 10    = 11 points
ul li a: => three tags (ul, li, a)                 = 1 + 1 + 1 =  3 points

So the a:link style wins.

Hint: Order (in the CSS files) only matters when two css selectors have the same specificity.

Answer 3

I'd use color:blue !important;