CSS Classes & SubClasses

Just need to add a space:

.area2 .item
{
    ...
}

FYI, when you define a rule like you did above, with two selectors chained together:

.area1.item
{
    color:red;
}

It means:

Apply this style to any element that has both the class area1 and item.

Such as:

<div class=area1 item>

Sadly it doesnt work in IE6, but thats what it means.

Your problem seems to be a missing space between your two classes in the CSS:

.area1.item
{
    color:red;
}

Should be

.area1 .item
{
    color:red;
}