This weeks test is an easy one and will give those new to css a chance to have a go as well.I will alternate each week between easy and hard to try to please both camps. (Although I expect better solutions from the more accomplished so theres nothing to stop you trying the easy ones anyway)

There are two simple tasks this week and can be seen in the attached image.


The first task is to re-create some text that is red on the top half and blue on the bottom half. This will introduce you to the css positioning properties and will allow you to gain experience in placing your layout.

The second task is in much the same vein and is just the alphabet with alternating coloured text of red and blue. In this test you are not allowed to use lots of spans in this type of format:
<p class="blue">a<span class="red">b</span>c<span class="red">d</span>e<span class="red">f</span> etc..... (you get the picture)
That would be too easy lol.

You are allowed to use only one nested element in the paragraph which may or may not be a span depending on your solution but obviously must be valid code.

  • No frames or iframes
  • No javascript or scripting of any kind
  • No inline styles
  • No images
  • No expression,conditional comments, behaviours etc.
  • Use Valid CSS
  • Use Valid xhtml
  • No hacks, no child selectors, no universal selecors, no means of offering separate code to each browser. The same code must work for both browsers.
  • Must work in Firefox and ie6 exactly the same as my example above
There are no prizes other than the self satisfaction of being the first to complete this. If you solve it then post a message here but PM me the solution so that other people can still have a go.

As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time. (The methods used in this example won't make sense if css is turned off but that's not the point of this exercise anyway.)

Have fun.