3 Things (Almost) No One Knows About CSS

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

I always engage in things like this with some trepidation, partly because of trust issues. I can’t help asking myself if the author really knows all the ins and outs of this (even though it be Kevin Yank himself!)

It depends on context whether you need the div selector in div.class, but at the same time, the semi-colon at the end of the final declaration is optional. Hmmm. So what to choose? And then, does the author know that the quotes around multi-word font names are optional?

Anyhow, great fun. I was a bit slow, though, and panicked a bit at the end as time ran out (I hate time limits!). Got 80% on CSS the first time around, but pretty sure I know what I got wrong. :slight_smile:

i prefer 2em

Did you get a chance to read the article

[quote]The correct answer, though, is 2.

This is a lesson that was drilled into me a long time ago, when I was first learning CSS. Always specify line-height as a unitless number; that way, descendent elements that specify a different font-size will inherit that number rather than a fixed line height.

Let’s say the page has a default font-size of 12pt, but it also contains a heading with a font-size of 24pt. If you set the line-height of the body to 2em (or 200%), then you’ll get a line height of exactly 24pt (twice the body’s font-size) everwhere in the document—even in that heading. The heading will therefore be single-spaced, not double-spaced!

Setting line-height to 2 instead tells the browser to preserve the font-size/line-height ratio even when the font size changes. The line height for the body will be 24pt, but for the heading’s 24pt font, the line height will automaticlly increase to 48pt.[/quote]