Formatting GridView control with CSS
Using style elements to format the GridView is easy but can result in lower performance. Instead, we can use Cascading Style Sheets to format the GridView control. The following example demonstrates how we can format GridView control using Cascading Style Sheets.<%@ Page Language="C#" %> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .headerStyle { background-color: #FF6600; color: #FFFFFF; font-size: 8pt; font-weight: bold; } .itemStyle { background-color: #FFFFEE; color: #000000; font-size: 8pt; } .alternateItemStyle { background-color: #FFFFFF; color: #000000; font-size: 8pt; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:gridview id="ItemsGridView" datasourceid="myDataSource" AutoGenerateColumns="false" DataKeyNames="ItemID" runat="server"> <Columns> <asp:BoundField DataField="ItemID" HeaderText="Item ID" ReadOnly="true" ItemStyle-Width="100px" ItemStyle-CssClass="itemStyle"/> <asp:BoundField DataField="ItemName" HeaderText="Item Name" ReadOnly="true" ItemStyle-Width="100px"/><asp:BoundField DataField="ClStk" HeaderText="Item closingStock" ReadOnly="true" ItemStyle-Width="100px"/> </Columns> <AlternatingRowStyle CssClass="alternateItemStyle" /> <HeaderStyle CssClass="headerStyle" /> </asp:gridview> <asp:SqlDataSource ID="MyDataSource" ConnectionString="<%$Connectionstrings:ERPConnectionString%>" SelectCommand="SELECT ItemID,ItemName,ItemType,ClStk FROM ItemTable" runat="server"/> </div> </form> </body>
In the above example, the header has been modified using the class .headerStyle. The alternate rows of the GridView control have been modified using the class .alternateItemStyle and the background color has been modified using the class .itemStyle.

GridView Articles
- GridView AutoGenerateColumns property
- Bind GridView control with SqlDataSource control
- DataBinding in a GridView control
- Binding a GridView programmatically with dataset
- Binding a GridView programmatically with Generic List Collection
- Using fields with the GridView control
- Adding Boundfields to a GridView control
- Adding button fields to a GridView control
- Create Templatefields in a GridView control
- Access a value using SelectedIndexChanged() event when a row in a GridView is selected
- How to restrict an item from being selected using GridView SelectedIndexChanging Event
- How to add a new row in the GridView control by using the GridView footer template
- Gridview datakeynames
- How to select a particular row in a GridView control using SelectedDataKey method
- GridView rowDataBound event
Become an Expert
Learn More
Q1. What is Azure Platform?
GridView CommandField example
GridView and DetailsView Master/Detail page using SqlDataSource control
POCO overview and advantages - POCO class, Entity Framework in Enterprise Applications
Query entity data model using linq to entities
Difference between arraylist and list collection
How to create a Web service using Visual Studio.net
FormView DataBound Event
Calling base class constructor in C#
Convert a sequence to a generic list using ToList()method
ERP Software Development
Project ideas for students
Accounting Software
Creating an ASP.Net MVC 3 application
Using assemblies in .net applications
How to implement form validation using ASP.Net 2.0 Validation Controls
Constructors in Visual Basic.Net
GridView CommandField example
GridView and DetailsView Master/Detail page using SqlDataSource control
POCO overview and advantages - POCO class, Entity Framework in Enterprise Applications
Query entity data model using linq to entities
Difference between arraylist and list collection
How to create a Web service using Visual Studio.net
FormView DataBound Event
Calling base class constructor in C#
Convert a sequence to a generic list using ToList()method
ERP Software Development
Project ideas for students
Accounting Software
Creating an ASP.Net MVC 3 application
Using assemblies in .net applications
How to implement form validation using ASP.Net 2.0 Validation Controls
Constructors in Visual Basic.Net