How to add CSS to streamlit?

@madisen.leannon 

To add CSS to a Streamlit app, you can use the st.markdown function with the unsafe_allow_html parameter set to True. This will allow you to include HTML and CSS in your Streamlit app.

Here's an example of how to add CSS to a Streamlit app:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import streamlit as st

css = """
    <style>
        /* Your CSS styles go here */
        body {
            background-color: #f2f2f2;
        }
        h1 {
            color: #ff6347;
        }
    </style>
"""

st.markdown(css, unsafe_allow_html=True)

# Your Streamlit app code goes here

In this example, the CSS styles are defined in the css variable as a string. The st.markdown function is then used to display the CSS styles on the app. The unsafe_allow_html parameter is set to True to allow the HTML and CSS to be rendered in the app.

You can modify the CSS styles in the css variable to match your desired design.

@madisen.leannon 

It's important to note that using the unsafe_allow_html=True parameter can be a security risk, as it allows arbitrary HTML and CSS to be injected into your app. Therefore, it's recommended to exercise caution when using this method and only use it with trusted content.