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.
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]
Actually, it is good to see you around these lands again! It’s been ages but I know that you kept yourself quite busy.
I finally took the test. I’m afraid I failed (72%) but I did it under 5 min… Is that an excuse? lol
I agree that some of the questions are a bit tricky because you can’t be sure what they’re asking but I guess this is on purpose so you pay more attention.
@kevinyank Will you be writing more articles for SP?
I got 92% on my first try And I have a screenshot to prove it (though that obviously doesn’t prove it’s my first try!). I happen to love writing elegant CSS, and both Chris Coyier and Heydon Pickering are my heroes!
I’ve been designing and developing website for about 2 years now, since I graduated (Marketing), and I recently hired my first employee; a junior web developer. The interviews consisted of about 12 questions, and a mini CSS test. In that test, I had a sketched scenario of 3 boxes horizontally overlapping each other between 2 paragraphs, and asked the interviewees how they’d achieve it. Needless to say, almost none of them got the even close. It required a combination of margin, padding (optional really), negative margin, and z-index. I’d be happy to scan the diagram in and upload it if anyone’s interested.
I disagree with you writing off the ‘background’ option in the second question.
Background controls colors and images for the background. Background thus is something that typically gets overlapped by text, images, divs and so forth. So background can cause HTML elements (itself in this case) to overlap.
The quiz said by itself. You seem to have other properties other than background Paul. Seems that isn’t following the quiz thus invalid. Your example fails without the padding.
Not correctly then. I specifically say “background (by itself)”. This does actually mean no other properties. I guess you can change displays since you aren’t limited in the HTML you can use so I’m fine with that.
I’m aware of the displays default but I’m talking about the padding invalidating your code. It fails the quiz since the padding is needed for your example and my post, and the quiz specifically ask for what property can do the overlap by itself. Aside from default displays for elements and whatnot, background can’t do it.
I was avoiding any specifics to the quiz in case any one was trying it out but I take your point.
I was only playing devils advocate and if you remove the background from my post there appears to be no overlap but adding the background shows an overlap. It’s another misunderstood part of CSS and would have been good as a separate question
In my eyes it’s narrowed down to 2 results instantly (ok technically 3 but that 3rd one has obviously less specificity) which is then left to specificity to determine the winner.
The page will automatically insert <tbody> into the page (if not present already) so no matter what table>tr is IMPOSSIBLE. Invalidating that entire option.