Para demonstrar como aplicar estilos a um Gridview, vamos criar um site simples, acessar um banco de dados e preencher um controle gridview com os dados. A seguir, teremos aplicar um estilo ao controle GridView usando um arquivo CSS (Cascading Style Sheet).

Abra o Microsoft Visual Studio Express 2012 For Web e no menu File clique em New WebSite. A seguir, selecione a linguagem Visual Basic, o template ASP .NET Empty Web Site e informe o nome GridView_CSS. Ao final, clique em OK.

Logo após, faça o seguinte:

• Clique com o botão direito sobre o projeto e selecione Add ASP .NET Folder;
• Selecione o item App_Data;
• Clique com o botão direito do mouse sobre a pasta App_Data e clique em Add Existing Item;
• Selecione o banco de dados Cadastro.mdf e clique em Add.

Com isso incluímos o banco de dados Northwind.mdf em nosso site. Na janela Solution Explorer veremos a seguinte estrutura:

Vamos usar a tabela Products do banco de dados Northwind.mdf.

Agora vamos incluir um formulário web no projeto:

• Clique com o botão direito do mouse no projeto;
• Selecione Add New Item e a seguir selecione o template Web Form e aceite o nome Default.aspx e clique em Add.

• Abra o arquivo Default.aspx no modo Design e arraste a partir da ToolBox um controle GridView no web form;
• Expanda o menu GridView Tasks e selecione a opção <new data source…> em Choose Data Source:

• Selecione a opção SQL DataBase e clique em OK:

• Selecione a conexão com o Northwind.mdf e clique em Next>:

• Marque a opção para salvar a conexão e clique em Next>;
• Selecione a tabela Clientes e clique em Next> e a seguir em Finish.
  No menu Project, clique em Add New Item e a seguir selecione o template Style Sheet e aceite o nome StyleSheet.css:

A seguir, defina o código abaixo no arquivo de estilo que iremos usar:

O controle GridView gera uma tabela na qual exibe seus dados. A fim de aplicar um estilo no gridview, devemos aplicar uma classe ao grid para que os efeitos das células da tabela que realmente afetar. Iniciamos com o cabeçalho da tabela e alteramos o tamanho da fonte, peso e cor na tag ‘th’. Adicionamos uma borda simples e alguns estofamentos. Em seguida, aplicamos o estilo na tag ‘td’ adicionando em algum estofamento e em uma borda simples.

Aplicando o estilo

Abra o arquivo Default.aspx no modo Source e, a seguir, selecione e arraste o arquivo de estilo StyleSheet.css no interior da tag head para referenciar o arquivo css:

Agora, defina a propriedade CssClass do controle GridView para gridview:

Pronto!

Executando o projeto iremos ver o estilo aplicado ao GridView conforme abaixo:

O exemplo aplica um estilo bem simples, mas fique a vontade para incrementá-lo!

Pegue o projeto completo aqui: GridView_CSS.zip