Captured at (local ISO): 2026-05-18 05:17:03

---

I. Preface

In the last post we used Streamlit to ship apps fast—st.title(), st.dataframe(), st.button(), just a few lines for the core loop. In real projects the stock gray layout often isn’t polished enough.

Brand colors for enterprise demos, emphasis for KPIs—CSS is how you break past defaults: retarget Streamlit’s HTML output, tune layout, even micro-interactions, and move from “works” to “works and looks intentional.”

II. What CSS is

CSS describes presentation—colors, fonts, spacing. In Streamlit, CSS styles the HTML Streamlit emits: buttons, tables, titles map to tags and classes (e.g., buttons → .stButton). Select those nodes, declare rules, and the app updates visually.

Streamlit builds the skeleton; CSS is the skin.

III. Three core ways to use CSS in Streamlit

There is no dedicated “CSS API,” but you can inject styles with st.markdown(..., unsafe_allow_html=True) or st.html(). Examples below.

Method 1: embed CSS with st.markdown() (all versions)

st.markdown can render HTML; with unsafe_allow_html=True, wrap rules in <style>:

import streamlit as st
# 嵌入CSS：用<style>标签包裹，通过类名定位Streamlit组件
st.markdown("""
<style>
/* 1. 自定义标题样式（定位<h1>标签） */
h1 {
    color: #2E86AB; /* 品牌蓝色 */
    text-align: center; /* 居中对齐 */
    font-family: '微软雅黑', sans-serif; /* 字体 */
    margin-bottom: 30px; /* 底部间距 */
}

/* 2. 自定义按钮样式（定位Streamlit按钮类名.stButton） */
.stButton > button {
    background-color: #A23B72; /* 按钮底色：粉色 */
    color: white; /* 文字白色 */
    border: none; /* 取消边框 */
    border-radius: 8px; /* 圆角 */
    padding: 10px 20px; /* 内边距：上下10px，左右20px */
    font-size: 16px; /* 字体大小 */
}

/* 3. 按钮hover效果（鼠标悬浮时） */
.stButton > button:hover {
    background-color: #F18F01; /* 底色变橙色 */
    transform: scale(1.05); /* 轻微放大（1.05倍） */
    transition: all 0.3s ease; /* 过渡动画：0.3秒生效 */
}
</style>
""", unsafe_allow_html=True)

# 测试样式：标题和按钮
st.title("这是CSS美化后的标题")
st.button("点击测试美化按钮")

Result:

Notes:
Wrap CSS in <style> and always pass unsafe_allow_html=True (Streamlit blocks HTML by default—only inject trusted CSS).
Discover class names via Inspect in the browser (right-click → Inspect → class on the node). Illustrated:

Method 2: embed CSS with st.html() (Streamlit 1.10+)

From 1.10 onward, st.html() renders HTML/CSS without unsafe_allow_html. Example—styled dataframe:

import streamlit as st
import pandas as pd
import numpy as np

# 用st.html()嵌入CSS：更简洁，无需额外参数
st.html("""
<style>
/* 1. 自定义表格容器样式（定位.stDataFrame） */
.stDataFrame {
    width: 90% !important; /* 表格宽度90%（!important强制覆盖默认） */
    margin: 20px auto; /* 上下间距20px，左右自动（实现居中） */
}

/* 2. 表格表头样式（定位表头类名） */
[data-testid="stDataFrameHeader"] {
    background-color: #2E86AB !important; /* 表头底色蓝色 */
}
[data-testid="stDataFrameHeader"] th {
    color: white !important; /* 表头文字白色 */
    font-weight: bold !important; /* 文字加粗 */
}

/* 3. 表格行hover效果（鼠标悬浮行） */
[data-testid="stDataFrameRow"]:hover {
    background-color: #F8F9FA !important; /* 行底色变浅灰 */
}
</style>
""")

# 生成测试数据并展示表格（测试样式）
data = pd.DataFrame({
    "产品": ["手机", "电脑", "平板"],
    "销量": np.random.randint(1000, 5000, 3),
    "利润": np.random.randint(200, 1000, 3)
})
st.dataframe(data)

Result:

Method 3: external CSS file (bigger stylesheets)

For many rules—or shared themes—use a .css file and inject via st.markdown.

style.css:

/* style.css */
h3 { color: #F18F01; } /* 对应 st.subheader() */
h2 { color: #F18F01; } /* 对应 st.header() */
.stSelectbox { margin: 10px 0; }

App code:

import streamlit as st

# 读取外部CSS文件
with open("style.css", "r") as f:
    css = f.read()

# 嵌入CSS
st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)

# 测试样式
st.subheader("这是二级标题（橙色）")
st.selectbox("下拉框（有上下间距）", ["选项1", "选项2"])

Result:

IV. Demo: a styled sales dashboard

Goal: a small sales KPI view—centered title, branded button that reveals data, styled table (blue + pink accents).

Full sample:

import streamlit as st
import pandas as pd
import numpy as np

# ---------------------- 1. 嵌入CSS样式 ----------------------
st.markdown("""
<style>
/* 标题样式 */
h1 {
    color: #2E86AB;
    text-align: center;
    font-family: '微软雅黑', sans-serif;
    margin: 20px 0 30px 0;
}

/* 按钮样式 */
.stButton > button {
    background-color: #A23B72;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-size: 16px;
    margin: 0 auto; /* 按钮居中 */
    display: block; /* 块级元素，支持margin:auto */
}
.stButton > button:hover {
    background-color: #F18F01;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* 表格样式 */
.stDataFrame {
    width: 90% !important;
    margin: 25px auto;
    border-radius: 8px; /* 表格圆角 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 轻微阴影 */
}
[data-testid="stDataFrameHeader"] {
    background-color: #2E86AB !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
[data-testid="stDataFrameHeader"] th {
    color: white !important;
    font-size: 14px;
    padding: 12px !important;
}
[data-testid="stDataFrameRow"] td {
    padding: 10px !important;
    text-align: center;
}
[data-testid="stDataFrameRow"]:hover {
    background-color: #F8F9FA !important;
}
</style>
""", unsafe_allow_html=True)

# ---------------------- 2. 应用功能逻辑 ----------------------
st.title("2024年1月销售数据展示")

# 按钮控制数据显示
if st.button("点击查看销售数据"):
    # 生成模拟销售数据
    dates = pd.date_range(start="2024-01-01", end="2024-01-10", freq="D")
    sales_data = pd.DataFrame({
        "日期": dates.strftime("%Y-%m-%d"),
        "产品类别": np.random.choice(["电子产品", "服装", "食品", "家居"], size=10),
        "销售额（元）": np.random.randint(1500, 6000, size=10),
        "订单量": np.random.randint(15, 60, size=10)
    })
    # 展示表格（应用CSS样式）
    st.dataframe(sales_data, use_container_width=False)

Result:

V. Summary: CSS essentials in Streamlit

Why CSS matters: it’s the fastest path from default gray to on-brand, scannable layouts—color systems, emphasis, and nicer interactions.

Patterns:
• Simple tweaks → st.markdown (works everywhere) or st.html (1.10+, cleaner).
• Big themes → external .css for reuse and review.

Technique:
• Inspect real class names (.stButton, dataframe test ids) so selectors hit the right nodes.
• Use !important sparingly but effectively vs. Streamlit defaults (e.g., table width).
• transition for micro-interaction—don’t overanimate.

Safety & layout:
• unsafe_allow_html=True only for trusted CSS—no untrusted paste-ins.
• Consider @media (max-width: 768px) for responsive tightening.

Once CSS clicks, you can push further—sidebar theming, animated metric cards, dark mode. A follow-up could dive custom components × CSS; ping if you want a specific look mocked up.