Nettuts+ Quiz #1: Beginner CSS
basix

Nettuts+ Quiz #1: Beginner CSS

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
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Albus?

    I got:
    “Albus, is that you? You scored 100%”

    Thanks for making me smile! :D

  • Sara

    This doesn’t seem to be working for me… it just keeps jumping back up to the top of the page :(

    • Sam

      I got the same issue on IE but it worked fine on Firefox.

      • Me

        If I had a nickel…

      • AJ

        This comment had me rolling.

    • http://scottslab.com Scott Saunders

      Probably a problem with the CSS

      • Michael

        LOL

  • Reschke

    I am having the same problem as Sara. No matter where I click, they all reference http://net.tutsplus.com/quizzes/nettuts-quiz-1-beginner-css/# and take me to the top of the page.

  • http://majestic-computing.info/subnet Douglas Dlutz

    100%. You’ve taught me well, Jeff.

  • http://omexpo.com Andrei

    So… tame!!

    Bring on the hardcore questions :)

    Who is Albus?

  • Ganesh Kondalkar

    HI,

    Got 100%… :O :)

    Nice! some of the terminology is not even known to me but somehow I made it… ;)

    Thanks for the quiz….

  • Rob

    Got 93.33%

    Thanks to nettuts :D

  • http://www.fazalkhan.co.uk Fazal

    Albus, is that you? You scored 100%. I’m not albus but maybe its a reference to http://harrypotter.wikia.com/wiki/Albus_Dumbledore ?

  • http://www.960Development.com saqib

    Hi,

    About Question 5.

    I think the question statement is confusing. it says

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

    What do you mean by effective ? you should have asked that how much total space it will take horizontally ?

    as the answer could be 160px (including margin) OR 120px(excluding margin) OR 100px(excluding margin and padding).

    Thanks

    • http://www.inspiritblog.com Abhinav Sood

      If you’re familiar with the box model, margin lies outside the box (border) while the padding lies inside and adds to the width. Sum of padding (left and right) and width is the effective width.

  • http://webforma.co.uk Ricky

    Padding is an extension of width – margin isn’t – however border is.

    Check out:
    http://css-tricks.com/the-css-box-model/

  • http://brezen.net roy

    Outstanding, noble sir! You scored 93.33%…YAY!

  • Michael Fouquette

    Yay! 100%

  • http://twitter.com/immysl Immysl

    I too hafta thank you Jeff for taking 100%. :D
    Didn’t know that I underestimate my CSS knowledge too much. :P

  • http://www.rephix.nl Martin

    I don’t understand question 14? Shouldn’t the priorities always be:
    > Linked,embedded, inline?

    93.33% due to this question =(

    Great quiz though!

    • http://scryus.net Scryus

      I believe it means the priorities that the browser will read them. Inline and embedded will override the linked, in the same fashion that putting something lower in the CSS doc will override something written earlier (if that makes sense to you).

    • http://parisvega.com/blog Paris Vega

      Its about which has priority from the browser’s perspective. Inline overrides, embedded. Embedded overrides linked.

  • http://webinationstation.com Bahla Kesh

    Well I didn’t get them all right. And the ones that I got wrong, I want to go back and look at the question. It appears that there is a link on the score card, but it does not bring up a link. Bummer. I was hoping this would help me learn. I am browsing on FF 4.0.1

    But i will try again. Thanks.

  • http://www.nettuts.com Mukarram

    I got ” 86.67% ” but i’m still a noob at css … what to do now, Please help !

  • http://www.nanzad.com Gantulga

    80% :-( .

    Thanks,

  • http://scryus.net Scryus

    100%! Mr. Way has taught me well!

  • cruise

    Too simple, is it really for professionals. no fun.

  • http://www.atthy.com/ Sathish

    Way too easy. Got 100% I was expecting someway to brag about that :(

    Share on twitter link or something??

  • ad

    I got 80% . I need to learn more.

  • http://parisvega.com/blog Paris Vega

    100%! A small victory, but a good way to start the day.

  • http://zacklive.com Zack

    Outstanding, noble sir! You scored 93.33%

    Not Bad

  • http://fedmich.com/works/ Fedmich

    Cool, had fun answerin :)

    just got 86.67% 8/10 still not bad eh :)

    I just wish that there is some way to check what the questions/answers are, after answering.

  • http://fabryz.com Fabryz

    Obviously 100% =)

  • http://www.etaminedesign.com samcome

    Exceeds expectations! You scored 86.67%…
    but my english language isn’t very good :)

  • Antoine

    Achieving 100% on this quiz means that I am at least a genius of basic concepts. Ohh, the confidence.

  • http://zoada.com Severus Snape

    Thanks for the 100% but no, I’m not Albus and this test was quite boring… I’m going back to my potions.

  • http://outsourcingnepal.com Kabindra Bakey

    Missed single question.. just 93.33% what a miss

  • I’m Craig

    “How do you center an element horizontally?”

    The answer “margin:0 auto;” is technically wrong, isn’t it?

    It will fail if the element you are trying to center does not have a defined width.

    What am I missing about that question?

  • primat

    Lame.

    Question #5 – “Effective width” – Effective width for what? Text? Background images? Effective width is relative.

    Question #8′s – Either none of the answers are correct or I should center my span with margin:0 auto

    Weak test questions.

    • danny

      “What’s the effective width of the container?”
      probably the container then ínnit?

  • http://www.iranhex.com reza

    How i can use this plugin in wordpress?!

  • http://www.iranhex.com reza

    I cant display this plugin in my wordpress post!
    please help me for install in wordpress

  • http://farhan-hanif.com Farhan Hanif

    Albus, is that you? You scored 100%

  • http://www.iflashlord.com/en.html Behrouz

    my score Exceeds expectations! You scored 86.67% :(

  • http://www.HwangC.com HwangC

    My score is “Exceeds expectations! You scored 73.33%”
    Thanks for the test!

  • http://www.meloodiuos.ir Faramarz

    Thanks. It was pretty cool

  • http://www.roughgiraffed.com Zach

    I’m going to jump on the nitpicking bandwagon and mention that for:

    span { font-size: 12px; padding: 2px; color: #fff; display: inline;}
    In the rule above, which of the declarations is irrelevant?

    None of the declarations are necessarily irrelevant. If for example, someone had used span {display:block} than display:inline would be necessary to return it to “inline”

    • Danny

      Except that it´s a generic span, so if someone had used span {display:block} then it would be in that same rule.

  • meysam

    Exceeds expectations! You scored 80%

  • http://acedesigns.co.za Anele

    Thank you for making my day….. Scored 80%… Question 5 is tricky…..

    Made me smile. I know CSS pretty well :)

  • http://malepati.in phani

    I think i need to improve more, scored 66.67%

  • agrant

    I got a 73.33% on this test. I took an Html 4 test today and bombed it. Even though the internet is moving on to HTML5 is it still worth it to refresh your knowledge on HTML4? I see how it might come in handy when drafting legacy web pages. However the right would be to update the entire site. Would offering to upgrade a website be considered unethical if it wasn’t in your clients budget?

  • http://www.designindevelopment.com Seth

    Number 1 should be updated now that you can do animations with CSS.

  • http://www.jeffadams.co.uk Jeff Adams

    Neat way of learning CSS – plus everyone is competitive so if they don’t score highly they’ll memorize the answers. I’m a big believer in memorizing things and you’ll learn way easier.

    Great idea. More please!

  • http://www.mlabs.info/ Maribol

    86.67% :o3

  • Pradeep

    Yes Albus, its me.! I scored 100% !! :)

  • Farnerud

    I’ve got 80%… I think I’m learning well!!

  • http://www.example.com Matin

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

  • Jeffrey

    I need practice more my english i dont understand Q 1 and 5 and…i loose thaht Q

  • ariadng

    100%!! It’s all because of dear CSS God Jeff Way :D