How would I replicate this GridView style using CSS?

Question

Bit of a basic question, but I'm a bit rusty with CSS, but I've been requested to use CSS rather than the 'gridview style' tags (as I'll show below).

Basically, I use the following style on my GridView:

 <RowStyle BackColor="#ededed" ForeColor="#333" HorizontalAlign="Center" />
 <FooterStyle BackColor="#465F7F" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#465F7F" ForeColor="White" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#465F7F" Font-Bold="false" ForeColor="#ffffff" />
 <HeaderStyle BackColor="#465F7F" Font-Bold="false" ForeColor="White" HorizontalAlign="Center" />
 <EditRowStyle BackColor="#B7B7B7" />
 <AlternatingRowStyle BackColor="#e2e6e8" ForeColor="#333333" />

Could I convert this to CSS? So I can just set my GridView CssClass and it'd apply all these styles. Right now that code is replicated on every grid, so changing it is a chore!

Answer 1

Just use CssClass property of the grid and put everything to that css class and you're done!

For example instead of this:

<RowStyle BackColor="#ededed" ForeColor="#333" HorizontalAlign="Center" />

you would use same markup for all your common style grids:

<RowStyle CssClass="gridViewRow" />

And the css class then would look like this:

.gridViewRow
{
   background-color:#ededed;
   color:#333;
   text-align:center;
}