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
🌍 𝗟𝗜𝗡𝗞𝗦:
▶ Live Demo App: styling.stream...
▶ Source Code: github.com/Sve...
𝗧𝗢𝗢𝗟𝗦 𝗔𝗡𝗗 𝗥𝗘𝗦𝗢𝗨𝗥𝗖𝗘𝗦
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🆓【𝗙𝗥𝗘𝗘】Excel Add-in (𝗠𝘆𝗧𝗼𝗼𝗹𝗕𝗲𝗹𝘁): pythonandvba.c...
📊 Dashboard Excel Add-In (𝗚𝗿𝗮𝗳𝗹𝘆): pythonandvba.c...
🎨 Cartoon Charts Excel Add-In (𝗖𝘂𝘁𝗲𝗣𝗹𝗼𝘁𝘀): pythonandvba.c...
🤪 Fun Emoji Excel Add-In (𝗘𝗺𝗼𝗷𝗶𝗳𝘆): pythonandvba.c...
📑 Excel Templates: pythonandvba.c...
🎓 My Courses: pythonandvba.c...
📚 Books, Tools, and More: pythonandvba.c...
𝗖𝗢𝗡𝗡𝗘𝗖𝗧 𝗪𝗜𝗧𝗛 𝗠𝗘
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🔗 LinkedIn: / sven-bosau
📸 Instagram: / codingisfun_official
💻 GitHub: github.com/Sve...
💬 Discord: pythonandvba.c...
📬 Contact: pythonandvba.c...
☕ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲?
If you want to support this channel, you can buy me a coffee here:
▶ pythonandvba.c...

[@CodingIsFun]

*Here are the links:*
▶ Live Demo App: styling.streamlit.app
▶ Source Code: github.com/Sven-Bo/streamit-css-styling-demo
Happy Streamlit-ing! 🎉 Cheers, Sven ✌

[@williansuarez3988]

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

[@CodingIsFun]

Happy Streamlit-ing! 🎉🎨 Cheers, Sven ✌️

[@kanzkone2008]

Thanks for this

[@CodingIsFun]

My pleasure! Happy Streamlit-ing! Cheers, Sven ✌️

[@walidmat8972]

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

[@CodingIsFun]

Thanks for watching. I might actually do a longer Streamlit course in the future. If you're interested, head to pythonandvba.com/go/courses and vote for the Streamlit course. Enter your email, and you'll be notified as soon as I’m about to release it. Cheers, Sven ✌️

[@robrita]

awesome!! 🎉🎉🎉

[@CodingIsFun]

🎉🎉🎉

[@betulbuyukalimm]

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

[@CodingIsFun]

Thanks for watching. I haven't tried that yet. Feel free to give it a shot! Happy Coding! -Sven ✌️

[@betulbuyukalimm]

@@CodingIsFun I tried but failed. Dataframe rendered using st.dataframe() is within a .
and chatgpt's comment:
"st.dataframe() rendering: Streamlit uses an underlying JavaScript library (like Ag-Grid) to render dataframes interactively. The structure is quite different from simpler HTML elements like buttons."
Thanks anyway. Have a nice day!

[@NarutoMinecraft007]

Thanks great video, does this also work with submit buttons for forms? There is no "key" attribute for the submit buttons is there a way around it? When i use the key fomr the form element it does not change the buttons color.

[@CodingIsFun]

Thanks for watching. As far as I can tell, it only works for elements with a 'key' attribute.

[@rodrigobogado653]

muy bueno bro!

[@CodingIsFun]

Thanks!

[@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...