# Angular Data Grid Styling Cells

The [Angular Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid) enables you to customize cell appearance with custom CSS and cell templates, including conditional highlighting and filling an entire cell with a custom background.

To style specific cells of the Grid, you can [style cells on the fly](https://www.telerik.com/kendo-angular-ui-develop/components/grid/styling-and-appearance/cells#styling-cells-on-the-fly) or [set the background for specific row cells](https://www.telerik.com/kendo-angular-ui-develop/components/grid/styling-and-appearance/cells#highlighting-specific-row-cells).

The custom CSS rules take effect if:

* They are set globally in the project. For example, in the project root `styles.css` file.
* The [`encapsulation`](https://angular.dev/api/core/Component##encapsulation) property is set to `ViewEncapsulation.None` for the specific component where the custom styles are used.

## Styling Cells on the Fly

You can apply specific styling to the cells dynamically.

To compute the styles for a cell on the fly:

1. Define the [`CellTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/celltemplatedirective) for the corresponding column.
2. Apply a custom background color to the whole cell:
   1. Wrap the cell value in a custom HTML element and set custom classes for the element and the Grid column.

      ```html
      <kendo-grid-column field="InStock" title="In Stock" class="no-padding">
          <ng-template kendoGridCellTemplate let-dataItem>
              <span class="whole-cell" [style.backgroundColor]="stockColor(dataItem.InStock)">
                  {{ dataItem.InStock }}
              </span>
          </ng-template>
      </kendo-grid-column>
      ```

   2. To fill the entire Grid cell with a custom background, override the default cell padding of the Grid column through CSS styling. Set the cell height to `1px` and the custom element height to `100%`.

      ```css
      .k-grid .no-padding {
          height: 1px;
          padding: 0;
      }
      .whole-cell {
          display: block;
          height: 100%;
          box-sizing: border-box;
          padding: 11px 10px; /* depends on theme */
      }
      ```

The following example demonstrates how to apply a full-cell background color by using `CellTemplateDirective`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/styling/cell-on-the-fly/source.txt)

## Highlighting Specific Row Cells

To highlight a specific row cell of the Grid, combine the [`rowClass`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#rowclass) and the component [`class`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/columncomponent#class) option of the `ColumnComponent`. As a result, the styles you want to use will apply only when both settings are active.

The following example demonstrates how to apply a background color to specific cells using by the `rowClass` function.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/styling/specific-cells/source.txt)

## Suggested Links

* [Row and Cell Highlighting](https://www.telerik.com/kendo-angular-ui-develop/components/grid/rows/highlighting)
* [Applying Conditional Cell Styles in Angular Data Grid](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base/grid-conditionally-styling-cells)
* [ColumnComponent](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/columncomponent)
* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-angular-ui-develop/components/styling/theme-builder)