Nettuts+ Quiz #5: CSS Specificity and Cascading

A lot of developers think that CSS is a complete pushover to master. While it’s true that the ceiling is a little lower compared to others, it can still make you want to tear your hair out!

In this month’s quiz, you’ll be testing out your mastery of how CSS rules are applied.

Quiz Scenario

This will be the HTML code against which the CSS will be tested. Have it opened up in another window if needed.

<div id="main" class="container">
    <p id="foo" class="bar boo">Something clever goes here</p>
</div>

As an alternative, here is the JSBin page.

The answer is the color of the text in the page after the CSS given in the question is applied. Simple as that!

Good luck, ladies and gentlemen! And let us know if there are any specific topics that you’d like covered in the upcoming quizzes.

A Few Notes

This quiz isn’t meant to be hard or confusing but it invariably turned out so. If you have a strong grasp of CSS, this is a cakewalk but if that’s not the case, this will be a difficult test.

This topic today was also chosen in a tentative step towards real world applicability of tested knowledge. Any one who has maintained CSS will attest to the skills that are being tested today.

A Friendly Plug

So how’d you do? If you liked today’s quiz, consider buying jQuizzy, the engine that powers it, on CodeCanyon. You’ll love it, I promise!