How to Customize CSS in Streamlit: A Step-by-Step Guide

Streamlit is a fantastic tool for building Python-based web applications quickly, but one common limitation users face is the lack of built-in styling options. You may want to change the appearance of buttons, input boxes, or headers to match your brand or personal preferences. The good news? You can apply custom CSS to style your Streamlit apps and overcome these limitations.

This guide will walk you through how to incorporate CSS into your Streamlit applications based on the methods explained in a detailed tutorial.

Step 1: Updating Streamlit

Before we dive into styling, make sure you are using the latest version of Streamlit, as it introduced several features that make styling easier.

Run the following command to update Streamlit:

pip install streamlit --upgrade

Step 2: Setting Up Your Project

In your project directory, create a folder called assets (or any name you prefer), and inside it, create a file named style.css. This file will contain all your custom CSS styles.

Here’s a simple project structure:

my_streamlit_app/
│
├── app.py
├── assets/
│   └── style.css

Step 3: Adding CSS to Your Streamlit App

To load your CSS file into the Streamlit app, we need a function that reads the content of the file and applies it using Streamlit’s HTML element. Here’s how to do it:

import streamlit as st

# Function to load custom CSS
def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

# Load the CSS file
local_css("assets/style.css")

# Streamlit app content
st.title("Custom Styled Streamlit App")
st.subheader("This app has custom styles applied using CSS!")

This function reads the contents of the CSS file and injects it as an HTML <style> element in your app. This allows you to control the styling of various Streamlit components.

Step 4: Styling Buttons

Now that we’ve linked our CSS file, let’s dive into the fun part — customizing elements like buttons. In Streamlit, each element is assigned a class name based on the key you give it. For example, if you create a button and assign it the key "green_button", Streamlit will automatically assign the class .stkey_green_button to that button.

st.button("Click Me", key="green_button")

In your style.css file, you can now target this button with CSS

.stkey_green_button {
    background-color: #28a745;
    color: white;
    border-radius: 10px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.stkey_green_button:hover {
    background-color: #218838;
}

This CSS changes the button’s background color to green and adds rounded corners. We also added a hover effect that darkens the button when the user moves the mouse over it.

Step 5: Styling Input Boxes

Let’s say you want to style a text input box. You can give the input box a key, just like we did with the button, and target it in your CSS file.

st.text_input("Enter something:", key="styled_input")

In your style.css, target the input field:

.stkey_styled_input {
    border: 2px solid #28a745;
    padding: 5px;
    border-radius: 5px;
}

.stkey_styled_input:focus {
    border: none;
}

This adds a green border around the input box, and when the user clicks inside the box (focus state), the border disappears.

Step 6: Advanced Customizations (Animations, Fonts)

You can get even more creative by adding animations and custom fonts to your app. For example, to add a pulsing animation to a button, you could modify the CSS like this:

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.stkey_green_button {
    background-color: #28a745;
    color: white;
    border-radius: 10px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    animation: pulse 2s infinite;
}

This animation causes the button to gently grow and shrink, drawing the user’s attention.

Step 7: Inspecting Elements for Deeper Customization

If you want to target more complex elements, you can inspect the Streamlit app using your browser’s developer tools. Right-click on any element in the app and select “Inspect” to see its HTML structure. For instance, the text inside buttons might be wrapped in a <p> tag, so you would need to target that:

.stkey_green_button p {
    font-size: 20px;
    font-family: 'Arial', sans-serif;
}

This adjusts the font size and family of the text inside the button.

Conclusion

Customizing the look and feel of your Streamlit app is now much more flexible with the ability to inject custom CSS. You can style buttons, input fields, headers, and any other elements to match your application’s branding or design preferences.

By taking advantage of this capability, you can give your Streamlit app a polished, professional appearance that users will appreciate. Experiment with animations, fonts, and hover effects to create an engaging and interactive user experience.

Follow me on Linkedin https://www.linkedin.com/in/kevin-meneses-897a28127/ and Medium https://medium.com/@kevinmenesesgonzalez/subscribe Subscribe to the Data Pulse Newsletter https://www.linkedin.com/newsletters/datapulse-python-finance-7208914833608478720

Join my Patreon Community https://patreon.com/user?u=29567141&utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink