Video Summary

Alright guys, before we hop into code pen and we start playing around with accent decimals and the RGB and the RGB a color values, I want to start in coolers that code just so we can copy and paste the exact colors we want to use in this color scheme. Okay, so when you’re starting off, there’s two ways that you can copy this. You can go over here to where you got like the two squares, and you say copy hex, you can copy that, or you can click on here which I kind of prefer, because it gives you the actual hashtag in front of it. So we’ll come here, we’ll copy this. And let’s hop over to code pen. So this is the previous example when we’re talking about just just the basic CSS structure of how the code is set up. And I did add one thing for this example is I did put a span tag for the last couple paragraphs. And so for right now, what we want to do is we’re going to want to change this color from red to that exact purple. So what we’re gonna do is we’re going to delete this red and as soon as we do, it goes to the default black, and we’re just going to paste that color that hexadecimal color in there. And once we do that color turns purple. But now let’s say in between the span tags, we want to change that color to maybe the yellow from the Lakers gold, right? But but for this example, let’s do the RGB. Okay, so we’re gonna click RGB, and instead of having to memorize all three of these, just click this color or copy color. And now what we’re gonna do is we’re gonna hop over here, and we’re gonna set up a span a span we’re gonna target the span tag. So we put in span so we target it, we have our curly brackets and we’re enter this down so we could give us some space you can have as much space as you want. For this one, I’ll just kind of put this right in the center. We’re gonna go color, and we’re gonna go RGB, and we’re gonna put in parentheses. And usually what I do too is at the end, I’ll just put a semicolon so I don’t forget and what I’ll do is now copy and paste those colors in. And now all those colors within the span are from the RGB color value. 

Now remember to is we have the RGB A, and for this one I want to I’m gonna change this color out just because this is a very light yellow. But let’s, let’s, this is a perfect, this is a perfect color. So let’s let’s take this and we’re going to copy that RGB and now we can go back in here, we already have the code set up. So now all we got to do is just paste this back in. And now we have a brown color. But if you remember the RGB A is for when we want to use opacity which is like we’re trying to we’re determining the strength of this color. So if we come back here, we have to put in an a in front of the parentheses, and now we put an extra column and now we can do anything from if we do zero. 

That means that there is no color. And now if we did 0.1 You barely see it. And now if we did say point nine, nine, let’s do point nine, nine. It’s pretty much the full color. But what happens is, is that you’re gonna want to you might want to have it to where the colors just not as bright for certain features. So say for instance, let’s let’s make this let’s make this half or than, actually, no, let’s make this half strength. And here’s, here’s something we’re gonna get to a little bit later but I just want to show you the idea of when you’d be able to use the RGB A. So we’re going to do hover and we’re going to make this span we’re going to go span color, and let’s just make this red just for the example. 

But now if we hover over this, it changes that changes the color. So if we if we ended up coming here and say that this is actually make it to where, instead of red, let’s just copy and paste those because I can delete that a little bit easier. 

All right, we’re going to delete the A because we’re not because with RGB, remember that’s the full color of the RGB a allows you to add a the strength of the color, so we’re going to add this here. 

Right? So now you have the regular browser. Now if we hover, it’s a little bit lighter. So when we use this, and when WordPress developers use this feature, it’s usually more for wanting letting the user know that there’s an action, right? So if I came over here, and change, I would have the I would understand that the likelihood of if I clicked on this, that an action will happen. Maybe that if it’s a picture and the picture doesn’t have as much opacity to it, or it doesn’t have as much strength that’s probably clickable. Or if this color changes a little bit, I could actually click on this and bring me to another webpage or maybe download something right? This is where the remnants used. Again, we’re gonna go over this later in the CSS section. So don’t worry about if you’re like What is you know, colon hover, right? Don’t worry about that. It was more or less to show you know why we use this and when it’s really applicable. So these are the colors that we’re going to use when we start getting into WordPress, and really just trying to figure out how we can make you know, one theme match your color scheme, but for a lot of these examples, I probably end up keeping it pretty simple with just red, blue, green, purple, just because that’s just easier to show you how it’s going to work. And then we’re going to go in and start using all these different exact color values the hexadecimal, the RGB and RGBW. A’s. So I hope this tutorial was successful. and I hope you had a good understanding of you know, when we use this and how we’re going to use it, because that’s going to be a really big part once we hit the WordPress section of this course. But for right now, I think you’ve got a good understanding and let’s hop over to the next section.