How do I create multi colored boxes using CSS3

Question

OS - Windows 7 using DW Cs5.5
I need to create a screen with lots of equally sized colored boxes with text colours that will be visible easily within them.
I have a class set up as follows:
.yellowbox {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: small;
    color: #F00;
     background-color: #FC3;
    text-align: center;
    vertical-align: middle;
    margin: 4px;
    padding: 4px;
    clear: none;
    float: left;
    height: 10em;
    width: 30%;
    position: relative;
    border: thick solid #F00;
This displays a box that is yellow with a red border.
With a set of 9 divs of this class, I get 9 boxes arranged as a 3x3 grid in a 960px wide container.
How do I modify the CSS so that the background color changes with each box, and the text color is always in a color that is readable?

Answer 1

First change the CSS as follows
.box {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: small;
    color: #F00;
    text-align: center;
    vertical-align: middle;
    margin: 4px;
    padding: 4px;
    clear: none;
    float: left;
    height: 10em;
    width: 30%;
    position: relative;
    border: thick solid #F00;
.yellow {
   background-color: #FC3;
.blue {
   background-color: blue;
Then use the following markup
<div class="box yellow">
or
<div class="box blue">