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

# Overriding Styles with CSS

> Apply custom CSS for precise, specific style adjustments.

<Warning>
  This is an advanced technique. Though we try to keep the class names and markup stable, they can change between SDK versions. Always review your overrides after updating the SDK.
</Warning>

Custom CSS is the final layer of the styling system. You should always start with **Theming** for broad changes, and then use CSS for small, specific tweaks that the theme system cannot handle.

Good use cases for custom CSS include:

* Changing the font weight of a specific card's title.
* Adding a unique border to an element.
* Adjusting the margin on a particular button.

### How to Find CSS Classes

The most reliable way to find the correct class name for a C1 element is to use your browser's developer tools.

1. In your browser, right-click the element you want to style.
2. Select "Inspect" from the context menu.
3. The developer tools panel will open, highlighting the element's HTML. The `class` attribute will contain the class names you can use as CSS selectors.

### Applying Your Custom CSS

Let's say we want to make the title of all C1-generated cards uppercase.
You can add your override rules in a CSS file.

```css theme={null}
/* styles/custom.css */

/* Target the C1 card title class to make it uppercase */
.crayon-header {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
```

### Best Practices

* **Be Specific, But Not Too Specific:** Avoid overly complex selectors like `div > span > p.c1-title`.
  These are very likely to break with SDK updates. Prefer targeting a single, stable-looking class like `.c1-card-title`.