Professional Streamlit Styling with CSS and st_yled

Jonathan Alles — Wed, 28 Jan 2026 13:48:40 +0000

Streamlit is an effective tool for building data apps, dashboards, and prototypes in Python. While basic theme properties like primary colors and fonts can be set, customizing specific components often requires additional techniques.

This post covers two approaches for styling Streamlit apps:

Targeting components with CSS using the key attribute
A Python-centric alternative using the st_yled package

Styling with CSS and Component Keys

For components that accept a key attribute, Streamlit assigns a corresponding CSS class (.st-key-<your-key>). This can be used to apply custom CSS to individual elements.

Example 1: Container with Background and Padding

st.html("""
    <style>
    .st-key-my-container {
        background-color: #F6F6F6;
        padding: 16px;
    }
    </style>
""")

with st.container(key="my-container"):
    st.write("This container has a custom background and border.")

In this case the CSS class .st-key-my-container is automatically generated by Streamlit based on the component key. The container’s background and padding are adjusted via CSS.

Example 2: Button with a Custom Border

st.html("""
    <style>
    .st-key-my-button button {
        border: 3px solid #000000;
    }
    </style>
""")

st.button("Click Me", key="my-button", type="primary")

This snippet inserts a <style> block that targets .st-key-my-button button, allowing customization of the button’s border. The downside is evident: Each component requires different elements to be targeted with the right CSS selectors.

These techniques make it possible to customize the appearance of specific components without modifying global theme settings.

Using the `st_yled` Package

An alternative approach is to use the st_yledpackage, which allows style properties to be specified directly as arguments in Python.

The st_yled philosophy is simple:

Write styles in Python right next to your components, no CSS

The approach is to import st_yled, call .init() once, then use prefixed components to apply style properties, whenever necessary — while using standard Streamlit components and functions.

Instead of styling via CSS, you just pass style properties as arguments to components prefixed with sty. or st_yled. .

Example 1: Container with Style Properties

import st_yled as sty

sty.init()

with sty.container(width='content', padding=16, background_color='#F6F6F6'):
    st.write("Hello from Container!")

Here, style properties such as background_colorand paddingare passed directly to the container component in Python, without requiring explicit CSS.

Example 2: Button with Custom Styling

sty.button(
    "Click Me",
    type="primary",
    border_color='#000000',
    border_style='solid',
    border_width=3
)

This example shows how a button can be styled with border properties through the st_yledAPI. The results are identical to the custom CSS styling in the examples above.

Trying new Styles Using st_yled Studio

st_yled Studio is a companion web application built in Streamlit that allows users to interactively explore possible style customizations for common components.

Users can select a component, adjust style parameters, and then export either:

Python code to insert into your Streamlit app
A CSS file to consistently apply styling to all components (this file is automatically loaded by st_yled)

This tool can aid in developing consistent visual designs, branding or testing styles before integrating them into code.

Post you ideas for new styling options and components below!

DEV Community: Jonathan Alles

Professional Streamlit Styling with CSS and st_yled

Styling with CSS and Component Keys

Example 1: Container with Background and Padding

Example 2: Button with a Custom Border

Using the `st_yled` Package

Example 1: Container with Style Properties

Example 2: Button with Custom Styling

Trying new Styles Using st_yled Studio

Links

DEV Community: Jonathan Alles

Professional Streamlit Styling with CSS and st_yled

Styling with CSS and Component Keys

Example 1: Container with Background and Padding

Example 2: Button with a Custom Border

Using the st_yled Package

Example 1: Container with Style Properties

Example 2: Button with Custom Styling

Trying new Styles Using st_yled Studio

Links

Using the `st_yled` Package