# ui.add_css | NiceGUI

[Button: icon:menu]

[](/)

[Installation](/#installation)

[Features](/#features)

[Demos](/#demos)

[Documentation](/documentation)

[Examples](/examples)

[Why?](/#why)

[Button]

[Button]

[](https://github.com/zauberzeug/nicegui/)

[Button: icon:more_vert]

# ui.*add_css*

## Add CSS style definitions to the page

This function can be used to add CSS style definitions to the head of the HTML page.

*Added in version 2.0.0*

:content: CSS content (string or file path)
:shared: whether to add the code to all pages (default: ``False``, *added in version 2.14.0*)

main.py

[Button]

````python
from nicegui import ui

ui.add_css('''
    .red {
        color: red;
    }
''')
ui.label('This is red with CSS.').classes('red')

ui.run()
````

## Add SCSS style definitions to the page (deprecated)

This function can be used to add SCSS style definitions to the head of the HTML page.

*Added in version 2.0.0*

**Note: This function is deprecated and will be removed in NiceGUI 4.0. Use add_css instead.**

:content: SCSS content (string or file path)
:indented: whether the content is indented (SASS) or not (SCSS) (default: `False`)
:shared: whether to add the code to all pages (default: ``False``, *added in version 2.14.0*)

main.py

[Button]

````python
from nicegui import ui

ui.add_scss('''
    .green {
        background-color: lightgreen;
        .blue {
            color: blue;
        }
    }
''')
with ui.element().classes('green'):
    ui.label('This is blue on green with SCSS.').classes('blue')

ui.run()
````

## Add SASS style definitions to the page (deprecated)

This function can be used to add SASS style definitions to the head of the HTML page.

*Added in version 2.0.0*

**Note: This function is deprecated and will be removed in NiceGUI 4.0. Use add_css instead.**

:content: SASS content (string or file path)
:shared: whether to add the code to all pages (default: ``False``, *added in version 2.14.0*)

main.py

[Button]

````python
from nicegui import ui

ui.add_sass('''
    .yellow
        background-color: yellow
        .purple
            color: purple
''')
with ui.element().classes('yellow'):
    ui.label('This is purple on yellow with SASS.').classes('purple')

ui.run()
````

**Nice**GUI

The Python UI framework that shows up in your browser.

[](https://github.com/zauberzeug/nicegui/)

[](https://discord.gg/TEpFeAaF4f)

[](https://www.reddit.com/r/nicegui/)

Resources

[Documentation](/documentation)

[Examples](/examples)

[LLM reference](/llms.txt)

[GitHub](https://github.com/zauberzeug/nicegui/)

[PyPI](https://pypi.org/project/nicegui/)

Community

[Discussions](https://github.com/zauberzeug/nicegui/discussions)

[Discord](https://discord.gg/TEpFeAaF4f)

[Reddit](https://www.reddit.com/r/nicegui/)

[Contributing](https://github.com/zauberzeug/nicegui/blob/main/CONTRIBUTING.md)

[Sponsors](https://github.com/sponsors/zauberzeug)

Legal

[Imprint](/imprint_privacy#imprint)

[Privacy](/imprint_privacy#privacy)

Made with NiceGUI by [Zauberzeug](https://zauberzeug.com)

© 2026 [Zauberzeug GmbH](https://zauberzeug.com)