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

# Advanced Styles

The **Advanced Styles** of the story allow you to set any style for the story by writing `css` code.

Users with basic front-end programming knowledge can use the advanced styles feature to modify the story's style to achieve a professional display effect. For example, the following code can display the story in a **black and red** theme style:

```css theme={null}
.ngm-analytical-card .mat-button-toggle-group {
  border: 2px solid red;
}
.ngm-analytical-card
  .mat-button-toggle-group.mat-button-toggle-group-appearance-standard.mat-primary
  .mat-button-toggle.mat-button-toggle-checked {
  background-color: black;
}
.ngm-analytical-card
  .mat-button-toggle-group.mat-button-toggle-group-appearance-standard.mat-primary
  .mat-button-toggle.mat-button-toggle-checked
  .mat-button-toggle-button {
  font-weight: 600;
}

.ngm-analytical-grid .cdk-cell {
  border-bottom-color: black;
  border-bottom-width: 2px;
}

.ngm-analytical-grid.cdk-focused .cdk-row.selected .cdk-cell.selected-cell {
  background-color: black;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
  box-shadow: inset 1px 1px red;
  color: white;
}
```