How to apply custom CSS styles in Streamlit apps

Support my work:
👪 Join as Channel Member:

Recommended Resources

Subscribe:

Disclaimer:
Recommended books and tools are affiliate links that gives me a portion of sales at no cost to you, which will contribute to the improvement of this channel's contents.

#datascience #machinelearning #dataprofessor

[deemo]

I just now stumbled upon this tutorial, and was able to replace buttons in my Streamlit app with custom css stuff that uses animations! This was incredibly helpful in unlocking a new level of Streamlit customization. Thanks!

[ernestnketiah]

This was awesome! Sucessfully implemented it!

[jorge]

What a talent to explain. Thanks, love it.

[sahil_gidwani]

Hi
Can you please help me out I'm trying to display a nav bar with some html code but the latest update of streamlit 1.5 seems to have some changes regarding markdown and allow html

[carlomartinotti]

This should be in the offical documentation of Streamlit. It unlocks so much customization power in streamlit, big props! Are the css names for the widget going to be constant on any system? Like if I redeploy the app in another environment, would the name of the streamlit element be the same?

[LemurHT]

How can I make the text of the metric to be center aligned? Is there something with the new update that won't allow this through css?

[Vazio-ymxg]

Do you have any video this theme for st.dataframe?

[Katsiarina]

Thank you for the tutorial! Can we apply styles to any objects in streamlit? Buttons for example or inputs?

[vouky]

Nicee video thanks for helping us out! I have been trying to include a button within the cards or metric but with no success have you done anything similar?

[Ibraheem_ElAnsari]

🔥🔥I really enjoy playing with the CSS in streamlit. Personally I like adding a box on the top with project title and description

[jerbear]

hi, how do you connect css file to the .py file?

[marcussrm]

Hello! How to change the font-size of a streamlit datraframe?

[lebdev]

Greate video this was very useful.
But i have a question can you make a video to show how to use bootstrap card with tabs inside streamlit ?
Where each tab has its own ID that is displayed in the URL.
Thank you in advance.

[vaibhavk]

Is it possible to draw route between two location in streamlit ;if yes then how

[BunkKal]

hi prof, i would like to ask at 3:51 for the f'<style>{f.read()}</style>' is it an html syntax or streamlit specialized html? what is it called if i want to google more about it

[asifkhanpattan]

how to change the background color and how can i add the background image to the my streamlit web app?

[kicc]

I am assuming the content can be dynamic. For example, stock data, live weather data, etc. I guess calling a page, webscrapping it, then displayin the class name that contains the data wanted, to display them within a CSS box?

[joanmok]

Hey, thanks for your video and it's really helpful for doing styling in Streamlit, but I met an issue here. It works for the property like background, padding, and color. However, it didn't change the font-weight, font-family when I try to change it. Is it any explanation for that? Thanks in advance.

[finuture]

I am getting an error message as no file or directory as style.css even though I have saved the file in app.py, any clue what I might be doing wrong?

[alikoohi]

Can we specifically change on each item style among these three?for example if we could give each element an ID and then change only the style of that ID ...as regular css that we do.another question of mine is that in your opinion, which of Dash or streamlit are easier to make modifications?for example you can use bootstrap with Dash which is so helpful.