Okay. To go and override our bootstrap style, first you need to work out which one you want to override. So I'm going to insert a button and then figure out the style name. So I'm gonna go insert button, okay? And remember we looked at earlier that we found a class called BTN uh, hyen Danger. And I like it.
I want to use it, but I want to change the background color, okay? I don't want it to be red. So what we're gonna do is we are going to use this thing here, okay? I'm gonna select it all and copy it and I'm gonna go to my bootstrap CSS, this big mammoth thing. Somewhere in there is the style that makes, uh, Betty in danger, big and red with white text. Now I don't wanna go searching for it manually.
Let's go to edit and let's go to find and type it in here. Okay, click find next. And there he is there. Hit close. So what I wanna do is grab this whole class, okay? You gotta make sure you grab the coolly braces.
There's this one at the beginning here, one at the end and hit copy. So I'm gonna go to edit copy, then I'm gonna jump to my CSS, my nice clean empty CSS and we're gonna to override it here. So I'm gonna paste it in using edit paste and make sure I've got my curly braces. They've came along for the ride and there's my, uh, button danger. And it's got the full stop at the beginning making, uh, that lets it know that it's a class. Okay?
And the things that I wanna change is pretty much just the background color and maybe the border color as well. I don't wanna change the color. You'll notice that the word color always refers to the text color. Can you see? It's white and the background color refers to obviously the background color, but if you see color by itself, it means the font color. So actually I don't wanna change it at all.
So there's no point overriding it in saying it's the exact same color. So I'm gonna delete that one. It's the background color and the border color I wanna change. So I wanna change this to another color. So, uh, what I can do is if I know the Hexa decimal number, I can just type it in here. I don't know a few of them off by heart.
Like I know that FFF was uh, white and I know that 0 0 0 is black. Uh, but that's about all that I remember off the top of my head. So I need to go off and find the color. So what I'm gonna do is I'm gonna undo, so edit undo to get back to where it was, and I'm gonna make sure that everything is saved. Saved all. Okay, I'm gonna get my CSS designer and now I'm gonna go and change it using the CSS designer.
So to do it, I'm going to click off into my design view. I'm gonna click on my main css. And the good thing about it is that there's only one class in here, okay? They're called Selectors. It's the overriding name for uh, things like classes and IDs that go in your css. But there is there, okay?
Um, you might be just to make sure that you're not stuck in current, current can get a little bit lost current's great when you know what you're doing, but when you don't go to all and just list everything here. So I can click on this and Down the bottom here. Um, I can go and style it. Now there's lots to go in style potentially. Okay, there he is. There's the background color.
Now, just to tidy things up, watch this. If click show set, instead of showing you all the things that haven't been done or potentially could be done, click show set. It only shows you the things that have been done. In this case, it's only got the border style and the background color. If I turn it off again, it shows me everything. Okay?
But with it on cuts it down to a nice easy manageable list. So, uh, color and so background color, that's the border color. And let's do the background color. So I'm gonna click on this and I'm gonna use thise slider to change the hue, okay? And uh, my new danger color is going to be magenta, okay? But left bright pink.
Once you pick it, there's the hue sider. This is how light or dark it potentially is. And this is how opaque it is, okay? Or how see through it's, let's click enter and you'll notice that my background color is changed to this magenta color. And um, what you'll also notice is the CSS and Bootstrap says be red, but your one, okay, your main CSS overrides it saying the background color is magenta. And that's what we're gonna do a lot of in this class is that we'll leave the bootstrap CSS doing its thing and then we're gonna override it with our own custom stuff.
Okay, great. So that was just there for as an example. So I'm gonna go delete the one that says button danger. And I'm gonna delete the button. I'm gonna select it, delete it from my document. I'm gonna go file save all.
Alright? And that is how you customize Bootstrap by overriding it using your own CSS sheet.