The Scenario

Use only this markup:

The Challenge

Style the div to:

• be 100px square
• have the text in the exact middle, both vertically and horizontally
• have a background that fades from red at the top to yellow at the bottom, or be solid yellow in browsers where this is not possible

Considering this area of CSS3 is still being finalized, your solution should be mindful of future developments and forthcoming standardization.

In should look like this in Chrome 13, Safari 5.1, Opera 11, Firefox 6 and IE10:

And this in IE9, Chrome 9, Firefox 4 and below:

You can use a browser to test your work.

You can not change the markup.

You can not write any script.

How to Play

Post your CSS as a comment. Comments will be held in the moderation queue until the answer is posted. Full answer and explanation will be appended to this post around 72 - 96 hours after the question is posted. Update: answer now posted.

If you don't want your answer public, please post a comment like 'playing at home' so I can at least guage how many people are participating and whether the questions are useful.

Follow @cssquiz to know when the answer is up and to catch the next question.

(The title is a reference to Adele's Rolling In the Deep.)

This question required the use of CSS3 gradients. The curently released versions of Chrome, Safari, Opera and Firefox all support them via vendor prefixes. Internet Explorer is playing catchup in IE10.

Here's the CSS I used:

I achieved vertical positioning of the text using a line height that matched the element height. Most of the responses used display: table-cell. The latter approach is definitely more reliable, and would work with multiple lines of text (line heights wouldn't). The downside though, and the reason I stuck with line heights instead, is that display: table-cell isn't supported in IE7 or below.

As you can see, there are numerous gradient syntaxes currently working in the wild. To reliably target each different implementation we use vendor prefixes. Ordering is important, such that the W3C proposed syntax comes last. This way, an implementation that is considered standards-compliant will always use the standard-based rule.

Particularly for gradients, it's currently easiest to use a tool to generate them. I used the IE team's tool.

A number of the responses used IE's proprietary filters feature to supply the gradient to IE6 through 9:

I opted to use a fallback color instead for these browsers as IE filters generally have annoying flow on consequences such as changed font rendering. If you absolutely had to get the gradient into these browsers, I'd generally still prefer to try and use an image myself.

The Scenario

Start with this markup:

The Challenge

Write the CSS required to display the blockquote as a pullout, with the article test wrapping around it. The blockquote should be a fixed width.

When the browser is resized, if it becomes small enough that the quote would take up more than 1/3rd of the total width, stop floating the quote and have it take the full width instead.

You can use a browser to test your work.

You can not change the markup.

You can not write any script.

The dotted border is just to outline the screenshot - you don't need that in your own CSS.

It should look like this when wide:

And this when skinny:

How to Play

Post your CSS as a comment. Comments will be held in the moderation queue until the answer is posted. Full answer and explanation will be appended to this post around 72 - 96 hours after the question is posted. Update: answer now posted.

If you don't want your answer public, please post a comment like 'playing at home' so I can at least guage how many people are participating and whether the questions are useful.

Follow @cssquiz to know when the answer is up and to catch the next question.

This question required the use of CSS3 media queries. These are supported by all of the modern browsers, and JS ployfills are available to make them work in older browsers.

Here's the CSS I used:

A few things to note:

• I wrote the default styles for a wide screen, then override them to remove the float effect on skinnier screens. Some of the submitted answers did the reverse. My general rule is to write the default styles for your largest audience, then override for smaller audiences. I had assumed a mainly desktop audience when writing my answer, hence why I coded for wide screens first. This way, if they are in an older browser that doesn't support media queries, they still get a nice design.
• I used em units for the widths so that the design adapts to changing font sizes. Whether to use ems or not is a whole debate in itself, and something that you need to apply consistently throughout your site, so I'm not saying that you should have used them, just that I chose to use them in this example.

As usual, Chris Coyier has a wonderful writeup of this technique: http://css-tricks.com/6731-css-media-queries/

The Scenario

Start with this markup:

The Challenge

Write the CSS required to:

• display the number of each heading in roman-numerals
• display the number of each paragraph
• keep the paragraphs lined up
• make the paragraph number change to red whenever you hover over the paragraph

It should look like this in a modern browser:

You can use a browser to test your work.

You can not change the markup.

The dotted border is just to outline the screenshot - you don't need that in your own CSS.

How to Play

Post your CSS as a comment. Comments will be held in the moderation queue until the answer is posted. Full answer and explanation will be appended to this post around 72 - 96 hours after the question is posted. Update: answer now posted.

If you don't want your answer public, please post a comment like 'playing at home' so I can at least guage how many people are participating and whether the questions are useful.

Follow @cssquiz to know when the answer is up and to catch the next question.

This question covered the somewhat rarely used before psuedoelement, and the mostly unknown counters feature. Well done to everyone who worked it out!

Here's the complete CSS:

As per usual, @chriscoyier has a good article explaining the content psuedoelements.

The Opera Dev site has a good explanation of CSS counters.

The Scenario

Start with this markup:

The Challenge

Write the CSS required to make:

• In modern browsers
  • The first two inputs have a green border
  • The next two inputs to have a yellow border
  • Any further inputs to have a red border
• In older browsers
  • All inputs have default border (no custom styling)

It should look like this in a modern browser like IE9:

And this in an older browser like IE8:

You can use a browser to test your work.

You can not change the markup.

The dotted border is just to outline the screenshot - you don't need that in your own CSS.

How to Play

Post your CSS as a comment. Comments will be held in the moderation queue until the answer is posted. Full answer and explanation will be appended to this post around 72 - 96 hours after the question is posted. Update: answer now posted below.

If you don't want your answer public, please post a comment like 'playing at home' so I can at least guage how many people are participating and whether the questions are useful.

Follow @cssquiz to know when the answer is up and to catch the next question.

This goal of this question was to a) utilize one of the new CSS3 selectors and b) do so using progressive enhancement. Progressive enhancement is mentioned heavily in the world of JavaScript, but not always considered with CSS.

My solution was this:

First, I apply a red border to all* of the inputs, then I change the first four to yellow, then the first two to green. Order of the rules is important as I'm using a layering approach.

You could also use a little bit more code to achieve a more readable result: 

I target specific elements using the nth-child psuedoclass. We could read :nth-child(-n+4) as 'go to the fourth child element, then step back one at a time'.

When describing the layering approach in that previous paragaraph, I put an asterisk next to where I said "all of the inputs". This is because I used :nth-child(n) as effectively a no-op. That part of the selector will apply to all elements, and could be considered redundant. That's only true for newer browsers that understand it though. Older browsers will ignore the whole rule. I have utilized this behaviour as a form of feature detection - if the browser supports nth-child, apply the green/yellow/red styling; if not, don't style any of the inputs. As we adopt more and more CSS3 through our designs, I'd highly encourage you to use this approach where possible.

The Scenario

Start with this semantic markup:

The Challenge

Write the CSS required to make it look like this:

You can use a browser to test your work.

You can not change the markup.

The menu should always use the full width of the page, with the links sticking to the right.

The dotted border is just to outline the screenshot - you don't need that in your own CSS.

How to Play

Post your CSS as a comment. Comments will be held in the moderation queue until 72 hours after this was posted. Full answer and explanation will be appended to this post at the same time (about lunch time Monday, UTC+10). Update: Answer now posted.

If you don't want your answer public, please post a comment like 'playing at home' so I can at least guage how many people are participating and whether the questions are useful.

Follow @cssquiz to kno when the answer is up and to catch the next question.

There are a few ways to solve this problem.

Option 1 is to make the entries display inline, then just align the whole element to the right. This approach is simple and works everywhere. The downside is that you're left with each of the menu items as inline elements. More often than not I find that menu items work better as block elements, however within the scope of this question inline was fine.

Option 2 is a slight variation to use display: inline-block;. This keeps the menu items themselves as block elements, but lets them layout as inline elements. I forget about inline-block most of the time as browser support for it has been historically patchy. These days it's fine though.

Option 3 is full blown block level elements, positioned using floats. This was my original answer, but I'm happy to concede that option 2 is probably better these days.

The key here is to float each of the items left, then the whole list back to the right. If you just float the items right, you'll get them out in the wrong order.

Finally, an explicit width and overflow are applied to the nav element so that it expands to wrap all of its contained floats.

(The title was a reference to the Modest Mouse song Float On.)

Something a bit more practical this week... No trick questions.

The Scenario

Start with this markup and CSS:

The Challenge

Update the CSS to position the navigation such that it is always in the top right corner of the header. Do not change the markup. Yes, you can use a browser to validate your work.

It should look like this:

How to Play

Post your updated CSS as a comment. Comments will be held in the moderation queue until 72 hours after this was posted. Full answer and explanation will be appended to this post at the same time (about lunch time Monday, UTC+10). Update: answer now posted.

If you don't want your answer public, please post a comment like 'playing at home' so I can at least guage how many people are participating and whether the questions are useful.

Follow @cssquiz to know when the answer is up and to catch the next question.

The goal of this week’s question was to understand positioning contexts.

The correct answer is:

For the long, detailed explanation of all of this, take a read of Noah Strokes’ CSS Positioning 101 article.

Here are the basic ideas though:

1. Using position: absolute; allows us to break the nav element out of the document flow and take control of exactly how it gets positioned. We then do this using top: 0; and right: 0;.
2. If we applied the previous changes on their own, the nav element would go to the top right corner of the page instead of the header though. This is because the body element is the containing block, and this is what the positioning is based off. We can change this by setting position: relative; on the header element, causing it to become a positioning context. The header element won’t move at all, but the nav element will now be positioned according to the header’s context instead of that provided by the body element.

A similar result can be achieved using floats, however this comes with a few downsides in this scenario. First up, it requires you float both the h1 and the nav elements. You’d then need to expand the header container in some way so that it still wraps the floats rather than collapsing back to nothing. This whole approach then becomes brittle – what happens when somebody adds a h2?

2 points if you used position, 1 point for float.

Next question will be up 4 days from now. Until then, have a go at this week's JavaScript Quiz.

Without running it in a browser, work out:

1. What does the text look like when it is highlighted and why? (1 point for foreground color, 1 for background color, 1 for underline color, 1 point for the reason)
2. Which words are bold and why? (1 point for the words, 1 point for the reason)

Post your answer as a comment. Follow @cssquiz to know when the answer is up and to catch the next question.

Comments will be held in the moderation queue until 72 hours after this was posted. Full answer and explanation will be appended to this post at the same time (about lunch time Monday, UTC+10). Update: answer now posted.

This question was more academic than practical, but the goal was to recognise that cascade rules have their intricacies. It's not as simple as saying that they just copy to child elements.

The correct answer is:

1. The paragraph will be black on a yellow background with a red underline in supporting browsers. The abbreviations will have the default browser styling (usually white on blue) as the ::selection pseudo element does not cascade.
2. No words are highlighted because last:abbr is not a valid selector. Psuedo classes go at the end, and it would have been abbr:last-of-type.

The underline is red, not black, because it draws its color from the rule it is defined in. If we wanted the underline to change to black on selection, we'd have to specify text-decoration: underline; within the p::selection rule too.

Interestingly, the ::selection pseudo element was recently removed from CSS3 however it is supported by all of the current browser versions.

We'll have a more practical question next week.

Without running it in a browser, work out what color the text will be and why.

Post your answer as a comment. Follow @cssquiz to know when the answer is up and to catch the next question.

Comments will be held in the moderation queue until 72 hours after this was posted. Full answer and explanation will be appended to this post at the same time (about lunch time Monday, UTC+10). Update: answer now posted.

Marking criteria for this problem is: 2 points for the correct color, 1 point for decoding the hex, 1 point for naming the reason.

The correct answer is green due to specificity. In this example, the id selector causes the second rule to be the most specific and thus take precedence.

There's a good explanation of specificity over on CSS-Tricks. (Thanks to Filip for the link.)

If you want to score yourself:

• Correct color
  • 2 points if you said green, #0f0 or #00ff00
  • 1 point if you said red, #f00 or #ff0000
  • 0 points if you said blue, #00f or #0000ff
• Decoding the hex
  • 1 point for decoding your previous answer to the word red, green or blue
  • 0.5 points if you said green-ish (you’re mostly correct, but you can tell from the color code that it’s as green as it gets)
• Naming the reason
  • 1 point if you said more specific or specificity
  • 0.5 points if you said weighting

Next question will go up 4 days from now (Friday noon, UTC+10).

Thanks for participating! It has been a great response to get us started.