Nettuts+ Quiz #1: Beginner CSS
basix

Nettuts+ Quiz #1: Beginner CSS

on May 6th 2011 with 441 comments
This entry is part 1 of 12 in the The Official Nettuts+ Quizzes Session
Next »

In the first of many Nettuts+ quizzes, you’ll be able to test your knowledge by solving some nefarious questions. But don’t worry, we’re starting today by asking you some extremely beginner level CSS questions. Get crackin’ after the jump!

CSS is used to…

The C in CSS stands for?

The correct way to link to a stylesheet in the head is?

Which of these is not a valid CSS selector?

What’s the effective width of the container?
#container {width: 100px; padding: 10px; margin: 20px;}

How do you define a comment in CSS?

Which of the following is used to display links without an underline?

How do you center an element horizontally?

The # symbol specifies that the selector is…

span { font-size: 12px; padding: 2px; color: #fff; display: inline;}

In the rule above, which of the declarations is irrelevant?

#id {margin: 20px 30px 10px 50px}

The margin-right value will be?

Which property is used to change the size of text?

p div.selected matches?

What is the order of precedence when you’re embedding CSS using different methods?

The * selector selects…

#1
Please select an option

Siddharth is Siddharth on Codecanyon
Tags: basixquiz
 
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
← Older Comments
Newer Comments →
  • Social

    no way to share score on facebook or twitter? what is this 2002?

    • http://www.manocreative.com Manuel

      Hehehehehe.. true, true. I too was looking for such a feature to share on twitter.

    • http://jurasarts.com/ Yuriy Romdadin

      This is more for self testing, not for other to see. I think you’re bit sick on social thing

    • http://twitter.com/pankas87 Leonardo

      I agree, social onanism is always rewarding.

    • http://www.about.me/leoui Leoui

      at least, it’s better than nintendo 16bit.. LOL

  • http://malachowski.co.uk Mariusz Malachowski

    Definitely 100% for me. Waiting for the next portion of the test.

    Cheers.

  • http://www.inphoenity.com Jérémie Anderlin

    Albus, is that you? You scored 100%.

  • Ecx

    86.67 %… was my punctuation. god I’m disappointed

  • Manish

    Hi,

    Question No. 5, the effective width of the container should be 160px, however the answer is 120px.

    since Total width = left margin + left border + left padding + width +
    right padding + right border + right margin

    Please correct me if I am wrong.

    Thanks & regards,

    Manish

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

      Nope, effective width is the sum of the declared width and the paddings. Margins shouldn’t come into play here.

      • w1sh

        Depends on your way of looking at it. If I consider the “effective” width to be the width taken up in my layout, then I’d include margins.

        I got this one and see your reasoning, but maybe next time ask something like, “If padding is 10px, margins are 20px, the width is 100px, and the background is red, how much of the container would be filled with red?” or something.

        I dunno. It’s cool. It was an interesting test.

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

        I should have added “according to the box model”. But I guess most people assumed as much. :)

      • liz

        That was the only one that tripped me up.

    • http://pinoywebcentral.com/wetwetwafu/blog/ ikko

      You must be using IE, that’s the double margin bug..

    • http://bwangila.com Brian Wangila

      Margins are outside of the container. So the effective width is the width + paddings

      • White

        It depends how do you define the word “effective width”. I agree with w1sh’s idea, asking the question with bg-color would avoid confusions.
        Anyway I just guest the right answer but imho, the question was a bit confusing for me. Maybe it’s just me.

        Thanks for the nice quiz though!

    • http://deviantstudio.ca Richard

      You’re padding is already inside the base of the container, so regardless of what the measurement is, it will not increase the width of the container.

    • http://www.putneymartialarts.co.uk Dan

      Basically if you make the container blue on a white background the blue container (box) will be 120px with 20px of white margin each side.

      Hope that helps :-)

    • Abhijeet

      Manish you are referring to the famous IE margin bug. However as per the CSS standard that must not be considered. Object margins are not the integral part of the object

  • Sara

    Cool, just got my 100% score. This is pretty easy, though. Not a lot on the box model particulars and all that floating/positioning madness, though.

  • http://www.barrymcgee.co.uk Barry McGee

    Despite this being only a beginners quiz, my ego would still like to tweet my 100% score!

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

      Haha. No worries, the next version will include social functionality.

  • http://www.pantso.gr Pantso

    Albus, is that you? You scored 100% !!!!

    This was easy and fun ! Thanks

    • http://www.amazonservices.com/ Hemant

      Albus, is that Me? I scored 100% !!!!
      ba hu hu Hureeeeeee!!!!!!!!

  • http://binaryhop.com Bill

    Thanks for the great quiz Siddharth. :)

  • http://Blair.Rorani.com Blair

    Does this work on iPad?

  • t

    I’d like to see the question when hovering over the Correct / Wrong button. Not very useful just to display Question #8 wrong, because no one can remember what Q8 was…

    Nice little quiz though…

  • http://www.rarescosma.com Rares

    Cheers for the test!

    Definitely a self-confidence boost at 100% ;-)

  • kankuro

    i’ve got 86.67% interesting quiz…. thanks a lot siddhart… it seems that i need to read more…

  • André

    Ok, i´ve got 100% too, but question #14 has not a right answear, the inline is the 1st precedent, ok, but about embedded and linked the precedence is wich comes last, remembering the !important makes this line to be the precedence…

  • http://www.lucasdelrio.com.ar Lucas del Río

    Outstanding, noble sir! You scored 93.33%

    I missed only #14 but I don’t remember which question was.

    I been working with CSS for less than a year I think. Hope to be in good track =/

  • EmpreJorge

    93.33% for me :D

    • Jack

      Same here question 14 got me.

    • http://www.downloadwebsitetemplates.co.uk Kevin

      93.33%, I think I will go and shoot myself ;-)

    • Ducks on a Railing

      93.33% here too… #14 got me… must have misread the question… LOL Great fun though!

      • http://www.adooylabs.com auds

        you’re right… #14 is tricky, by default inline css have the highest precedence and what is render last, that of course without the override statement “!important” . In shortly, in will be from the lowest to highest precedence.

  • Christopher Sanders

    100% YAY!

  • http://bwangila.com Brian Wangila

    Albus, is that you? You scored 100% !!!!

    Way to massage my ego…the social functionality would be nice.
    I think this is a good initiative, good refresher courses. It’s amazing what you can forget even though you are a professional.

  • IJas

    Albus, is that you? You scored 100% :D

  • http://www.amazonservices.com/ Hemant

    Got 100%,waiting for next post, it’s good if i can show my result to someone
    Thanks,
    Hemant

  • http://liverpoolfootballblog.com dissapointed

    Acceptable. For a muggle. You scored 60%

  • tag

    Good one :)
    But love to have a way to go back to the questions..from the results page.

    Can you show the complete questions with the answers in the results page rather than just the keys. difficult to recall the question :(

  • http://dbnusoftware.com Nikolay U

    p div.selected – you can’t have DIV’s inside paragraphs.

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

      Semantically, no. Practically, yes.

  • http://www.kodington.com pyerro

    Albus, is that you? You scored 100% :)

    Nice basic test, I’m looking forward for next one.

  • srikanth thyagarajan

    Its a good way to test our knowledge in CSS

  • Alex

    #10 was a little tricky – you could think that the padding is irrelevant because of the display: inline, at least that tricked me as a non-native speaker.

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

      Nope, paddings are mighty relevant here. Left and right padding apply to inline elements. Top and bottom, not so much. Margins are, of course, irrelevant.

  • http://twitter.com/farrcrysis farrcrysis

    Great fun! Keep them coming!

  • http://www.it-kitchen.be Kris

    Outstanding, noble sir! You scored 93.33%

    Funny I did it again, because I couldn’t recall what question 14 was about. Then I forgot to keep track of the questions numbers. Good thing all questions are there … $(‘.questionContainer’)

  • Mentalray

    Well I don’t know about the quiz but I would love a tutorial of how to create a quiz like that
    :)

  • w1sh

    Siddharth, what’s the deal with the precedence question? Can you explain that a little for me. I had no idea.

    • http://www.dribbble.com/shtev21 Shtev

      @w1sh

      My understanding of it is this:

      A cascading stylesheet, not only means it cascades through the .css document itself, but cascades through the different methods of referencing the styles.

      If within the html document, all links are styled thusly:
      <a style=”color: red;”></a>

      then all the links will be red, however. If say at the top of the document there is also:

      <style>
      a { color: blue; }
      </style>

      then that style takes precedence over the inline style turning all links blue.

      In addition to this, if an external css file is called containing:
      a { color: green; }

      Then all links will be green.

      At least that is my understanding, so if I am wrong, please correct me.

      • http://damonbauer.me Damon

        @Shtev -

        See my comment below for the correct precedence – you’re incorrect. It’s easy to be confused about this though!

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

        Damon is on the money here.

    • http://damonbauer.me Damon

      @ w1sh -

      Precedence works like this:

      Lets say you have a “p” tag, and in your HTML you define it like this:

      <p id=”intro” style=”font-size:14px”>

      Embedded styles means in the head of the HTML document, so it would be like this:

      <style type=”text/css”>
      p#intro {
      font-size:13px
      }

      Linked styles are obviously the external linked stylesheets, like so:

      p#intro {
      font-size:10px
      }

      So you’ve told p#intro to be 3 different font sizes. Well, because of precedence, the inline style (first example) is what would be applied to the tag.

      For your own sake, it’s best to keep styles external, so 1. You don’t clutter up the HTML code and 2. You won’t confuse yourself because an external style isn’t being applied when you forgot you have an inline or embedded style defined.

      Hope that helps :)

      • http://www.dribbble.com/shtev21 Shtev

        Ah! Thanks @Damon, makes perfect sense. I had it the wrong way around, heh.

        Thinking about it now, I should’ve realised. I’ve used inline styles to highlight div colours countless times while cross browser checking to override any external styles, and STILL got it wrong, lol.

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

      Heya Wish. I typed up a reply before noticing Damon’s reply below. Basically, if you’re specifying some specific rule in each of the three locations — embedded, linked and inline –, the inline style will win out. It’s a matter of which declaration has more weight. This is also how you can override default styling you define in the main CSS file by inlining some quick declarations. Hope this helps!

  • Rafa

    I suck! 66.67% “Keep Practicing!” for me. Thanks for the quiz. Can we have a tutorial on how to make something like that?

  • http://jamiebrewer.com Jamie

    Exceeds expectations! You scored 86.67%

  • http://www.adooylabs.com audsvelasco

    I will be a good feature to have some kind of “time limit” for each question , just to add pressure to the takers and prevent others from googling answers.. LOL :)

  • http://eliperelman.com Eli

    If I had scored anything less than 100% on this, I would have had to find another job…

    • Chris

      Why? What if they are better at javascript. People specialize these days. I know a ton of javascript and php gurus who probably wouldn’t get a 100% on this test.

      • Chris

        Whoops read that too fast.

  • Hassan

    How did you built the quiz? Is there a super duper simple way?

  • http://www.rorybernstein.com Rory Bernstein

    I am Albus! (What does that refer to???)

  • http://mahmoudkamal.net Mahmoud kamal

    yaaay ;) 80%

  • http://thatryan.com Ryan

    93.3%, I was tricked on number1!! Hah, but brings up some questions,

    1) Could not clearfix methods be considered lending structure to a document? A snippet from the clearfix I use,

    .clearfix:before, .clearfix:after { content: “020″; display: block; height: 0; visibility: hidden; }

    Adding content to fix structure yes?

    2) Well this one is obvious :)

    3) I would also maybe consider transitions for this, it is in fact scripting an interaction right? Just not using a ‘script’. :D

    a.button{
    -webkit-transition:all 1s ease-in;
    -moz-transition:all 1s ease-in;
    -o-transition:all 1s ease-in;
    transition:all 1s ease-in;
    }

    For example, sets up an interaction for when the link is interacted with.

    4) Was my answer. :)

    Not complaining lol, just asking. Good fun thanks!

    • Jacob

      Great quiz. I’d love to see more like this.

      Like most of the comments on here I agree that the wording on a couple of questions could be pruned to make it a better representation of the actual technicalities.

      At the risk of coming across too picky, here’s my recommended wording for the questions that stuck out to me:

      1) CSS is traditionally intended to….
      5) How much of #contaner’s background will be visible? #container {width: 100px; padding: 10px; margin: 20px;}
      10) Assuming these are the only styles applied to the tag, which of the declarations is irrelevant?
      13) p span.selected matches?
      (let me interject really quick and say that I think question 13 really is probably fine, but considering this is a test for beginners I wouldn’t recommend giving an example that in my opinion is probably semantically incorrect at worst and controversial at best)
      14) When the browser applies css, what order of prominence would be used (given 1 has highest prominence and 3 has the lowest.) (I would then recommend displaying embedded, inline and linked in a numerical list)

      All in all excellent execution! I look forward to seeing your future quizzes!

  • http://www.rodneykeeling.com Rodney Keeling

    This is awesome. Keep them coming!

  • Anton

    Albus used the force :) thank you very nice for this quiz..

  • http://www.miiquel.com Miquel

    Yeah! 86.67% … is not bad!… next Quiz! 100% ;)

  • http://johanneslang.blogg.se/ Johannes

    Nailed it! 100% (15/15) Really nice test, more of that please :-)

    http://i.imgur.com/bsYIb.jpg

  • http://www.maxiferreira.com.ar Charca

    First time I get 100% on a quiz! Please make the next one this easy :P

  • http://akasuna.com akasuna

    100% scored

  • kankuro

    padding is part of the width… display: inline is used if you deal with lists, you have to do it in-order for the list to not become stair-case when it is viewed by the other old browsers especially IE6…

    • A_Minko

      display: inline is used if you want change block element to inline element. Block element takes up the full width available, with a new line before and after, Inline element takes up only as much width as it needs, and does not force new lines .

  • http://www.prince.com Prince

    “Albus, is that you? You scored”
    hmm

  • http://webipress.com Amaraa

    oh man 73.33% :-p

  • http://www.jqueryrain.com Sanchit

    My 14 questions are correct.Please make the next one more difficult

  • kyriakos

    It was a nice and fun quiz. “Outstanding, noble sir! You scored 93.33%”

    Failed on question 14… :(

    Make it more difficult next time. ;)

  • http://proov.fr Proov

    100% too !! quite easy yes :)

    btw, you used the freebies of Orman Clark of premiumpixels.com ^^

← Older Comments
Newer Comments →