Nettuts+ Quiz #5: CSS Specificity and Cascading

Nettuts+ Quiz #5: CSS Specificity and Cascading

on Sep 2nd 2011 with 77 comments
This entry is part 5 of 12 in the The Official Nettuts+ Quizzes Session
« PreviousNext »

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!

jQuizzy

Siddharth is Siddharth on Codecanyon
Tags: CSSquiz
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hola! I'm the associate editor here, editor of Windows.AppStorm, the lead reviewer at CodeCanyon and a reviewer at ThemeForest. When I'm not working for Envato, I'm a web developer/designer with expertise in JavaScript, PHP and Ruby . I am passionate about web technologies and video games and I really think code *is* art. It's a well known fact that following me has brought people great fortune and a lot of cuddles!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://ran.yefet.net RanY

    I’m a master! :)

  • http://www.keithsmileyphoto.com/ Keith

    Every question was missing a semi colon sooooooo actually I scored 100%

    • Wyatt

      Same here.

  • http://blog.lastrose.com lastrose

    100% and too easy.

    I would have thought it would have tested more principals

    external style sheet, styles in header, inline styles, order, cascade, inherit,

    • http://www.ssiddharth.com Siddharth
      Author

      One concept at a time, Padawan. We have all the time in the world.

  • Albert

    I find your lack of perfection disturbing.

  • JF

    100% but some questions asked for a bit of reflection.

    Thank you great quiz too bad it’s 5 of 5 series

    • http://www.ssiddharth.com Siddharth
      Author

      Haha. No, the statement actually means that this is the latest in the series — it doesn’t mean that this is the final portion.

  • http://thecakeisalie.in harith

    I got 14 correct but I don’t know in hell how I did that. Mostly intuition. I’d like to hear the theory behind this. Anybody?

    • http://anthonymclin.com Anthony McLin

      It’s all about specificity. In CSS, the more specific the selector string, the higher priority it gets.

      IDs > Classes > Nested Elements > Global Elements

      In the case where the selectors are equally specific (#13) the css later in the stylesheet overwrites the the earlier definition.

  • parsifal

    An easy 100%.

    Thanks for the quiz!

  • http://www.simpixelated.com Simpixelated

    #8 got me! Nice little brain teaser to start the morning.

  • http://hurdur.com Hur

    Your score made me reconsider force choking you. You scored 73.33%

  • Ken

    Yay! 100%
    Good brain teaser. Had to admit I guessed on a couple.

  • Adam

    As far as CSS quizzes go, this one is really really really lame.

    • http://www.ssiddharth.com Siddharth
      Author

      Explaining why will help us fine tune future quizzes. :)

      • DugT

        Suggestions for improvement:

        I think to make the quiz “intermediate” it would be more than an A-B test… C wasn’t a choice the entire time and despite adding two classes on the same element to try and ad confusion it really wan’t a difficult choice. I only code about 2-3 times a year and I got it all right… this should have been marked “easy” to be honest. If you wanted to go “Intermediate” I would have added 3-4 styles to make us chose from and afterwards asked how the different child elements were effected.

        I look at it like this:

        Padawan = CSS
        Jedi Knight = Padawan+CSS2.1 (with complex HTML structure)
        Jedi Master = Jedi Knight+CSS3 (with shared style grouping)
        Grand Master = Jed Master+CSS3 (with pseduo-content insertion and HTML5 structure)

      • http://www.ssiddharth.com Siddharth
        Author

        Duly noted but keep in mind that we need to try and cater to a spectrum that caters to all skill levels. And of course, we’ll be ramping difficulty up and down as we go — the quizzes are here to stay.

        Thanks for reading!

    • Nouky

      Thanx for the quizz, got me take a look into Specifity again!!

    • alan

      lame because you failed or lame because you won too easily?

      i got 93% and had to guess a couple. haven’t had to think about specificity too much so far, so this quiz hit the spot for me. the last few were good too, although a little on the easy side.
      i hope the next is harder – grand moff tarkin difficulty?

  • Jose

    Was easy to solve it with the web page you provided and Web Developer Toolbar. Perhaps the quizz can be improved with a chronometer.

    • http://timelodge.com Dale Hurley

      Ummm, Jose of course it is going to be easy if you execute the code!

      Seriously did you think that would make it hard if you were executing the code than all you were doing is selecting the color that match the color you were looking at on screen!?!??!

      Maybe next time try to figure it out in your head without looking at the answer and it might be harder.

    • alan

      H4XX0R!!!

  • Ravindra

    When i share on twitter, Woo! I scored 100.00 on the Nettuts JavaScript quiz. Give it a shot! is coming, Please change to current quiz name.

    • http://www.ssiddharth.com Siddharth
      Author

      Whoops! Fixed, thanks.

  • http://www.podemski.info Krystian

    “I find your lack of perfection disturbing. You scored 93.33%”

    #13 little mistake :D lesson for the future :D

  • http://stephensauceda.com Stephen

    100%. Boom!

  • Alistair

    Ah 1 wrong, could someone point to the nearest plank. Please don’t point up lol.

  • http://benmartinstudios.com.au Ben

    I found this quiz rather easy. As a web designer, this is day to day stuff, much like basic arithmetic for an accountant. That is not to say that it is not a good quiz to have, but it would be awesome to see a quiz that actually challenges me. Perhaps, down the track you will do one that you would consider advanced?

    • http://www.ssiddharth.com Siddharth
      Author

      Ask and ye shall receive! I’m just trying to keep the initial few of these not too taxing to get a following. People don’t like ultra hard tests so I’m saving them for later.

      Thanks for reading!

  • Rory

    The tweet that you can generate at the end says that this is a JavaScript quiz, should say CSS.

    • http://www.ssiddharth.com Siddharth
      Author

      Whoops! Fixed.

  • http://www.crumness.com Jessie

    Darn, just missed one.

  • http://frendz4ever.in/blog Fahad

    86.67% It was a good lesson for me though I am pulling my hair on how did I gave #5 wrong ahhhh.Question #15 was a lesson for me.:)

  • Carlos

    I’m liking this stuff, love Cascading Style Sheets.

  • harish

    i scored 66.67%. This quiz was a nice one. Need to study CSS Specificity chapters once again… :)

  • Nelson

    Scored 80% but I’m happy with it considering I just woke up :P

  • Pedro

    Got 80%, but didn’t use JSbin or anything but the code, and really fast… I’m a ninja.

  • Turi

    Got 100%.

    Thanks for the quiz.

  • http://smartpapers.tk Mehdi Raza

    Only one incorrect. Question# 8. Aweeeeeeeeee!

  • http://blog.timhillrocks.com Tim

    Have you ever taken a multiple choice test and every answer was “C”, but you think that can’t be right and you must be doing something wrong but then you get your grade back and you get a 100%? That’s how I felt while taking this test.

  • Etrimon

    1st try and right away 100%. Cool :-)

  • Dan

    You are now not the learner, but the master. You scored 100%

    Nice quizze. Thank You very much! :)

  • SeattleMike

    I absolutely love the fact that the quiz link doesn’t work in Internet Explorer 9 — the most widely used browser in the world. True sign of an expert. Good luck indeed, ladies and gentlemen!

    • http://www.ssiddharth.com Siddharth
      Author

      Hey Mike — yes, we’re aware of the issues and working on a fix. FWIW it’s unrelated to the quiz code.

      A little more tact next time will work wonders. :)

      • SeattleMike

        Okay. It still doesn’t work. Next time I’d suggest browser testing before posting an article on line. Thanks!

      • http://www.ssiddharth.com Siddharth
        Author

        Haha. I know, rookie mistake. But the main jQuizzy engine works perfectly back upto IE6 and I really didn’t think the Tuts+ JS would interfere. Either way, thanks for pointing this out. The devs are working on a fix. :)

  • http://www.ar-web.net khalid

    i didn’t notice html code and i proceed in exam :D
    26% hhhhhh :)

  • http://davidshariff.com David Shariff

    A little bit easy this time Siddharth. You should of tried throwing in some questions with Pseudo-elements and pseudo-classes to throw a few people off :)

    #main *:not(.bar) p

    • http://www.ssiddharth.com Siddharth
      Author

      Indeed, those are planned for future quizzes. There really are a lot of these coming so I need to pace myself. :)

  • http://anasnakawa.wordpress.com Anas Nakawa

    Master..100%

  • http://www.slickdevelopment.com Slick Development

    Did better than I expected to! Hardly had the patience to finish it ..

  • notachance

    The questions SUCK. YOu cannot give a p and .container without showing the HTML.

    in order for a quiz to be a quiz, you MUST povide non-confusing questions.

    I vote for taking this stupid quizz’s author out!

    • http://www.ssiddharth.com Siddharth
      Author

      Actually reading the text above the quiz will show you, in clear text, the HTML for the quiz.

      You, sir, make my head hurt.

    • Johansrk

      Come on read the whole thing.. How do you think so many got 100%. Because the quiz is not impossible, and because the HTML is there ;)

  • http://www.lucamusolino.it Se7en

    100%…Fantastic ;-)

  • http://www.snaptin.com Ian Yates

    Great Quiz Sid! I find coming up with quiz topics on Webdesigntuts+ pretty challenging… You’ve been very creative with the Nettuts+ quizzes so far, looking forward to seeing what you come up with next!

    • http://www.ssiddharth.com Siddharth
      Author

      Haha. Thanks, Ian. I came up with a big list right when I started creating this system so I don’t get caught without topics down the line.

  • http://www.tech-soigne.com Abhinov

    Thanks for the quiz…..easy one….100%

  • http://ariona.net Rian Ariona

    Another CSS Quiz!! yay i got 100 !! :)
    Nice Quiz Sidd !

  • Athishay

    i got 73.3%,

    nice quiz m8

  • http://www.kunalvijan.com Kunal Vijan

    I scored 93.3% only 1 incorrect out of 15. Lack of perfection disturbing.

  • GNi33

    gnah, was wrong on 13.
    Was not sure about relevance of class order anymore, got reminded about that :)

  • Ganesh P. Kondalkar

    Hi All,

    I scored 93.33% :(

    Not Good though!

  • Johansrk

    Got 100%.

    Thanks for the quizzzz.. More of those would be nice. You should have had !Important rules versus inline style… This confuses many. Important wins

  • http://ihsanrama.isgreat.org Ihsan Rama

    great quiz, I just only three years in CSS world buat I can finish it 100%.
    I’ll bit more confuse but it’s right afterall

  • woomborn

    “You are now not the learner, but the master. You scored 100%”
    Oh, yeah!

  • http://www.2021.com.au David

    Thanks for the ego boast (100%).

  • http://www.youtube.com/user/izvarzone AntoxaGray

    Yay 100%

  • http://mahdipedram.com Mahdi

    100% :) niceee

  • http://www.qanser.com Anıl Bilir

    100% Very Good :)

Newer Comments →