7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 8Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Storing Single and Multiple Values

In this lesson, you’ll learn about which values you can store inside a CSS variable, and you’ll see that you can also store multiple values. Let me show you some examples.

Related Links

2.5 Storing Single and Multiple Values

Welcome back to the course in this lesson,you'll learn about what values you can store inside a CSS variable. And you'll also see that you can store multiple values in the same variable, so, let me show you some examples. We're going to kick off this demo with this simple markup, i have a card with a title, a paragraph and a button inside it. So let's go ahead and write some CSS for it we'll start with the body. I'm going to do the usual thing for this kind of demo display flex, align the items in the center and I also set a background color for it. Now, CSS variables are not just for holding numbers, pixel values or colors. They can also hold gradients for example so here, we can define a variable. That's called body bg and we can define a linear gradient or a radial gradient. It doesn't really matter and let's define the angle and let's define the two colours, E0 C3 FC. This starts at 0% and it goes to 8EC5FC, this is to 100% right so now I can go into my body. And I can say background image is var body BG and now I have a nice linear gradient. I can even go one step further and find the angle here at 120 degrees. So there we go that's another type of value that you can store in a CSS variable. And instead of it being hard coded there, we can use a variable and I meant to say angle, not code. And now it's really easy to change the angle just by changing that one variable. Now you can also store URL values in CSS variables. So for example, I can define a variable called card BG and I can say URL and I'm just gonna paste in the address of an asset, that I uploaded to code pen. And then we can go ahead and define our card, I'm gonna set a background to it, as a VAR. Card bg and of course I can add an initial colour first, and I can set no repeat to that background also. So give us padding of three RAMs, right? So here it is you can use a URL as a value for a CSS variable now you might think that okay why don't we do the following? We can say backround URL, righ and then we can say var and card bg. Well, it doesn't work like that this kind of interpolation is not valid because the URL here will be considered var parenthesis dash dash card dash bg parenthesis again. And this is obviously an invalid URL, so this is actually not going to be replaced with whatever value you set in the current bg. So if you think about using it like this, maybe adding a little bit of some quotes in here? Yeah, that's not gonna work, because this is considered to be an invalid value for the URL, so your only option is to keep it like this. Now of course, you can also add these values here so white, no repeat. Right and you can delete them from here and you can of course position this background In any way that you want. So let's say right bottom, and it's gonna be placed right here. Now, as I was saying in the introduction of this lesson, variables can hold multiple values. And to demonstrate, I'm gonna define a variable in here, that's called a button color and I'm gonna define it as 107 93 227. So here, I basically have multiple values, and I can use this format to the final color as RGB. Or you can also define it as HSL like I showed you in a previous demo. So hue saturation brightness but in the case of this demo, we can say something like BTN I can say background color, RGB var, button color. And of course, then I can go ahead and write the rest of the CSS setting text colors and padding and giving it a border radius. But yeah I'm defining the background color as an RGB of this variable which contains multiple values, and of course. I can alwajys change these and it's going to change that color because RGB stands for red, green, blue. So by changing these numbers, I can individually modify the amount of red, green and blue that I have in my final color. I can even use that and let's say a hover state and I can define the background color. As an RGBA, right with an added alpha channel, so var button color and in here I can set an opacity of point, eight or 80%. So now you'll see that on hover I get a slightly different style. And I'm using the exact same variable here, right, which means I can change this and my hover state will change as well, which is pretty, pretty cool. All right and with that now you know pretty much everything you need to in order to work with CSS custom properties or CSS variables. Before we wrap up this course there are two more things I want to tell you about. And the first one is, how to use CSS variables with media queries and also with JavaScript. That's coming up in the next lesson. So I'll see you there.

Back to the top