# Css styling

**URL:** <https://discuss.streamlit.io/t/css-styling/35243>\
**Category:** Using Streamlit\
**Created:** [December 26, 2022, 8:33pm UTC](https://discuss.streamlit.io/t/css-styling/35243 "2022-12-26T20:33:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahmedhassan139](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ahmedhassan139](https://discuss.streamlit.io/u/ahmedhassan139)\
**Post date:** [December 26, 2022, 8:33pm UTC](https://discuss.streamlit.io/t/css-styling/35243/1 "2022-12-26T20:33:49Z")

</div>

Cant integrate the css code with my app, here is an example

 ![Screen Shot 2022-12-26 at 10.28.37 PM](https://global.discourse-cdn.com/streamlit/original/3X/5/d/5d4661deaa69d6ecbfaaf51233dc5b9fefb98b8e.png)

---

<div class="post-metadata">

**Author:** ![mathcatsand](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/mathcatsand/32/48006_2.png) [@mathcatsand](https://discuss.streamlit.io/u/mathcatsand)\
**Post date:** [December 27, 2022, 12:57am UTC](https://discuss.streamlit.io/t/css-styling/35243/2 "2022-12-27T00:57:36Z")

</div>

```auto
st.markdown('<style>...</style>', unsafe_allow_html=True)

```

You need to use the `unsafe_allow_html` optional keyword if you pass html to `st.markdown` or `st.write`.

You can alternatively use components. [Components API - Streamlit Docs](https://docs.streamlit.io/library/components/components-api)

---

<div class="post-metadata">

**Author:** ![BugzTheBunny](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/bugzthebunny/32/5441_2.png) [@BugzTheBunny](https://discuss.streamlit.io/u/BugzTheBunny)\
**Post date:** [December 27, 2022, 9:46am UTC](https://discuss.streamlit.io/t/css-styling/35243/3 "2022-12-27T09:46:51Z")

</div>

Hi, you are welcome to use my repo as a base example of how to edit the CSS in streamlit -

> **[GitHub - BugzTheBunny/streamlit\_custom\_gui: a custom gui for streamlit, for...](https://github.com/BugzTheBunny/streamlit_custom_gui)**
>
> a custom gui for streamlit, for free use. Contribute to BugzTheBunny/streamlit\_custom\_gui development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Shawn\_Pereira](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/shawn_pereira/32/44502_2.png) [@Shawn\_Pereira](https://discuss.streamlit.io/u/Shawn_Pereira)\
**Post date:** [January 1, 2023, 7:27pm UTC](https://discuss.streamlit.io/t/css-styling/35243/4 "2023-01-01T19:27:30Z")

</div>

Hi @ahmedhassan139,

You can refer to [Changing the text color of only one metric - #2 by Shawn\_Pereira](https://discuss.streamlit.io/t/changing-the-text-color-of-only-one-metric/35338/2) for help with your code.

Cheers

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/streamlit/original/3X/c/f/cf4c2ee0d938358f82448c5fe4b9c3c91d7ce19c.svg) [@system](https://discuss.streamlit.io/u/system)\
**Post date:** [January 1, 2024, 7:27pm UTC](https://discuss.streamlit.io/t/css-styling/35243/5 "2024-01-01T19:27:55Z")

</div>

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.