DEV Community

Jonathan Alles
Jonathan Alles

Posted on

Professional Streamlit Styling with CSS and st_yled

#css #webdev #python #datascience

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.

A styled Streamlit container

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.")
Enter fullscreen mode Exit fullscreen mode

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.

A styled Streamlit button

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")
Enter fullscreen mode Exit fullscreen mode

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!")
Enter fullscreen mode Exit fullscreen mode

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
)
Enter fullscreen mode Exit fullscreen mode

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.

st_yled Studio Elements Page

Post you ideas for new styling options and components below!

Links

Top comments (0)