2 1 Custom CSS Explained
Key Concepts
- Custom CSS: Custom Cascading Style Sheets (CSS) allow you to override or add new styles to your Streamlit application.
- st.markdown: A Streamlit function that allows you to render Markdown content, which can include custom CSS.
- Inline CSS: CSS styles applied directly within the HTML or Markdown content.
- External CSS: CSS styles loaded from an external file.
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.