Define global site style for asp:GridView with plain CSS (without using VS Skins)

Question

I am working on a fairly large aspx web project with extensive use of asp:GridViews

I\'d like to use CSS to define in one place how all gridviews will look, by defau

Answer 1

Define a stylesheet and set these styles up somewhere:

/**
 * GRIDVIEW STYLES
 **/
.gridview {
        font-family:"arial";
        background-color:#FFFFFF;
        width: 100%;
        font-size: small;
}
.gridview th {
        background: #7AC142;
        padding: 5px;
        font-size:small;

}
.gridview th a{
        color: #003300;
        text-decoration: none;
}
.gridview th a:hover{
        color: #003300;
        text-decoration: underline;
}
.gridview td  {
        background: #D9EDC9;
        color: #333333;
        font: small "arial";
        padding: 4px;
}
.gridview tr.even td {
        background: #FFFFFF;
}
.gridview td a{
        color: #003300;
        font: bold small "arial";
        padding: 2px;
        text-decoration: none;
}
.gridview td a:hover {
        color: red;
        font-weight: bold;
        text-decoration:underline;     
} 

Your gridview then needs to be setup to take advantage of these using CssClass and AlternatingRowStyle-CssClass:

<asp:GridView   ID="GridView1"
                runat="server"
                CssClass="gridview"
                AlternatingRowStyle-CssClass="even">

Answer 2

The Gridview will render as an HTML table. You can assign it a class and style it like you would any other table. I don't know much about VS Skins but I've styled plenty of gridviews this way.

Answer 3

You might want to use the css friendly adapters, which will get you a bit cleaner html from the gridview. Just look at the html output, and style normally with css. If there you find needing something defined on the gridview, you can use the global skin to assign a css class so you can style that as well.