ASP .NET 4.0 - Aplicando estilos com CSS em um GridView

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 e clique em OK;

Após isso faça o seguinte:

Com isso incluímos o banco de dados Northwind.mdf em nosso WebSite. 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:

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 estofamento. Em seguida, aplicamos o estilo na tag 'td' adicionando em algum estofamento e 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 incrementar o exemplo...

Pegue o projeto completo aqui: GridView_CSS.zip

João 10:16 Tenho ainda outras ovelhas que não são deste aprisco; a essas também me importa conduzir, e elas ouvirão a minha voz; e haverá um rebanho e um pastor.

João 10:17 Por isto o Pai me ama, porque dou a minha vida para a retomar.

Referências:

José Carlos Macoratti