does the order of styles matter?

Question

below is my markup. when i move the mouse over the hyperlinks they get underlined and turn red. but if i swap the order of the last two rules, the hyperlinks still get underline

Answer 1

CSS rules are applied in order if they have the same specificity. In your case, they do, so order matters.

With the order you have in your question, the rules apply text-decoration: none. The second and third rules causes hovering the mouse over the link to modify those two styles in order because the a tag is inside the li tag. First, the color turns black; then, the color turns red and the underline appears.

Reverse the order of the last two rules like so:

    .menu a
    {
        text-decoration: none;
    }
    .menu li a:hover
    {
        color: red;
        text-decoration: underline;
    }
    .menu li:hover a
    {
        color: black;
    }

Now, the text-decoration: none gets applied as before. Then, upon mouse-over, the first rule changes the color to red and adds an underline, followed by the color changing to black.