Problem using CSS to format heading

catmom

I have a datatable which uses a Steamroller theme, with filtering, vertical scrolling, and sorting enabled. I am having problems using CSS to control the formatting of the header, namely the font color and weight. I have tried the following (1) Using various combinations such as "tableid thead", "tableid thead th" and "tableid thead tr" as the selector for the header's css; (2) using an id in the tag as as the css selector, also doing the same for the within . (3) assigning a class to the same elements as (2) to use as a CSS selector (4) Inserting the statement '$.fn.dataTableExt.oJUIClasses["sWrapper"] = "HeaderCssClassName" ' in my js before 'obtable=$(#tableid").dataTable (the syntax and/or usage may well be totally wrong here). Using IE8 Developer Tools, it appears that the color and font-weight are being overridden by the custom CSS. I suspect setting "sWrapper" to the class name might be the way to go, but I don't have a clear idea of where to place it. I would rather not have to insert the style directly in my html. Can anybody help?

jcready

Try using an ID to start the selector and if all else fails, add !important to the ends of the properties you need to override.

[code]#dataTable thead th {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: 300 !important;
}[/code]

Inline style attributes override CSS selectors unless the property has !important at the end.