# Styling and Appearance

## Content

FlexGrid offers several ways to control the visual appearance of the grid — from CSS classes and API style properties to per-cell templates and hover feedback. This overview gives a quick snapshot of each subtopic and when to use it.

## Styling and Appearance

| Topic | Use Case |
| ----- | -------- |
| [Styling](/componentone/docs/blazor/online-blazor/controls/flexgrid/features/styling-and-appearance/styling) | Use to customize the look of grid elements — headers, cells, rows, gridlines, selection, alternating rows, group rows and more. Three approaches are documented: **CSS classes** (`.flexgrid-cell span` for column headers, `.flexgrid-cell` for data cells, applied via the `Class` property); **API members** of type `C1Style` (a full set of properties covering `ColumnHeaderStyle`, `CellStyle`, `SelectionStyle`, `AlternatingRowStyle`, `GridLinesBrush`, `EditorStyle`, and many others); and **`CellTemplate`** (wrap cell content in a `<span>` and apply styles statically or conditionally based on the cell value). You can also set a column's `Background` to a `C1Color` in code. |
| [Mouse Hover](/componentone/docs/blazor/online-blazor/controls/flexgrid/features/styling-and-appearance/mouse-hover) | Use to provide visual feedback as the pointer moves across the grid. Set `MouseOverMode` to choose the highlight scope — `GridMouseOverMode.Cell` (the hovered cell only), `.Row` (the whole row), or `.Column` (the whole column). Set `MouseOverBrush` to a `C1Color` (supports ARGB alpha transparency) to customize the highlight color, for example `C1Color.FromArgb(60, 0, 120, 215)` for a subtle blue. |