Edit the CSS of Any Site with Browser Dev Tools

So often when we're building our web pages and websites, we're using our editors, using like Webflow or using WeWeb or whatever the tools that we like to use. And what we want to do is sort of dial in what the experience we want to be like, right? And we can do lots of things inside our editors. Like right now I'm using the UMSO editor that I use for the main state change. A website, which is a pretty good little editor. I recommend it as a simpler tool for creating a website. But it can be really handy, like when you actually have a preview of the website, say, huh, I wonder how things would look if I change things a little bit. Now, of course, you can go back to the editor and keep dialing things back and forth. But you can also experiment quite a bit just directly in the browser itself. And this can be really handy for making cheap changes. Then you can learn how this is all going to work when you actually bring it back to your editor. You can also, kind of neat, go over to other sites. Go over to the Xano site and even make changes over there to understand how it's making styling decisions and how changing those styling decisions might affect the rest of the page. Let's start over on the StateChange site and show how we do this. We do this by bringing up DevTools. DevTools works differently in different browsers. If you're using Chrome, which I recommend for a lot of mainline development operations because it's pretty friendly that way, you can just right-click or two-finger click on your screen and you will get a dropdown menu to get inspect. You can also You can also do the same thing by doing Option+Command+I or Control+Alt+I if you're on Windows. This brings up DevTools, which people who have seen my videos know that I often go into. And often we talk about using Console or we talk about using the Network tab. But today we're going to talk about one called Elements. And this shows up in all of your major DevTools for the various browsers. And here you get to see the way the actual page itself is laid out. In terms of what you have in the head of the page, which often contains meta tags and scripts and styles that get loaded in, whatever. The main body of it, which is usually where your actual display elements happen. And you can actually have a good time exploring this. But one thing we can do in here is we can ask, well, what if we wanted to change, I don't know, part of this headline? And I do that by clicking on this inspector that you see up here. This is a little arrow with the, with the dotted line around it. I can also do the same thing by right-clicking on an element and saying inspect that element. You'll notice how that takes me over on the right directly over to that element, and I put my mouse over it in the inspector, it shows me this particular bit of business. Now we get to the fun part. What if I wanna see, hmm, what would happen if that were purple, right? Now on the bottom here, if I sort of drag this up a little bit, I can see what my styles are. And these styles come from something called CSS, Cascading Style Sheets, which decide how your page is going to be displayed, right? So basically your page is made up of 3 parts. The HTML, which describes the structure of the page. The CSS, which usually describes styling, positioning, those kinds of questions. And the JavaScript, which is usually for interactivity. Now you can use any of those 3 to sort of do quite a lot of crossover among those various jobs. But in the main, we think about CSS as for styling. So styling is what we're gonna focus on right now. So if, for example, we didn't like this font that we had up here, we could understand where this font is coming from, and that right now it's coming from whatever they use for the font title. It's called a CSS variable. Oh, that's changeable. And that has a color of, of white, which is coming from their CSS variable called color-text-primary. Now, if I want to override the color, I can actually click here where it says element style, and I can say color: And I can choose another color. How about purple? Wait, we just turned to purple. And then, uh, you know, I can decide, do I like the purple or would I prefer aquamarine? Do I want it to be a bigger size? So I can choose font size, and then I could choose something like XX large, which is ironically smaller than what I currently have. I could pick an actual size called like 80px, and all of a sudden it becomes super huge. I could choose 8px and all becomes super tiny. I can change basically anything I want about this. Changing the element style is like the most specific form of the way to make a change, that way changing just this one component, not everything else might share its class or what have you. And discussion of how classes and IDs and whatever work, that can be for another video. But what I find to be really handy is by focusing on the element style, I can make changes just to see how I like it and understand what color has what kind of effect, and what sizes have what kind of effect, and how I can play with these various rules that you might see elsewhere and ask how they could affect my page. Because once you know those, you can apply them back into your own editor. Now the other, that's in the style subtab that we see here in elements, and that's really great for editing. So I can, you know, click on some of these things, I can make changes, like I don't want that font anymore. Okay, well, that changes off of the font title font, I can say I don't want that margin, right. And you can sort of understand how these directives cause things to change on the page for any given element. All I want to do is like change login button, I could go click on inspect there. And I could say, you know, style, you know, background color, right. Of green, and now it turns green, right? Which is perhaps not as handy as it might be. I could also choose to use a pound sign to do what's called RGB color, which usually does this in hexadecimal format. So it's going to be a number between 0 and 255 for each of the 3 of red, then green, then blue. So if I wanted really green, I'd do 00 for red, FF for green, 00 for blue, and all of a sudden I get like this super, you know, neon green effect. If I wanted to be green and blue I can see what the effect that would be. That sort of turns it a little more aqua. If I wanted to be green and red, 00. You're actually going to find often that like just changing things to FS is kind of handy for making things really stand out. And then you work with more of a professional or UI toolkit or something to get sort of the more sedate colors that are going to be good in product, good for production, or actually handing out to your customers. But I get to, you know, leave this alone and I can leave that as yellow. If I refresh the page, I will lose these changes. So that sort of is like shaking the, the Etch-a-Sketch. And that is, that's all really handy. Now, I just did this for the StateChange site. That of course is my site, but it's all my browser. So I have control over any website that I decide to load up into my browser. So if you want to understand how other pages are thinking about their styling, you can do that. Let's go over to the Xano site that we sort of opened up before. I'm going to open up, Once again, DevTools, I just use the keyboard shortcut, but once again, I can just do inspect and bring it up. And if I want to understand, hmm, what's going on with this button, how'd they make that button there? We can say inspect that button and we will get to see, all right, there's the button. And now we get to look at things about it, like what's its color, huh? Which is definitely set to an FFF, which is white and all that. Now, You'll notice there are a lot of different, you know, things here that are driving the styling. And that's why we call it cascading style sheets, is because there are a bunch of different commands that might all be expressing opinions about the same things, and you're deciding which one's kind of at the bottom of the waterfall that's going to have the closest effect to what this actual element is going to do. And it has lots of overlay, can be kind of hard to read. So to understand what the final effect is, I encourage going from styles here to clicking on what says computed. And computed allows us to say what is the final effect of all of this styling. You'll notice that this is telling us what the background color is of that particular button, where it says start building for free, what the bottom color is. You'll notice there's something here called left radius, right radius. That radius is basically how we get those rounded corners. So if we wanted to change those radii, we would need to understand what causes that, and that's coming from the buttons. Great. So now we can go back over here and we can ask, where are my buttons? And we can actually filter for radius by looking for everybody who has an opinion about the radius. For the button has radius, and where does it think about the radius? Border radius. Okay, here's a border radius. So I could uncheck this, And in theory, at least, that would cause the button over on the left— inspect that— to maybe go square on us, although it's not doing that yet. And so we wonder, oh, here it is. There's another button radius here, and I can click that. You see how it changes the radius just a tiny bit? And I can go down to here, and I can get rid of that, and then I can get rid of that. And again, the radius changes only a tiny, tiny bit. So if I wanted the radius basically to be 0, I could change that too. Because I can actually change it at both levels. I could change it here at this level by actually typing in 0, and that will change the stylesheet for everybody so that now it becomes all squared off. See how that happened? And then I can also make changes that are gonna be specific just to my element here. So I can say background color, and we can say this one's going to be orange, right? And now you get to see how your page would change as you do these things. And so what I find to be helpful here, both for being able to edit your own page and understand more about it, and being able to tweak these things looking at other people's pages, you understand how these styles styles start to affect things. And that allows me to learn much, much faster. So if I have a look at a page, I'm like, hey, that looks pretty cool. How does it do that? I don't need to go studying the code. I go over to these dev tools. I start looking at the elements I find to be most interesting through this inspector, look at it through the styles, look at it through the computed. Because you can see through the computed, so the styles can start to tell me part of the story. And then the computed can tell me the story like, hmm, why is this thing orange? Well, it's orange because, you know, silly goose, I just set that background color to orange. But I can also ask, why is the button, you know, squared off? Why does it have a certain font? So I can take a look at the font family that's associated with it and discover this is actually coming from the button style, the.btn. And, you know, click on that, be able to understand where that comes from, and be able to, you know, make changes as I see fit. But while there's more you can learn about how CSS works, and this is not really giving you absolute control, you can discover so much about how web pages work just by playing around, opening up DevTools, and taking a look at this Elements tab. Hopefully this gets you started with your journey again to explore how other web pages are working, particularly from a styling point of view. If you've got more questions, please put them down in the comments. And if you're looking to learn more about getting deeper with these kinds of harder questions, we work on the hardest 5% all the time in our daily office hours over at StateChange. And I hope you'll check us out. See you soon.