Streamlit
1 Introduction to Streamlit
1.1 What is Streamlit?
1.2 Why use Streamlit?
1.3 Setting up the environment
1.4 Creating your first Streamlit app
2 Basic Components
2.1 Text elements
2.1 1 Displaying text
2.1 2 Formatting text
2.2 Data display elements
2.2 1 Displaying data frames
2.2 2 Displaying tables
2.3 Input widgets
2.3 1 Text input
2.3 2 Number input
2.3 3 Date input
2.3 4 Dropdown selection
2.3 5 Slider
2.3 6 Checkbox
2.3 7 Radio buttons
2.3 8 Buttons
3 Advanced Components
3.1 Interactive widgets
3.1 1 Multiselect
3.1 2 File uploader
3.1 3 Color picker
3.2 Media elements
3.2 1 Displaying images
3.2 2 Displaying videos
3.2 3 Displaying audio
3.3 Chart elements
3.3 1 Line chart
3.3 2 Bar chart
3.3 3 Area chart
3.3 4 Scatter chart
3.3 5 Map chart
4 Layout and Styling
4.1 Layout components
4.1 1 Columns
4.1 2 Tabs
4.1 3 Expander
4.2 Styling elements
4.2 1 Custom CSS
4.2 2 Theming
4.2 3 Adding custom fonts
5 State Management
5.1 Session state
5.1 1 Managing state across reruns
5.1 2 Persisting state
5.2 Caching
5.2 1 Caching functions
5.2 2 Caching data
6 Deployment
6.1 Deploying to Streamlit Sharing
6.1 1 Setting up Streamlit Sharing
6.1 2 Deploying your app
6.2 Deploying to other platforms
6.2 1 Deploying to Heroku
6.2 2 Deploying to AWS
6.2 3 Deploying to Google Cloud
7 Best Practices
7.1 Writing clean and maintainable code
7.2 Optimizing performance
7.3 Handling errors and exceptions
7.4 Version control with Git
8 Advanced Topics
8.1 Integrating with other libraries
8.1 1 Integrating with Pandas
8.1 2 Integrating with Plotly
8.1 3 Integrating with TensorFlow
8.2 Building complex apps
8.2 1 Creating multi-page apps
8.2 2 Handling authentication
8.2 3 Building interactive dashboards
8.3 Custom components
8.3 1 Creating custom widgets
8.3 2 Extending Streamlit with custom components
9 Case Studies
9.1 Building a data exploration app
9.2 Building a machine learning model deployment app
9.3 Building a real-time data visualization app
4 2 1 Custom CSS Explained

2 1 Custom CSS Explained

Key Concepts

Explanation

1. Custom CSS

Custom CSS in Streamlit allows you to customize the appearance of your application beyond the default styles provided by Streamlit. This can include changing colors, fonts, layouts, and more.

2. st.markdown

st.markdown is a Streamlit function that renders Markdown content. You can use this function to include custom CSS by embedding it within a Markdown block.

3. Inline CSS

Inline CSS involves applying styles directly within the HTML or Markdown content. This method is useful for quick and specific style changes.

4. External CSS

External CSS involves loading styles from an external CSS file. This method is useful for more complex and reusable styles.

Examples

Example 1: Inline CSS with st.markdown

import streamlit as st

st.markdown(
    """
    <style>
    .stButton button {
        background-color: #4CAF50;
        color: white;
    }
    </style>
    """,
    unsafe_allow_html=True
)

st.button("Click Me")
    

Example 2: External CSS

import streamlit as st

st.markdown(
    """
    <link rel="stylesheet" href="styles.css">
    """,
    unsafe_allow_html=True
)

st.write("This content is styled using an external CSS file.")
    

Analogies

Think of custom CSS as the paint and brushes you use to decorate a room. Inline CSS is like painting a specific wall, while external CSS is like using a blueprint to paint the entire house. Both methods allow you to achieve a desired look, but they serve different purposes.

By mastering custom CSS in Streamlit, you can create visually appealing and personalized applications that stand out and provide a better user experience.