add CSS classes on ajax update?

I have a JSF app and I generate <table>s dynamically based on some data.
For each cell I dynamically generate the css class and I write all the classes in the *.jsf File (using ResponseWriter)

A simplified resulting page:

<div id="styles">
  <style type="text/css">
cell1 {
    color: red;
}
cell2 {
    color: blue;
}
cell3 {
    color: black;
}
cell4 {
    color: green;
}
</style>
</div>

<table style="width:100%">
  <tr>
    <td class="cell1">Jill</td>
    <td class="cell2">Smith</td> 
  </tr>
  <tr>
    <td class="cell3">Eve</td>
    <td class="cell4">Jackson</td> 
  </tr>
</table>

The table can be very big and it is possible for cells to share the same style.

The cell styles can change based on some user input in the table. I can update the cell on ajax request overriding UIComponent.visitTree(VisitContext context, VisitCallback callback)
but I have no idea if and how I can add additional css classes.

I think I have found a solution: inside UIComponent.visitTree(VisitContext context, VisitCallback callback) I can rewrite the cell (<td>) and add the <style type=”text/css”> tag as child of the <td> tag adding the new CSS classes to it.