> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Classes

> Nextedy RISKSHEET uses the `styles` object in the sheet configuration to define custom CSS classes that control cell appearance.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## `styles` Property

| Name     | Type     | Default | Description                                                                                                                                                                                                                                                                                |
| -------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `styles` | `object` | `{}`    | Collection of CSS class definitions injected into the page at runtime. Keys are CSS selectors (prefixed with `.`). Values are CSS declaration strings wrapped in `{}` braces. Supports simple class selectors, compound selectors (`.firstRow .headSysReq`), and any valid CSS properties. |

### Syntax

Style keys use CSS selector syntax with a leading dot. The value contains one or more CSS property declarations wrapped in curly braces.

```yaml theme={null}
styles:
  .className: '{property: value; property: value;}'
```

<Warning title="Wrap style values in `{}` braces">
  Style values MUST be wrapped in `{}` braces. Without the curly braces, styles may fail to apply. Correct format: `'.rpn1': '{background-color: #eaf5e9 !important; color: #1d5f20 !important;}'`.
</Warning>

<Warning title="Use `!important`">
  CSS styles in Risksheet typically require `!important` to override the grid's default cell styling. Without `!important`, custom `background-color` and `color` declarations are overridden by the grid's base styles. This is the most common issue when conditional formatting colors do not appear. Always include `!important` on `background-color`, `color`, and other visual properties you need to take effect.
</Warning>

### How Styles Are Applied

Styles flow from configuration to visual display through three pathways:

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/yWl5nA2D0IzEnZC1/risksheet/diagrams/reference/styling/css-classes/diagram-1.svg?fit=max&auto=format&n=yWl5nA2D0IzEnZC1&q=85&s=972f28b9467bba764cdeaa8a8756f13f" alt="diagram" style={{ maxWidth: "700px", width: "100%" }} width="700" height="220" data-path="risksheet/diagrams/reference/styling/css-classes/diagram-1.svg" />
</Frame>

**Path 1: Cell Decorators** -- JavaScript functions in `cellDecorators` evaluate cell values at render time and use `$(info.cell).toggleClass('className', condition)` to dynamically add or remove CSS classes.

**Path 2: Column `cellCss`** -- A static CSS class applied unconditionally to every cell in the column.

**Path 3: Header Group `headerGroupCss`** -- A static CSS class applied to the header group row for columns within that group.

## Built-In Style Patterns

### RPN Risk Level Colors

Standard Risk Priority Number (RPN) risk level color coding used with the `rpn` and `rowHeaderRpnNew` cell decorators. These are the most commonly used styles in FMEA configurations. RPN thresholds are user-configurable per deployment -- the values below are common examples but vary by project.

| CSS Class  | CSS Declaration                                                      | Purpose                                                | Used By                             |
| ---------- | -------------------------------------------------------------------- | ------------------------------------------------------ | ----------------------------------- |
| `.boldCol` | `{font-weight:600;}`                                                 | Bold text for emphasis in calculated columns           | `rpn` cell decorator                |
| `.rpn1`    | `{background-color: #eaf5e9 !important; color: #1d5f20 !important;}` | Low risk: light green background, dark green text      | `rpn`, `rowHeaderRpnNew` decorators |
| `.rpn2`    | `{background-color: #fff3d2 !important; color: #735602 !important;}` | Medium risk: light yellow background, dark yellow text | `rpn`, `rowHeaderRpnNew` decorators |
| `.rpn3`    | `{background-color: #f8eae7 !important; color: #ab1c00 !important;}` | High risk: light red background, dark red text         | `rpn`, `rowHeaderRpnNew` decorators |

```yaml theme={null}
styles:
  .boldCol: '{font-weight:600;}'
  .rpn1: '{background-color: #eaf5e9 !important; color: #1d5f20 !important;}'
  .rpn2: '{background-color: #fff3d2 !important; color: #735602 !important;}'
  .rpn3: '{background-color: #f8eae7 !important; color: #ab1c00 !important;}'
```

### RPN Color Reference Table

| Risk Level | Example RPN Range | Background   | Text Color  | Hex Background | Hex Text  |
| ---------- | ----------------- | ------------ | ----------- | -------------- | --------- |
| Low        | 1 -- 150          | Light green  | Dark green  | `#eaf5e9`      | `#1d5f20` |
| Medium     | 151 -- 250        | Light yellow | Dark yellow | `#fff3d2`      | `#735602` |
| High       | > 250             | Light red    | Dark red    | `#f8eae7`      | `#ab1c00` |

### Header Group Styling

Style the first and last rows of column header groups using compound CSS selectors. The `.firstRow` and `.lastRow` pseudo-classes target the top and bottom rows of multi-level column headers.

| CSS Selector                  | CSS Declaration                                                                    | Purpose                                                                |
| ----------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| `.firstRow .headSysReq`       | `{background-color:rgba(62, 175, 63, 0.12) !important; color:#2A792D !important;}` | First header row for System Requirement column group: light green tint |
| `.lastRow .headSysReq`        | `{background-color:#FFF !important; color:#2A792D !important;}`                    | Last header row for System Requirement column group: white background  |
| `.firstRow .headFinalRanking` | `{background-color:rgba(62, 175, 63, 0.12) !important; color:#2A792D !important;}` | First header row for Final Ranking column group: light green tint      |
| `.lastRow .headFinalRanking`  | `{background-color:#FFF !important; color:#2A792D !important;}`                    | Last header row for Final Ranking column group: white background       |

```yaml theme={null}
styles:
  .firstRow .headSysReq: '{background-color:rgba(62, 175, 63, 0.12) !important; color:#2A792D !important;}'
  .lastRow .headSysReq: '{background-color:#FFF !important; color:#2A792D !important;}'
  .firstRow .headFinalRanking: '{background-color:rgba(62, 175, 63, 0.12) !important; color:#2A792D !important;}'
  .lastRow .headFinalRanking: '{background-color:#FFF !important; color:#2A792D !important;}'
```

## Column-Level CSS Properties

### `cellCss` Property

| Name      | Type     | Default     | Description                                                                                                                                                                                                                |
| --------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `cellCss` | `string` | `undefined` | CSS class name(s) to apply to all cells in the column. Applied unconditionally -- every cell in the column receives this class. Multiple classes can be space-separated. The class must be defined in the `styles` object. |

```yaml theme={null}
columns:
  - id: rpn
    header: RPN
    width: 80
    cellCss: boldCol
styles:
  .boldCol: '{font-weight:600;}'
```

### `headerGroupCss` Property

| Name             | Type     | Default     | Description                                                                                                                                                                                        |
| ---------------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `headerGroupCss` | `string` | `undefined` | CSS class name(s) to apply to the header group row for this column. Used with compound selectors in `styles` (e.g., `.firstRow .headInitialRisk`) to style specific header group rows differently. |

```yaml theme={null}
columns:
  - id: sev
    header: Severity
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
  - id: occ
    header: Occurrence
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
styles:
  .firstRow .headInitialRisk: '{background-color: #e3f2fd !important; color: #1565c0 !important;}'
  .lastRow .headInitialRisk: '{background-color: #fff !important; color: #1565c0 !important;}'
```

## Row Height Control

Risksheet does not have a built-in row height property. Limit row height for columns with long text content using a combination of `cellDecorators`, `styles`, and the `cellRenderer` column property.

```yaml theme={null}
styles:
  .maxHeightCell: '{max-height: 80px; overflow: hidden;}'
cellDecorators:
  limitHeight: "function(info){ $(info.cell).toggleClass('maxHeightCell', true); }"
columns:
  - id: description
    header: Description
    width: 300
    cellRenderer: limitHeight
```

<Tip title="Row Height Workaround">
  Since Risksheet does not expose a native `rowHeight` property, the `max-height` + `overflow: hidden` CSS technique via cell decorators is the recommended approach. Adjust the `max-height` value to match your desired maximum row height in pixels.
</Tip>

## System CSS Classes

Risksheet automatically applies the following CSS classes to grid elements. These are not defined in the sheet configuration -- they are managed by the grid infrastructure.

| CSS Class         | Applied To                  | Condition                      | Description                                                                                                                                                                            |
| ----------------- | --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `readonly`        | Cell (`<td>`)               | Cell fails `isReadOnly` check  | Applied to cells that are non-editable based on item permissions, column `readOnly` property, formula columns, or server-rendered columns. Provides visual indication of locked cells. |
| `rs-readonly`     | Cell (`<td>`)               | Applied by cellDecorator logic | Built-in Risksheet class for grayed-out visual feedback when a cellDecorator dynamically marks a cell read-only (e.g., via `info.item.systemReadOnlyFields`).                          |
| `risk_reviews`    | Review content wrapper      | Review comments rendered       | Wrapper class around review comment HTML. Applied by all three review managers (CommentBased, ApprovalBased, WorkItemBased). Use this selector to customize review appearance.         |
| `multi-enum-list` | Multi-enum cell container   | Column type is `multiEnum:*`   | Container `<span>` wrapping all selected values in a multi-select enum column.                                                                                                         |
| `multi-enum-item` | Individual multi-enum value | Each selected enum value       | Individual `<span>` for each selected value within a multi-enum column. Rendered as chip/tag elements.                                                                                 |
| `multiItemEditor` | Multi-enum editor           | Multi-enum editor active       | Applied to the editor container for multi-enum columns with dependent options.                                                                                                         |

<Info title="Verify in application">
  The system CSS class names listed above are based on source code analysis. Additional system classes may exist in your specific Risksheet version. Inspect the DOM in your browser developer tools to discover all available classes.
</Info>

## Supported CSS Properties

The `styles` object accepts any valid CSS property. Commonly used properties in Risksheet configurations include:

| CSS Property       | Typical Use                            | Example          |
| ------------------ | -------------------------------------- | ---------------- |
| `background-color` | Cell background for risk levels        | `#eaf5e9`        |
| `color`            | Text color for risk levels             | `#1d5f20`        |
| `font-weight`      | Bold text for emphasis                 | `600`            |
| `text-align`       | Center-align numeric columns           | `center`         |
| `max-height`       | Limit row height for text columns      | `80px`           |
| `overflow`         | Hide overflow for height-limited cells | `hidden`         |
| `border`           | Add borders to specific cells          | `1px solid #ccc` |
| `padding`          | Adjust cell padding                    | `4px 8px`        |
| `font-size`        | Adjust text size                       | `11px`           |
| `opacity`          | Dim disabled or secondary content      | `0.6`            |

## Complete Example

Full configuration combining RPN styles, header group colors, row height control, and custom severity styling:

```yaml theme={null}
styles:
  .boldCol: '{font-weight:600;}'
  .rpn1: '{background-color: #eaf5e9 !important; color: #1d5f20 !important;}'
  .rpn2: '{background-color: #fff3d2 !important; color: #735602 !important;}'
  .rpn3: '{background-color: #f8eae7 !important; color: #ab1c00 !important;}'
  .firstRow .headInitialRisk: '{background-color: #e3f2fd !important; color: #1565c0 !important;}'
  .lastRow .headInitialRisk: '{background-color: #fff !important; color: #1565c0 !important;}'
  .firstRow .headRevisedRisk: '{background-color: #e8f5e9 !important; color: #2e7d32 !important;}'
  .lastRow .headRevisedRisk: '{background-color: #fff !important; color: #2e7d32 !important;}'
  .highSev: '{background-color: #ffcdd2 !important; color: #b71c1c !important;}'
  .medSev: '{background-color: #fff9c4 !important; color: #f57f17 !important;}'
  .lowSev: '{background-color: #c8e6c9 !important; color: #1b5e20 !important;}'
  .maxHeightCell: '{max-height: 80px; overflow: hidden;}'
  .centerAlign: '{text-align: center !important;}'
cellDecorators:
  rpn: "function(info){ var val = info.value; $(info.cell).toggleClass('boldCol', true); $(info.cell).toggleClass('rpn1', val>0 && val<=150); $(info.cell).toggleClass('rpn2', val>150 && val<=250); $(info.cell).toggleClass('rpn3', val>250); }"
  rpnNew: "function(info){ var val = info.value; $(info.cell).toggleClass('boldCol', true); $(info.cell).toggleClass('rpn1', val>0 && val<=150); $(info.cell).toggleClass('rpn2', val>150 && val<=250); $(info.cell).toggleClass('rpn3', val>250); }"
  rowHeaderRpnNew: "function(info){ var val = info.item['rpnNew']; $(info.cell).toggleClass('rpn1', val>0 && val<=150); $(info.cell).toggleClass('rpn2', val>0 && val>150 && val<=250); $(info.cell).toggleClass('rpn3', val>0 && val>250); }"
  sevColor: "function(info){ var val = info.value; $(info.cell).toggleClass('highSev', val >= 8); $(info.cell).toggleClass('medSev', val >= 4 && val < 8); $(info.cell).toggleClass('lowSev', val > 0 && val < 4); }"
  limitHeight: "function(info){ $(info.cell).toggleClass('maxHeightCell', true); }"
columns:
  - id: sev
    header: S
    width: 60
    type: rating:severity
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
    cellCss: centerAlign
    bindings: severityRating
  - id: occ
    header: O
    width: 60
    type: rating:occurrence
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
    cellCss: centerAlign
    bindings: occurrenceRating
  - id: det
    header: D
    width: 60
    type: rating:detection
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
    cellCss: centerAlign
    bindings: detectionRating
  - id: rpn
    header: RPN
    width: 80
    formula: commonRpn
    headerGroup: Initial Risk
    headerGroupCss: headInitialRisk
  - id: description
    header: Description
    width: 300
    cellRenderer: limitHeight
    bindings: description
headers:
  rowHeader:
    renderer: rowHeaderRpnNew
  columnHeader:
    height: 32
  columnGroupHeader:
    height: 32
```

## Related Pages

* [Cell Decorators](/risksheet/reference/styling/cell-decorators) -- JavaScript functions that toggle CSS classes based on cell values
* [Conditional Formatting](/risksheet/reference/styling/conditional-formatting) -- combining formulas, decorators, and styles for data-driven visuals
* [Item Colors](/risksheet/reference/styling/item-colors) -- row-level color coding for work item types
* [Custom Renderer Templates](/risksheet/reference/templates/custom-renderers) -- advanced cell rendering with JavaScript functions
* [Sheet Configuration Format](/risksheet/reference/configuration/risksheet-json-format) -- full configuration file reference
* [Column Type Reference](/risksheet/reference/columns/column-types) -- column definition properties including `cellCss` and `headerGroupCss`

<LastReviewed date="2026-06-24" />