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

# Custom CSS

> Learn how to customize your Notocat newsletters with custom CSS. Discover available classes, best practices, and examples to enhance your email designs.

# Custom CSS for your issues

Notocat allows you to modify the visuals of your issues on top of Notion's built-in customization options. One of the options is to add custom CSS to your issues. Read more to learn what are the available classes you can use in the CSS.

<Warning>
  Please note that the CSS needs to be valid and supported by all the email clients. We recommend using [Can I Email](https://www.caniemail.com/) to check the compatibility of your CSS. A small issue in the CSS can invalidate the entire styling of your issue in some email clients.
</Warning>

## Available CSS classes

### Content blocks

| Class                                       | Description                                                                    |
| ------------------------------------------- | ------------------------------------------------------------------------------ |
| `nc_paragraph`                              | Paragraphs, lists, todo lists, callouts, quotes, and text in columns           |
| `nc_heading1`, `nc_heading2`, `nc_heading3` | Heading blocks (also get index classes, e.g. `nc_heading1_1`, `nc_heading2_2`) |
| `nc_code`                                   | Inline code snippets                                                           |
| `nc_divider`                                | Divider line (`<hr>`)                                                          |
| `nc_divider_wrap`                           | Wrapper around the divider                                                     |
| `nc_image`                                  | Images (also get index classes, e.g. `nc_image_1`, `nc_image_2`)               |
| `nc_caption`                                | Image captions                                                                 |

### Global index classes

Images and headings receive **globally unique index classes** in document order. Use them to target specific elements without affecting others.

| Class pattern                                        | Description                                                                      |
| ---------------------------------------------------- | -------------------------------------------------------------------------------- |
| `nc_image_1`, `nc_image_2`, `nc_image_3`, …          | First, second, third image in the issue (cover image counts as first if present) |
| `nc_heading1_1`, `nc_heading2_2`, `nc_heading3_3`, … | First, second, third heading in the issue (any level)                            |

Each element keeps its base class plus the index class, e.g. `nc_image nc_image_1` or `nc_heading2 nc_heading2_2`. Indices are global across the entire HTML, including nested content (lists, columns, etc.).

### Links

| Class     | Description             |
| --------- | ----------------------- |
| `nc_link` | All links in your issue |

### Callouts & quotes

| Class                     | Description                                |
| ------------------------- | ------------------------------------------ |
| `nc_callout_box`          | Callout block container                    |
| `nc_callout_box_bordered` | Callout with border (non-background style) |
| `nc_quote_box`            | Quote block                                |
| `nc_icon_cell`            | Callout icon table cell                    |
| `nc_icon_img`             | Callout icon image                         |
| `nc_icon_emoji`           | Callout emoji icon                         |

### Columns

| Class             | Description                    |
| ----------------- | ------------------------------ |
| `nc_column`       | Column cell                    |
| `nc_column_first` | First column (no left padding) |
| `nc_column_last`  | Last column (no right padding) |
| `nc_column_mid`   | Middle column                  |
| `nc_column_row`   | Row containing columns         |
| `nc_columns`      | Columns table container        |

### Layout & structure

| Class                | Description                                       |
| -------------------- | ------------------------------------------------- |
| `nc_body`            | Body of the email (contains the main table)       |
| `nc_full_wrap`       | Full-width wrapper table                          |
| `nc_main_table`      | Main content table (650px)                        |
| `nc_aside5`          | Outer padding                                     |
| `nc_aside10`         | Inner padding                                     |
| `nc_h20`             | Header spacing                                    |
| `nc_spacing`         | Spacing between blocks                            |
| `nc_children_indent` | Indented nested content (e.g. paragraph children) |
| `nc_empty_block`     | Empty block placeholder                           |
| `nc_line_tight`      | Tight line-height (1.2em) for colored text spans  |

### Unsubscribe

| Class            | Description              |
| ---------------- | ------------------------ |
| `nc_unsubscribe` | Unsubscribe link section |

### Notion color classes

These classes are applied when you use Notion's text or background colors. Use them to override or extend the default styling.

**Text colors** (`nc_text_*`):

| Class             | Description        |
| ----------------- | ------------------ |
| `nc_text_default` | Default text color |
| `nc_text_gray`    | Gray text          |
| `nc_text_brown`   | Brown text         |
| `nc_text_orange`  | Orange text        |
| `nc_text_yellow`  | Yellow text        |
| `nc_text_green`   | Green text         |
| `nc_text_blue`    | Blue text          |
| `nc_text_purple`  | Purple text        |
| `nc_text_pink`    | Pink text          |
| `nc_text_red`     | Red text           |

**Background colors** (`nc_bg_*`):

| Class                     | Description                |
| ------------------------- | -------------------------- |
| `nc_bg_default`           | Default (white) background |
| `nc_bg_gray-background`   | Gray background            |
| `nc_bg_brown-background`  | Brown background           |
| `nc_bg_orange-background` | Orange background          |
| `nc_bg_yellow-background` | Yellow background          |
| `nc_bg_green-background`  | Green background           |
| `nc_bg_blue-background`   | Blue background            |
| `nc_bg_purple-background` | Purple background          |
| `nc_bg_pink-background`   | Pink background            |
| `nc_bg_red-background`    | Red background             |

## Examples

### Modifying the spacing between blocks

```css theme={null}
.nc_spacing {
    height: 10px !important;
    line-height: 10px !important;
}
```

### Changing the links font

```css theme={null}
.nc_link {
    font-size: 16px;
    font-weight: 600;
}
```

### Changing the font size of the paragraphs

```css theme={null}
.nc_paragraph {
    font-size: 20px;
}
```

### Changing the main heading style

```css theme={null}
.nc_heading1 {
  font-size: 30px;
  line-height: 26px;
  padding-top: 1.6em;
  padding-bottom: 3px;
  margin-bottom: 5px;
  font-weight: 600;
  color: #434343;
}
```

### Targeting specific images or headings by index

Use the global index classes to style only certain elements:

```css theme={null}
/* Style only the first image differently */
.nc_image_1 {
  border-radius: 12px;
}

/* Make the first heading larger than the rest */
.nc_heading1_1 {
  font-size: 36px;
}
```