Dynamic Styling in Visualforce Page

This post is about how dynamically you can display the colour of the field on Visual force page.

Here is the example below which will showcase all the opportunities in red which are of amount < 100000 and rest would be in Green.

You can find the live demo here.

<apex:page StandardController="Opportunity" recordSetVar="Opties">
  <apex:sectionHeader title="Opportunities"/>
  <apex:pageBlock >  
    <!-- iterate the Opty records -->
    <apex:pageBlockTable value="{!Opties}" var="opty">
      <apex:column value="{!opty.Name}"/>
      <apex:column value="{!opty.Amount}"/>
      
      <!-- If the opty amount is less than 100000, display in red, otherwise display in green -->
      <apex:column style="color: {!IF(AND(NOT(ISNULL(opty.Amount)), opty.Amount>=100000), "lawngreen", "red")}" value="{!opty.Amount}"/>
    </apex:pageBlockTable>
  </apex:pageBlock>
</apex:page>