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>

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!

Related Posts
  • Web Design
    HTML & CSS
    Build a Dribbble Portfolio Grid With Flexboxgrid and JribbbleFlexboxgrid dribbble
    Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed. Let's get started!Read More…
  • Web Design
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Android SDK
    Android SDK: QuizAndroid preview@2x
    In the Android from Scratch series, we learned the basic concepts of Android that you need to know about in order to start creating applications for the platform. Along the way, we covered various aspects of Android development, including Java development, using XML, user interface design, project structure, data storage, and the publication process. Find out how much you've managed to retain about what we covered in the series by taking a quiz.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Code
    Integrating Multiple Choice Quizzes in WordPress – Creating the FrontendIntegrating multiple choice quizzes in wordpress
    This is the second part of the series on developing a multiple choice quiz plugin for WordPress. In the first part we created the backend of our plugin to capture the necessary data to store in the database. In this final part, we will be creating the frontend of the plugin where the users can take quizzes and evaluate their knowledge.Read More…