CQWP ItemStyle: how to display background of description with conditional formatting

Question

I have 3 elements in a field and I would like the CQWP to display red as a bg colour of the field or amber or green.

I guess the starting point is

<xsl:if test="RAG = 'Red'">background-color: #FFFF00;</xsl:if>

or something similar, please correct,

but I am not sure where to place it.

Consider I am using the standard one

        <div class="description">
            <xsl:value-of select="@Description" />
        </div>

Answer 1

If you do not wish to add style sheet as explain by @JJD then just update your item style sheet as below :

<div class="description">   
<xsl:attribute name="style">
    <xsl:choose>
        <xsl:when test="(@RAG = 'red')">background-color: red;</xsl:when>
        <xsl:when test="(@RAG = 'amber')">background-color: amber;</xsl:when>
        <xsl:when test="(@RAG = 'green')">background-color: green;</xsl:when>
    </xsl:choose>
</xsl:attribute>
<xsl:value-of select="@Description" /> 
</div>

Answer 2

Are you using an xsl file? In that case it would be something like

<div>   
<xsl:attribute name="class">
    <xsl:choose>
        <xsl:when test="(@RAG = 'red')">Descriptionred</xsl:when>
        <xsl:when test="(@RAG = 'amber')">Descriptionamber</xsl:when>
        <xsl:when test="(@RAG = 'green')">Descriptiongreen</xsl:when>
    </xsl:choose>
</xsl:attribute>
<xsl:value-of select="@Description" /> 
</div>

assuming 'red', 'green' and 'amber' are values from a 'RAG' column

basic styling

    <style>
    .Descriptionred{background:red;}
    .Descriptionamber {background:orange;}
    .Descriptiongreen{background:green;}    
    </style>

Descriptionred ,Descriptionamber and Descriptiongreen are classes which gets applied to div which renders description. Stylesheet for these columns needs to added on the page where you will add content query webpart.