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 default.

As far as I understand, one way of doing this is via "Skins" in Visual Studio....but I recall doing a bit of research a while back and found many people despised skins and always used just plain CSS in asp.net projects (although I can't entirely remember what was so bad about them).

So my questions are: 1) Is it possible to do this global default asp:GridView styling using plain CSS 2) Is there any advantage to using VS Skins at all, or is just plain CSS just as powerful and easily maintained as using skins?

UPDATE: I also meant to mention that there are many styles unique to the GridView, such as SelectedRowStyle-BackColor; does this have any impact on my original question? If someone could post or link to any examples of this it would be extremely helpful.

Answer 1

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 2

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.

Answer 3

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">