3 Things (Almost) No One Knows About CSS

Originally published at: http://www.sitepoint.com/3-things-almost-one-knows-css/

Think you know CSS? If the results of a free CSS test I’ve offered online for the past six months are anything to go on, plenty of practicing developers don’t know CSS as well as they think. Out of over 3,000 people who have taken the test so far, the average score was just 55%.

But hey, an average isn’t that interesting by itself. I was more curious about which questions people were getting wrong. For this article, I’ve run the numbers, and zeroed in on three questions where people scored especially badly. I’ll talk you through each question, show you the answer that most people chose, and explain the correct answer.

It’s safe to say that if you take the test yourself after reading this, you’ll have an unfair advantage!

Question 1: How Best to Set line-height

This first question should have been easy for anyone who deals with text styles on a regular basis:

You want text on your website to be double-spaced by default. Which of the following line-height values is the best way to achieve this?

  • 200%
  • 2em
  • 2
  • double

With four answers to choose from, you’d expect 25% of people to get the right answer by luck alone, and only 31% got this one right! Take a minute and pick out an answer for yourself, then read on.

First off, double is a red herring. The only keyword value that line-height accepts is normal. I’m happy to say that only 9% of people fell for this one. The remaining three answers were all pretty popular, though.

The answer that most people selected is 2em (39% chose this). Indeed, 2em will certainly give you double-spaced text for the element it’s applied to; but so will 200%, and only 21% liked that answer! Either ems are much more in fashion than percentages, or people don’t really understand them.

Continue reading this article on SitePoint

80% on the test.

I’d like to know what I got wrong though - there doesn’t seem to be a method for seeing? Some of the questions were a bit nitpicky as to asking you to explain reasoning…

Edit-Glad I didn’t get any of your article questions wrong though.

Some of the questions seemed pretty basic though…I had some questions going over a CSS rule. Who doesn’t know that…?

80% on a second try and I don’t know what I’m getting wrong again…Please do look into developing a feature which allows you to review what you get wrong.

Great quiz though.

84% first try. I guess we just have to keep trying until we get 100%. It would spoil the test if we were given the answers, I suppose, but it would really help to learn from the quiz if we knew what we got wrong.

1 Like

84% here also.

Some of the questions were a little ambiguous and I wasn’t quite sure what was being asked (although I did rush through it a bit).

Fun quiz though :smile:

I could really use some ideas for more tricky CSS questions. Post ’em in the comments!

CSS:

div {
	background:red;
}
div div {
	background:blue;
	margin-top:20px;
	height:40px;
}

Html:

<div>
		<div>test</div>
</div>

a) The outer div will show red for 20px and the inner div will be 20px from the top and show as blue

b) The inner and outer divs will both be blue and the inner div will be 20px from the top of the outer div making the outer div 60px tall

c) The inner and outer divs will both be red and 60px tall

d) The outer div will be completely covered by the inner div so only blue will be seen. They will have a combined height of 40px.

I’d like to know what I got wrong though - there doesn’t seem to be a method for seeing?

We offer the CSS Core (practice) test, which you can take as often as you like and offers you detailed results at the end of the test, and the CSS Core test, which awards you a certificate if you get 80% or better and which you can only take once a week. Did you try the “(practice)” test?

Sounds like we need to make this distinction a lot more apparent!

Both tests cover the same material, but the questions in each come at that material from slightly different angles.

Yeah I had to make a second account to take the test again since I did get that certificate.

I did not see any option to see my results though. I assume that’s not offered if you get the 80% or better? Because you can go do the test yourself and see . Perhaps I missed it both times but I don’t see it.

You can still resit the test even though you’ve gotten the certificate. You can only sit the “non-practice” test once a week, though. That’s why you’d have had to create a second account.

Again, it sounds like you took the “CSS Core” test and not the “CSS Core (practice)” test. Here’s a screenshot showing the link to see detailed results at the end of the practice test.

Yes I understand. I wasn’t sure if the practice one was based on the real one or what the deal was so I figured I had 2-3 email addresses in use - I’d just use a 2nd one.

Yeah I did just take the core test - what a shame though.

BTW - huge fan of your work. Great to see you on these forums.

1 Like

Yeah, I get fooled by some of my own trick questions when I try to take the test quickly. :wink:

And thanks for the tricky question! :slight_smile:

:blush: Thanks! Fun to have written something for SitePoint again after all these years!

5 Likes

I can see why you got that new laughing headshot for the article. Curse you, Yank.

Didn’t do so well, Ricky? :smile:

Harrumph. After 88% on the HTML test, I managed only 51% on my first pass on CSS. I’ll be back.

64% on Javascript, and 80% on HTML…I’ll take it :smile:

Did have a go at the CSS practice test and got 88%. It’s fun to do these quizzes actually.

I’m not reading either the article or the answers in this topic… I didn’t know about this test and I haven’t done it so I want to give it a try first :smiley:

1 Like

68%?? What the? Answered every question. I took the test on my iPhone 5 before reading this article. Not mobile-friendly at all. I got the first two questions above, but the third one wasn’t on my test. 68% … Whatevs. I’ll take it again!

Yep, that’s one of the shortcuts we took to build the first version of Sit the Test more quickly. We’re actively working on making the entire app responsive, but right now it’s definitely a pain to use on a phone. Sorry about that!

The test actually contains 50 questions, and you get a random sampling of 25 every time you take it. So be prepared for a few different questions the next time you try it. :smile:

If you haven’t already, give the “CSS Core (practice)” test a try. When you get your score, it offers to show you Detailed results, which tell you exactly which questions you got wrong (and what the right answer for each was). You can also resit this test as frequently as you like, so you can practice until you’ve mastered the material in the practice test, then take the “CSS Core” test (which covers the same material but with different questions).

Right on man. Other than that, the site looks and works great. Great job!

I passed the HTML (barely) and got a 72 on the JavaScript; that was with a few distractions, so I ended up having to hurry. I was pretty surprised by my results. I guess I don’t know as much as I thought I did. :smile:

The best way to learn, is to learn from your own mistakes.

It would really be great, if you could give all your incorrectly answered questions that kind of “why this is the right answer” at the end of the test. I find your article really good and I feel those kinds of explanations (a.k.a. teachings) would make the test actually quite valuable to the person being tested too. :smiley:

Scott

1 Like