Why not just apply the style we applied to 'nav a' to 'nav li' as there are no other elements in nav?

Best practice is your friend and a time saver :D. I concur with your statement Benjamin!

You just apply the necessary rules to the elements that can be standardised to all other elements with the same class or html tag, then trickle down specific rules to children elements. Thats how I understand the word Cascading in CSS. That way you create uniformity across your design, and save time when you want to edit an entire set of rules or adding specific rules to a smaller portion of elements.

When you have thousands of CSS blocks, it really helps to prevent unexpected changes across your website/application.

If you try to put all the rules in one parent element, then it means you have to create counter rules to all potential child elements that don't need them.

If you take the example of

<ul>
   <li>
      <a>
      </a>
   </li>
</ul>

Its just a box (a) within a box (li), within another box(ul). Well it makes more sense to add padding from inside-out than outside-in.

I don't know if that makes any senses...

Aurelien Schlumberger

The cascading in CSS would be meant not so much for the styling to the elements or attributes, but the effect of the styling based on the arrangement of the CSS being coded, the CSS that are written later would overwrite any CSS that is written above.

That said, the basics of CSS that is covered here is a great start, but in all practicality, I would be using CSS frameworks such as Foundation and scripting languages like Sass for the 'real-world'.

HTH!

You're right. Just tested, applying the styling to <a> instead of just <li> would affect the clickable area, as <a> is the actual link. Nice.

Amit Panhale - if styling is at <li> it would look it, but not be clickable.

Thanks Aurelien and Benjamin for your inputs. Will try it out as you suggest.