How to Add CSS to Streamlit App? Style Your App With CSS

Streamlit is a Python open-source module that is used to create interactive Python web applications. The Streamlit module has made it so simple to create complex web applications by just calling the functions. Moreover, Streamlit also allows you to use your CSS/styling skills to add a CSS file to the Streamlit app and make it more beautiful. Today, we are going to learn how you can add CSS to Streamlit App in a few steps.

How to Add CSS to Streamlit App?

CSS stands for Cascading Style Sheets and it is used to style the web applications. Usually, the CSS is done on HTML web pages. On the other hand, Streamlit allows the users to create different web apps and now we will see how we can add CSS to Streamlit App. For the Streamlit app, we usually create the CSS file in another file (external CSS) and add the file to the application.

The following commands are used to add the CSS file to the Streamlit app.

def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

local_css("style.css")

Here the file_name represents the name along with the location of the CSS file. In my case, the name of the CSS file is style.css and it is located in the same directory. You usually, add this function at the very top of your Streamlit app ( Just below the imported modules).

As you can see, we have added the function just below the modules at the top of our application. Don’t forget to call the function with the location of the CSS file.

How to Find the Class Name in Streamlit for Styling?

Unlike the HTML web pages, we cannot define the class names of each section or divs inside the Streamlit app. For Styling purposes, if you need to find the class of a specific section, you need to inspect the web app, hover the mouse over the desired section and find the class from there. Here are simple steps to find the class name in Streamlit for styling.

1. Open your web app in any browser
2. Right-click on the mouse
3. Click on inspect page
4. Now, hover the mouse over the section, button, or heading you want to style
5. Find the class name of the section in the sidebar
6. Copy it and paste it into the CSS file and start styling.
7. Once the styling is done, save the file
8. Refresh the web browser.
9. You will see the changes

You can find the ID of the section or button in a similar way as we found for class.

Summary

Adding CSS to Streamlit web app makes it more interactive and professional. In the section, we learned how to add CSS to the Streamlit web app using the function and discussed how to find the class name so that we can use it for the styling of the app.

Other Articles On Streamlit

• How to Run Streamlit App?
• How to Display an Image in Streamlit From a Folder?
• Create Streamlit Button and Style Streamlit Buttons in Python