# Customizing the Style of Header Cells

Customize the default appearance of header cells by specifying styles for them using Spread for ASP.NET. Learn more in documentation.

## Content

You can customize the style of header cells if you want to change the default appearance. Set the default style of the header cells by setting the **DefaultStyle** property in the [RowHeader](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.RowHeader.html) or [ColumnHeader](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.ColumnHeader.html) class. For more information on what can be set, refer to the StyleInfo object and the RowHeader and ColumnHeader objects in the [Assembly Reference](/spreadnet/docs/latest/online-asp/overview/assembly-reference).
You can also change some of the properties of the [SheetSkin](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetSkin.html) class that customize the appearance of header cells and apply the skin the sheet. These properties include [FlatRowHeader](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetSkin.FlatRowHeader.html) and [FlatColumnHeader](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetSkin.FlatColumnHeader.html). For more information creating and applying skins, refer to [Applying a Skin to a Sheet](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-appearSet/spweb-appearSheet/spweb-SheetSkinApply) and [Creating a Skin for Sheets](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-appearSet/spweb-appearSheet/spweb-SheetSkinCreate).
When defining and applying a custom style to header cells, be sure to set the text alignment. The default renderer (without any style applied) centers the text; if you apply a style, and do not set the alignment, the text is left-aligned not centered.
You can also set the grid lines around the header cells with the [Border](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Border.html) property.

## Using the Properties Window

1. At design time, in the **Properties** window, select the FpSpread component.
2. Select the **NamedStyles Collection** drop-down button.
3. Add a style and set the properties.
4. Click **OK**. Select the cells you want to apply the style to and set the **StyleName** property.
5. Use the **SheetView Collection Editor** to set the **DefaultStyleName** for a column header, row header, column footer, or sheet corner.
6. Click **OK** to close the editor.

## Using a Shortcut

1. To change the style for the column header, define a style and then set the [ColumnHeader](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.ColumnHeader.html) [DefaultStyle](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.ColumnHeader.DefaultStyle.html) property.
2. To change the settings for the row header, define a style and then set the [RowHeader](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.RowHeader.html) [DefaultStyle](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.RowHeader.DefaultStyle.html) property.

## Example

This example code defines a style with new colors and applies it to the column header.

```csharp
// Define a new style.
FarPoint.Web.Spread.StyleInfo darkstyle = new FarPoint.Web.Spread.StyleInfo();
darkstyle.BackColor = Color.Teal;
darkstyle.ForeColor = Color.Yellow;
darkstyle.Border = new FarPoint.Web.Spread.Border(Color.Crimson);
// Apply the new style.
FpSpread1.ActiveSheetView.ColumnHeader.DefaultStyle = darkstyle;
```

```vbnet
' Define a new style.
Dim darkstyle As New FarPoint.Web.Spread.StyleInfo()
darkstyle.BackColor = Color.Teal
darkstyle.ForeColor = Color.Yellow
darkstyle.Border = New FarPoint.Web.Spread.Border(Color.Crimson)
' Apply the new style.
FpSpread1.ActiveSheetView.ColumnHeader.DefaultStyle = darkstyle
```

## Using the Spread Designer

1. Select the **Settings** menu.
2. Select the **Named Style** icon under the **Appearance Settings** section.
3. Use the new style icon to create a style name. Use the edit style icon to set properties for the style.
4. Click **OK**. Close the **NamedStyle** dialog.
5. In order to apply the style to a header, select the **Header Editor** icon under **Other Settings**. Use the **Selected Header** option to specify column header, row header, column footer, or sheet corner.
6. Set the **DefaultStyleName**. Click **Apply** and **OK**.
7. For cells, select the **Cells, Columns, and Rows Editor**.
8. Select the cells you want to apply the style to.
9. Set the **StyleName**.
10. Choose **Apply** and **OK** to apply your changes to the component.
11. Click **Apply and Exit** to close the Spread Designer.