FINALLY! Style Your Streamlit App with Custom CSS 🎨

In this video, I'm excited to show you a cool new way to style your Streamlit apps without getting all tangled up in tricky CSS hacks! Streamlit's latest update makes it super simple to add custom styles to buttons, input boxes, and more. I'll guide you step-by-step on how to do this with a neat demo app I prepared just for you. First, we'll make sure you have the latest Streamlit version installed, then we'll dive right into applying custom styles using CSS. I'll show you how simple it is to change colors and create animations by just giving elements a class in your CSS file. Even if you're not a CSS pro, I'll share my easy tips on how to use ChatGPT to help out. Plus, I'll teach you how to tweak fonts, add hover effects, and stop Streamlit's default styles from creeping back in. We’ll also explore styling text input boxes, radio buttons, and even HTML text – basically, everything you need to make your Streamlit app look fantastic!
#Streamlit #StreamlitStyling #StreamlitCSS

🌍 𝗟𝗜𝗡𝗞𝗦:

𝗧𝗢𝗢𝗟𝗦 𝗔𝗡𝗗 𝗥𝗘𝗦𝗢𝗨𝗥𝗖𝗘𝗦
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

𝗖𝗢𝗡𝗡𝗘𝗖𝗧 𝗪𝗜𝗧𝗛 𝗠𝗘
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

☕ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲?
If you want to support this channel, you can buy me a coffee here:

[CodingIsFun]

*Here are the links:*
▶ Live Demo App: styling.streamlit.app
Happy Streamlit-ing! 🎉 Cheers, Sven ✌

[lhodeniz]

thank you after searching for many hours in streamlit documentation, forum, even ChatGPT, ...I could get the idea of how to apply CSS styles by your video! thank you. subscribed now!

[pmagoga]

Every time I have a question about streamlit, before looking in the documentation I look on your channel. Tks.

[suvarnadhiraj]

Thanks for the video, this is realy a neat way of styling the streamlit avoiding all the various hacks. But still my requirement is to apply style to a group of elements each having unique key like group of buttons having unique key = button-{uuid()}, Is there some way to match the css element using parital key text?

[williansuarez]

¡Excelente!, ya no hay excusas para mejorar la interfaz de usuario, gracias

[walidmat]

Can you make a long video about streamlit from A to z explaining all functionalitys please ?

[gpalaos]

Hi, thank you for the video and the excellent explanation.
Is it possible to change the text and button of `st.file_uploader` using CSS?

[eurojourney]

Wow! finally, it's almost difficult to believe this is happening! I checked the Streamlit app, there is no mentioning of this... how did you find out? is not in the release from 3 days ago...

[icecubeinsights]

Thanks. is there a page somewhere that lets you design such stylesheets specifically for streamlit apps?

[betulbuyukalim]

Hi, thanks for the video. Can we apply CSS to the dataframe itself using this property?

[gomathisubramanian]

Is it possible to add the button next to streamlit's deploy button

[dove]

Hi, I downloaded both files and changed nothing in Order to test it. Unfortunately only the styled markdown at the end is purple but not cursive. All other buttons are grey and not Green. i use Python 1.44. Do I need to change something?

[КаринаСеменюк-еъ]

How to use @media querries in streamlit????

[raghuls]

hey how to fix the nav bar static on scrolling