How to apply custom CSS styles in Streamlit apps

Key Takeaways

in a prior video i've shown you how you could create a navigation bar in streamlit and you'll notice that in the st.metric that we've used the border color is blank and so in this video i'm going to show you how you could modify the border color of the st.matrix which you could use in developing your very own dashboard web application and so without further ado we're starting right now alright and so let's get started so the first thing that you want to do is you're going to fire up your terminal and then you want to activate your own contact environment and my condo environment is called data professor so i'll activate that conda activate data fester so make note that this is your own content environment and if you don't know how to activate the content environment or create your content environment i'll provide you the link to a video that i've made on everything that you need to know how to use conda and so now that we have activated it you'll notice that the name of environment is shown here and now i'm going to move to the directory where we have the files sandbox and the folder is called metric so we have two files here app.py and the style.css so the application will be stored in here and the modification to the border color will be stored in the style.css file so why don't we run the file streamlet run app.py all right and so you'll notice here that we've added the border color to be slightly dark gray and then we added a light gray as the background color so that we'll be able to make the st.metric contrast the background color of white so let me show you how it looks like before we added this customized css styling so we'll have to use the vs code here i'll move this left left part and then this will be the right of tab alright so these are the css styling that we've made so the background color here we specify it to be light gray and the border color which is at the edge here specified to be light green so let's see if we added ffff which will be white so that we'll see how it looks like before adding the color or even why don't we just just comment it okay we'll just comment it here and then we'll run it again so i have to run it from within here run it here i'll activate from here again activate environment and let's see where am i pwd is for print working directory so i'm in the current working directory so i'll type in srimlet run app.app.y okay so it looks like this so without the border color the sc metric looks like this so we'll see that there are three columns because in the code here we have three columns so the code is created on only nine lines of code so the first line will essentially be importing streamlit as st and line number three will be opening up the style.css and we'll assign it to the f variable and then we'll use the dot markdown and as input argument we're going to use the f string and inside the f string we're going to add the html code and then we're going to specify it to replace the content of f.read with the contents of style.css that we have in here and then on lines number six we're going to create three columns using the st.columns and input argument of three and for each of the column we're going to add the st.metric and so these were taken from the documentation of srimlet so let me show you trimlet docs s2.metric so what i've essentially done was copy this code and then use it as an example here okay so i'll provide you the link to that in the video description and so the ability to add border color and border background will allow you to distinguish the st.metric from the background of the app and i personally think that it also looks pretty awesome too so let me uncomment all of these save it refresh it and then we'll have the custom style here so what we've essentially done was we first have to figure out this part of the code so what is the st.metric called in the streamlit app so in order to do that you have to open up your chrome you have to click on view developer inspect elements so let me expand this a bit okay so let's have a look at the elements here so when we hover our mouse onto the st.metric column here you're going to notice that there's going to be a pop-up which will tell us that this element is called div css-1r6slb0.e1tzin5v2 so we can see that the background color here is the light gray and you'll also be able to see other aspects dimensions of the particular elements the margin padding etc and we'll notice that the other sc.metric also has the same name and so in order to modify the color we have to specify the name of the elements so we do it here and we do it inside the style.css file and then we have an opening and a closing braces and then we have the various attributes here so what we wanted to do let me close this so what we wanted to do was modify the background color so we specified here background color to be light gray we wanted to make the border color to be slightly darker gray you could also make it black if you like or any other color here if i make it black it looks like this so i just want to make it a bit subtle a bit darker right or even here how about this dark gray so you could go ahead and go to the html color codes and then you'll be able to choose your favorite color let's say that we're going to use this color that we just pasted here save it refresh it and then you have this reddish color or you can make the background to be light pink if you like find a light paint color here and then we paste the color here refresh it and there you have it you have your very own customized colors here and the border here is the width of the border here i specified to be one you can modify this to be other number as you see fit so it looks a bit darker here as it's a bit thicker and then the padding here are on the sides i specify it to be 20 to 20 70. i think i left it here oh it's redundant you could specify it to be in pixel or in percent if you like let me use percentage it looks the same and then the border radius i specify it to be 10 pixels and what if it's zero what happens have a look so you notice that it becomes a square so when the border radius is specified we'll have rounded edges like that so make it a little bit less so it's 10 save it okay you can modify the color to your own liking five all right and so that's essentially it so in order to modify the properties of this element we use the st markdown and then we embed the code from the style.css so let me know in the comments down below which aspect of srimlet do you want me to experiment with and probably hack the styling and i love to read all of your comments and so all of the codes mentioned here in this tutorial will be provided in the github repo in the video description thank you for watching until the end of this video if you made it this far drop a fire emoji in the comments down below and smash the like button subscribe if you haven't already and also hit on the notification bell so that you'll be notified of the next video and as always the best way to learn data science is to do data science and please enjoy the journey