> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/general/frontend/guides/appearance/how-to-override-the-style-for-a-component.md).

# How to override the style for a component

If you want to change the style of a component in a migrated application, you can write some `css code` in the `styles.css` file that exists in `src\styles.css`.

## Sample 1

If you have the sks project migrated, and you want to modify the background-color for all the window content in the app, you write this code in the `styles.css` file.

```css
kendo-window .k-window-content > div {
    background-color: greenyellow !important;
}
```

Save the change of `styles.css`, and build the frontEnd project with `ng build`.

> You can have the .net project running. To see the change, you just have to compile the client project and reload the browser.

<div align="left"><img src="/files/-MGAD99HG7baBcgmD8Z7" alt=""></div>

The `css` selector search for the `Kendo-Window` elements, this element is the Kendo component that renders the content within a div. Sometimes you will need to use the `!important` statement to force the use of the css you wrote.

> The `!important` statement override all the others rules. except the inline rules.

## Sample 2

If you have the sks project migrated, and you want to modify the border-radius for all the buttons in the app, you write this code in the `styles.css` file.

```css
wm-button  >button {
    border-radius: 30px !important;
}
```

![](/files/-MGADGfFu-eoewiYg2wZ)