2 Styling Elements Explained

Key Concepts

• CSS Integration: How to integrate CSS into Streamlit apps.
• Themes: Customizing the appearance of your Streamlit app using themes.
• Inline Styling: Applying styles directly to individual elements.
• Custom Fonts and Colors: Using custom fonts and colors to enhance the visual appeal.

CSS Integration

CSS (Cascading Style Sheets) can be integrated into Streamlit apps to control the layout and appearance of elements. This can be done by creating a CSS file and linking it to your Streamlit app using the st.markdown function.

Example:

<link rel="stylesheet" href="styles.css">
    

Themes

Streamlit allows you to customize the appearance of your app using themes. Themes control the overall look and feel, including colors, fonts, and spacing. You can define a theme in a configuration file or directly in your Streamlit script.

Example:

[theme]
primaryColor="#ff4b4b"
backgroundColor="#ffffff"
secondaryBackgroundColor="#f0f2f6"
textColor="#31333f"
font="sans serif"
    

Inline Styling

Inline styling involves applying styles directly to individual elements using the style attribute. This method is useful for quick adjustments and can be combined with other styling methods.

Example:

<div style="color: blue; font-size: 20px;">This is a styled text.</div>
    

Custom Fonts and Colors

Custom fonts and colors can significantly enhance the visual appeal of your Streamlit app. You can use web fonts from services like Google Fonts and apply custom colors using CSS variables or inline styles.

Example:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
    font-family: 'Roboto', sans-serif;
    color: #333;
}
</style>
    

Analogies

Think of CSS integration as the blueprint for your house, where each room (element) is designed according to the blueprint. Themes are like the overall architectural style, while inline styling is like adding decorative elements to individual rooms. Custom fonts and colors are like choosing the right paint and furniture to make the house look unique and appealing.

By mastering these styling elements, you can create visually appealing and user-friendly Streamlit applications that stand out.