# Styling st.text using separate CSS

**URL:** <https://discuss.streamlit.io/t/styling-st-text-using-separate-css/17036>\
**Category:** Using Streamlit\
**Created:** [September 11, 2021, 1:03pm UTC](https://discuss.streamlit.io/t/styling-st-text-using-separate-css/17036 "2021-09-11T13:03:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![woden](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/woden/32/10134_2.png) [@woden](https://discuss.streamlit.io/u/woden)\
**Post date:** [September 11, 2021, 1:03pm UTC](https://discuss.streamlit.io/t/styling-st-text-using-separate-css/17036/1 "2021-09-11T13:03:12Z")

</div>

I understand that with `st.markdown`, it’s possible to style text, but is it possible to add the classes or id to the `st.text` that I can use the separate CSS to customize the styles? It’s capable [to use markdown to style](https://discuss.streamlit.io/t/passing-variable-containing-text-to-markdown/16069/2), though.

The reason is that I want to separate the concerns as much as possible. I’ve got 500 lines of code mixed with Plotly charts, HTML components, data frames stuff. Thanks. Plus, I am using variables to reflect my calculations.

---

<div class="post-metadata">

**Author:** ![JonathanAlles](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/jonathanalles/32/67668_2.png) [@JonathanAlles](https://discuss.streamlit.io/u/JonathanAlles)\
**Post date:** [November 1, 2025, 9:10am UTC](https://discuss.streamlit.io/t/styling-st-text-using-separate-css/17036/2 "2025-11-01T09:10:38Z")

</div>

Hey @woden.  
You can try the st\_yled (st-styled) package, which allows you to set css properties and text styling in the function call.  
(Link to [GitHub](https://github.com/EvobyteDigitalBiology/st-styled))

For instance

`st_yled.markdown("Hello World", color = "red", font_size="24px")`

Will give you 24 px font size markdown text in red