# Styles

You can apply styles to individual components within Universal Dashboard by using the `UDStyle` component. This component will need to be added to your dashboard and is part of the core components included with PowerShell Universal.

## Applying a Style

To apply a style to a component or a set of components, you call the `New-UDStyle` cmdlet, specify a CSS style and then include the components you wish to style within the `-Content` script block.

```powershell
New-UDStyle -Style '
    padding: 32px;
    background-color: hotpink;
    font-size: 24px;
    border-radius: 4px;
    &:hover {
      color: white;
    }
    .card {
        background-color: green !important;   
    }' -Content {
        New-UDCard -Title 'Test' -Content {
            "Hello"
        }
    }
```

![UDStyled card](/files/-MJHtOG7wYSboHD_MUfK)

## Overriding Built in Styles

Each Material UI component has a set of built in classes that you can override using `New-UDStyle`. To determine the class names that you need to override, you can view the API documentation for the component you are trying to modify on the Material UI site. For example, here is a listing of the Alert component's CSS [class names](https://material-ui.com/api/alert/#css).

When using a success alert, you will have the `.MuiAlert-standardSuccess` class applied to your component. You can override this default style like this.

```powershell
New-UDStyle -Style '.MuiAlert-standardSuccess { background-color: red !important;  }  ' -Content {
    New-UDAlert -Text "Hello"
}
```

The resulting alert will be red instead of the default green.

![Alert with Red Background](/files/-MT6JMXQkTXKKzSuyWjA)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.powershelluniversal.com/v3/userinterfaces/dashboards/themes/styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.