html helper webgrid is not showing the style classes I assigned

Question

I am trying to style the html helper webgrid but it is not showing my style classes when the page renders.

Here is my style code:

.gridTable
{
    margin: 5px;
    padding: 10px;
    border: 1px solid #000000;
    border-collapse: collapse;
    min-width: 550px;
    background-color: #fff;
    color: #fff;
}
.gridHead th{font-weight: bold;background-color: #030D8D;color: #fff;padding: 10px}
.gridHead a:link,.gridHead a:visited,.gridHead a:active,.gridHead a:hover {color: #fff;}
.gridHead a:hover {text-decoration:underline;}
.gridTable tr.gridAltRow
{
    background-color: #FFFF99;
}
.gridTable tr:hover
{
    background-color: #CCFFCC;
}
.gridAltRow td
{
    padding: 10px;
    margin: 5px;
    color: #333;
}
.gridRow td{padding: 10px;color: #333;}
.gridFooter td{padding: 10px; background-color: #c7d1d6;color: #999;font-size: 12pt;text-align: center;}
.gridFooter a{font-weight: bold;color: #333; border: 1px #333 solid;}

Here is my webgrid code:

@grid.GetHtml(tableStyle:"gridTable",
                  headerStyle:"gridHead",
                  alternatingRowStyle:"gridAltRow",
                  rowStyle:"gridRow",
                  displayHeader:true,
                  columns:grid.Columns(
                  grid.Column(header:"", format: @<text>@item.GetSelectLink("Edit")</text>),
                                        grid.Column(columnName: "EntityName", header: "Name"),
                                        grid.Column(columnName: "EntityDBA", header: "DBA"),
                                        grid.Column(columnName: "EntityType", header: "Type")),
                   mode: WebGridPagerModes.All)

Is there some reason I am missing why the style would not be applied?

Answer 1

Two reasons why your styles wouldn't be applied are: if they are not referenced correctly in the layout page or wherever you are bringing styles into your view; or you may need to clear your browser cache to allow updates to the css file to show through.