**Understanding CSS Variables**

CSS variables are a powerful feature that allows you to define values once and reuse them throughout your code. In this screencast, we'll explore how to use CSS variables to make your styles more manageable and efficient.

Variable Declarations

--------------------

The first step in using CSS variables is to declare them at the top of your stylesheet or code file. This involves specifying the names and values for the variables you want to define. For example, let's say we want to create a variable called `columns` that will be used to set the width of two columns on our grid.

```

variable declarations

--main-color: #964B00;

--columns: 200px;

```

Styles

------

Next, we'll use these variables in our styles. We can do this by referencing the variable names directly within our CSS rules. For example:

```

.grid {

display: grid;

grid-template-columns: var(--columns);

grid-template-rows: repeat(3, 1fr);

}

.column {

background-color: var(--main-color);

}

```

In this example, we're using the `--columns` variable to set the width of our grid template columns. We've also defined a second variable called `main-color`, which will be used for our background color.

Media Queries

-------------

One of the most useful features of CSS variables is their ability to change values based on certain conditions, such as screen size or orientation. To do this, we can use media queries in conjunction with our variables.

For example, let's say we want to change the width of our columns when the screen width drops below 450 pixels. We can define a variable called `breakpoint` that will be used to trigger these changes.

```

variable declarations

--columns: 200px;

--breakpoint: 450px;

.grid {

display: grid;

grid-template-columns: var(--columns);

grid-template-rows: repeat(3, 1fr);

}

@media screen and (max-width: var(--breakpoint)) {

.grid {

grid-template-columns: calc(var(--columns) / 2);

}

}

```

In this example, we're using the `--breakpoint` variable to set a media query that will trigger when the screen width drops below 450 pixels. We've also updated our CSS to use the `calc()` function to halve the value of `--columns` and create two columns instead.

**Example Use Case: Creating a Responsive Layout**

Here's an example of how we can use CSS variables to create a responsive layout that adapts to different screen sizes:

```

variable declarations

--columns: 200px;

--breakpoint: 450px;

.grid {

display: grid;

grid-template-columns: var(--columns);

grid-template-rows: repeat(3, 1fr);

}

@media screen and (max-width: var(--breakpoint)) {

.grid {

grid-template-columns: calc(var(--columns) / 2);

}

}

.column {

background-color: var(--main-color);

}

```

In this example, we're using our `--columns` variable to set the width of our grid template columns. We've also defined a media query that will trigger when the screen width drops below 450 pixels, at which point we update our CSS to use half the value of `--columns` and create two columns instead.

**Inheritance and Variable Updates**

One important thing to note about CSS variables is how they behave with inheritance and updates. Here are a few key points to keep in mind:

* **Variable values are inherited**: Just like other CSS properties, variable values will be inherited by child elements unless explicitly overridden.

* **Variables can't be updated dynamically**: While it's possible to update the value of a variable directly, this won't affect any child elements that have already used the original value. To fix this, you need to reference the variable name within the scope where you're updating it.

For example:

```

variable declarations

--main-color: #964B00;

.h1 {

color: var(--main-color);

}

.nav-bar {

background-color: #964B00;

}

```

If we update the `--main-color` variable to `#FFC080`, the `.nav-bar` element will still be red because it's referencing the old value.

```

variable declarations

--main-color: #964B00;

.h1 {

color: var(--main-color);

}

.nav-bar {

background-color: var(--main-color);

}

```

However, if we update the `--main-color` variable to `#FFC080` within the scope of the `.nav-bar` element:

```

variable declarations

--main-color: #964B00;

.h1 {

color: var(--main-color);

}

.nav-bar {

background-color: var(--main-color);

}

```

The `.nav-bar` element will now be yellow because it's referencing the updated value.

**Conclusion**

CSS variables offer a powerful way to manage your styles and make your code more efficient. By understanding how to use them, you can create responsive layouts, update values dynamically, and more. Remember to keep your variable names descriptive, reference them within their scope, and be mindful of inheritance when updating values.

"WEBVTTKind: captionsLanguage: enhey there and welcome to this course on css variables so why do you want to learn css variables well first of all because in css you very often end up in situations like this where you have for example a main red color throughout your app which you are using at multiple places and the old way of doing that would simply be to reuse the same hexadecimal value like that however with css variables you're able to declare it as a variable first and then use that variable wherever you want later on the obvious benefit here is that now you can simply update this value here and these two will be automatically updated and also semantically it makes more sense it's easier to see that yeah this title is red than it is to see that this title here is red unless you can parse hexadecimal values quickly in your head and some of you might say that well i've had less and sas variables for years so what's new with css variables well first of all it's easier to get started this is native to the browser so you need no transpiling which is pretty nice secondly css variables have access to the dom so you can create local scopes meaning css variables that only work in a certain section of your app for example you can also change the variables with javascript which is really handy for example if you want to enable your users to let's say change the font size of your page and it's also ideal for responsiveness as you can change variables for example based upon media queries and neither of these use cases which i'll show you later would be possible with less and sass and finally as we'll see it's perfect for themes and by that i don't necessarily mean themes as in your website visitors being able to change the layout with component specific themes for example for items which you want to change a little bit could be a product after it has been added to a shopping cart or an or an article you want to feature or whatever basically it's a very common use case and css variables make it really easy and throughout this course you'll become a css variables master in eight screencasts they're pretty quick i explain my goal with this course is to get you up to speed as quickly as possible there are also some interactive challenges or i will at least challenge you to jump into the code and perform tasks in some of the costs and there's a q a section in each of the costs so feel free to ask questions there and i will try to reply as best as i can or sometimes other people actually also reply and that's great if you see a question and you know the answer feel free to help other people out as that's great for your karma finally this is me i'm a front-end developer and a co-founder of this site scrimba you can reach out to me via twitter if you want or feel free to join our gear chat room if you have any comments or questions so finally this is the project we'll be working on throughout this course so you'll get very familiar with this here is the markup and in the index.css the css which we'll be working with and in the next screencast you'll create your very first css variable so i'll see you there hey in this screencast you're going to learn how to create your very first css variable so here we have an example of a portfolio website it consists of a navbar a main section with some items and then a footer and this is what we'll be working with throughout this course the css is defined here or at least the css that we care about i've also added a bunch of styling in the basic.css file but that styling won't be relevant for what you're going to learn in this course so i've extracted out the css we want to work with just to make it easier for us the markup is defined here in the index.html and that's just straightforward html so let's not which i'm not going to explain because i'm assuming that you are familiar with html so we have three different colors so as you can see we have three different colors on our portfolio website it's the red which is our default text color the beige background and the yellow color for the items here and as you can see from the css we're reusing the hexadecimal values quite a few places we're setting the main red color here and we're also setting it explicitly on the paragraph and h1 tag and i'll tell you why a bit later in the course and also on the anchor tags and the background of the button and whenever you see a css value being reused like this it's a perfect example for introducing css variables so let's do that we'll start by defining our variable then we first have to decide which scope we want the variable to live in we'll choose the root which is a pseudo class that points to the root element in the document in our case that is the html element itself and when we defined it on the top level element like that the variables we declare inside here will be available throughout the entire app it'll be a so-called global variable to define it we'll do red then simply copy this value here like that we can now use this variable through this weird syntax r then dash dash red and this might seem a little bit strange with the two dashes and the var and then passing in the variable but that's just how the spec is written so you have to do it like this two dashes when you declare a variable and use it and always use var otherwise it won't work so let's reuse this in all the other places where we're using the red color here air and down here so now let's do the same thing with the beige background even though that's now just being used one place here though i still think we should put it in a variable as it also makes the code easier to read so let's do ace and copy this value paste it in here and then replace this with var dash so i think we start to see the benefit here already we don't have to repeat ourselves again and again and the code here is actually more understandable than if we were simply using the hexadecimal values as this here as the variable names allows you to quickly glance over the code and understand okay yeah so the color of the h1 and the p tags is indeed red and then there's also the obvious benefit that if we want to change a value for example adjust our red color a little bit then we can simply change the value of the red variable i happen to have a different shade of red on my clipboard so i'll paste that in and as you can see that updated the red color throughout the entire app so let's get back to the old one like that okay what i want you to do now is to take our third color the yellow color which is used here and here and create a variable do it on the root element and then use it down here so pause this green cost jump into the code and do that and when you're finished just resume back to this screencast and then i'll do it as well so go ahead and do that now as i think it's really important for you to actually get your hands dirty with the code okay hopefully you managed to do the task now i'm going to do it so we'll create a yellow variable and we'll grab the color value here and then we can replace this value here with var dash dash yellow and we can do the exact same thing down here and okay so that was it i'll see you in the next screencast hey in this screencast you're going to learn how to override variables because in the previous one you learned how to create variables on the root element which points to the root element in our document which is this html tag here and css variables works so that all the children of the element in which you declare the variable on have access to that variable and as our entire markup on the page is a descendant of the html tag our css variables were available throughout the entire application however there might be cases where you for example want the variables to change a little bit in certain sections of the app and that's where overwriting comes in which is really handy and not something something you can do with sas and list variables is they know nothing of the dom whereas css variable does so you can tell a css variable that you want the value to change for example inside a given element and we're going to do that in the items because here we want our because here we want our red color to be a little bit softer and i've actually added the new value down here so i'm going to copy that and inside of the item we'll do the exact same thing as we did up in the root we'll simply do dash dash red and we'll paste in this value and now you can see that the red color inside the items changed what's happening here is that the h1 tag which is using the red variable and the button which is also using the red variable for its background now has a red variable which refers to the updated value since they are inside of the item let's have a look at that in the html here is the item elements you can see it has an h1 wrapped inside of it and a button as well and inside of each of these items we've flipped the the red variable from this value up here to this value down here and the red variable is inherited down to its children so all the elements inside of the items get their red variables updated as well that's a really neat thing that the variables are inherited down in the document tree notice though that for the h1 tag up here which as we can see is outside of the divs with the class of item the red value is still the original one up here okay so that was it i'll see you in the next screencast hey in this screencast we're going to do almost the same thing as we did in the previous one where we overrode variable in a local scope however this time we're going to create a new variable in a local scope and this is relevant for cases where you know that the variable will only be used in that section of the app so it's no need putting it in the global scope here up in the root let's for example say that we want the red color in our navbar to have a different shade than it has throughout the app what we then can do is that on the navbar let's target it navbar simply create a new variable just as we do it in the root by doing dash dash let's call it navred then let's paste this value in actually and just change it a little bit i'm going to remove this 6 and add 1. that should make it a bit different though still pretty red and then down in the anchor tags in the navbar where we previously referred to the global red variable we're now going to refer to the nav red there as you can see the color changed to more red orange-ish color and now this navred is only available in the nav bar which is the markup here meaning that only the children inside this element can access the nav red variable so if i now try to use this nav red variable outside of the navbar let's for example try down in the button make the background use the nav red you can see that just broke the layout because navrat doesn't exist down here it only exists inside here so what i want you to do now is create a local variable inside of the item you can for example call it item yellow and then use that yellow inside of the items so go ahead and do that pause the screencast create a new variable in the item and then re-and then use that variable somehow inside of the items okay so hopefully you managed to do that now i'll show you how to do it as well it's really simple simply do item yellow then set the value to this here but let's modify it a little bit let's swap out this c with an f that should change it substantially and now we'll use the item yellow here copy this and paste it in and boom you can see the yellow color inside here is updated however inside of the button we're still referring to the global yellow so let's paste that one in there as well and there it's starting to look good or ugly depending on your design preferences and finally i want to point out that some people prefer to separate the declaration of variables and the reference so what you could do then is take this one and remove it and then item and then paste it in there so now we're declaring it here and referencing it down here that's basically a matter of personal preferences as you can do whatever you want okay that was it so i'll see you in the next screencast hey in this screencast we're going to talk about themes because that's an area where css variables come in really handy and you might think well i'm not going to allow my users to switch themes on my site anyway so why do i need to learn this well i'm not just talking about user specific themes but also component specific themes that's a much more normal use case for example it could be that you want to mark an item in your ecommerce store as purchased or added to cart or it could be that you have a section of your site maybe an admin section which has a different theme perhaps it's darker than the website itself or as we are going to do perhaps you want to feature something on your site and by simply giving the item a featured class make it stand out from the rest so that's what we're going to do here now we want to simply be able to add a featured class to one of these items and thereby make it stand out from the rest we basically want to be able to do like this feature which should result in a style change for both the div hair itself and the h1 and buttons and normally in order to do this you'd have to create a featured class and then also target the button and also the h1 tag it could result in quite a lot of extra css in order to achieve that but the beautiful thing with css variables is that you can scrap all this and inside of this featured class here we're simply going to change the value of a few variables we're going to override them which we learned in the previous screencast i've cheated a little bit and copied in the new values for yellow and red in here and simply paste that in and boom as you can see now this project d item stands out from the other items it's not a particularly nice color but it proves the point so what happens here is that the h1 which is inside of featured now refers to the red value which we have declared here and not the red value we declared up here and also the button it's red and yellow now refer to the local values for red and yellow now we can add feature to this item here as well for example run the code and here you can see now both of these are featured so technically we're just doing the same thing that we did in the screencast where we were overriding variables however now we've put it in a more useful context okay that was it i'll see you in the next screencast hey in this screencast we're going to learn how to work with css variables in javascript because as i've mentioned before css variables live in the dom meaning that you can update them with javascript that's super cool not something you could do with for example sas or less variables as they are transpiled down to regular css so let's head over to the index.js and the first thing we need to do is to grab hold of the route which is where we declared the variables you can see here and that now refers to the html as that is the root of our document so we'll do var root equals document dot query selector then grab the root let's log that out as you can see that logs out the html element itself to get the styles we've defined on root we'll do var root styles and then use the get computed style method which we have access to and which returns the properties and values for the element we pass in and we'll pass in the root and then to get one of the variables let's let's for example grab the red one we'll do root styles dot get property value and then simply pass in the name of the variable which is red now console log out red you'll see that we get the correct value you can see this one here so now that we know that we can fetch the variable let's also change it to that we'll refer to the routine root style set prop property and then the first parameter is the name of the variable which is red and the second one is whatever we want to update it to so let's just change it for the sake of this tutorial to green run the code and boom as you can see the entire page has been updated as we've simply changed this here and it's inherited down to all the elements which is using it throughout this app so this is super useful just imagine that you for example want your users to change the font size on the page or maybe you actually want them to be able to pick themes or change colors at some in some sections css variables make that really easy for you okay what i want you to do now is to fetch this yellow color here which we are using in the background for the items fetch it out using javascript and change it to something else for example to orange so go ahead and do that and when you come back i'll do it as well okay hopefully you managed to do the task it's really simple all you have to do is in order to fetch this yellow color here is simply change the red to yellow instead let's also change the other references to yellow like that and then let's set it to orange and there we go we've changed the yellow variable to orange and that affects not only the background of the items themselves as it uses the yellow variable but also the text color inside of the button both of them are now orange okay that was it i'll see you in the next screencast hey in this screencast i'm going to teach you how to change a variable based upon the width of the screen because shrink the screen down to a typical mobile width the items become too wide for the screen so we need to rearrange on our grid we want them to rather appear on top of each other so stacked downwards and to do that you have to learn a little bit about css grid as well because i've pulled in the grid styling which is the styling for the grid and i actually have a full css grid course which i've linked to in the about section in this screencast so be sure to check that one out as well and if you haven't seen css grid before it's pretty straightforward but what we're saying here is that our element with the class of grid which is the grid here which wraps these four items let's do like this so this one here is getting a display of grid and we're defining the columns here we're saying that we want two columns each being 200 pixels wide so these two columns are 200 pixels wide each and grid auto rows means that the rows will be 140 pixels tall because we're setting that here and grid gap sets the gap in between the items and justify content center basically centers the content so check out my grid course if you think this is hard but you don't really need to understand this all you need to understand is this line here which is saying that we want two columns each being 200 pixels wide because that's what we need to change with with our media query meaning that we need to extract this out in a variable and i actually like to declare my variables at the top so have have it like this variable declarations and then have the styles here so that we separate here we'll do grid and paste in grid template columns but we'll change this to columns and then when we're using that value you just have to do var dash dash columns like that so this should be pretty straightforward for you by now we're declaring a variable and we're using it now let's change it when the width of the screen becomes less than 450 pixels video all and max width of 450px and you might be fooled to think that you could just do like this columns 200 px as that's the change we want we want to remove one of the columns here we have two columns each being 200 pixels you want to reduce that to one which basically results in the items stacking on top of each other however we can't just change it here we have to wrap it in the scope in which we defined it with a grid like that here so at the width which is below 450px we're going to change the columns variable inside of grid to 200 px instead of 200 bx 200 bx let's try that we'll narrow the screen and boom as you can see now they're stacked on top of each other and this isn't something that you could have done with less or sass variables as they have no information of what's going on in the dom they're already transpiled down to regular css however as these css variables live in the dom they have access to this and you can change them based upon for example screen resize or screen size in general now what i want you to do is also change the background the beige color when the screen is less than 450px so jump into the code and try to do that and when you come back i'll show you how to do it as well okay so hopefully you managed to do the task changing the beige color and do that i have to refer to the root again and the page and then give it a new value let's copy this and paste it in and change it a little bit run the code and then when we shrink on the page boom you can see that the background also changed okay that was it i'll see you in the next screencast hey in this screencast i want to talk a little bit about inheritance as you as you've seen throughout this course css variables behave very much as other css properties in that their values are inherited and cascade however there are a few things that you maybe would think that would work but which doesn't and i want to explain those two in this screencast now the first one is that you can create variables based upon other variables let's say that we're for example all one variable main color and we want it to simply be the red color now we can refer to main color instead of red for example down here in the anchor tags in the nav bar let's do that they are still red now and here you might be fooled to think that you could actually do like this and update the red or override the red variable here to something else let's just just change it to orange instead for example and you could expect that that would override the red which again would override main color but as you can see that isn't happening because main color the value of that has already been resolved to the value of red so main color doesn't have a reference to the variable it only points to the value however if you were to rather update the main color here like that as you can see then it works so that's something you should be aware of the second thing is that we've here set the color of the age ones and the paragraphs to read specifically and you don't actually need this we could have just taken this away and the page would look identical however if you now were to for example update the red value here let's take the orange here as well then you can see that the h1 isn't updated and that's because it has inherited the h1 the color red from the body though though it has only inherited the value of the variable doesn't inherit the variable itself so again it's this about referencing the value or the variable and we have to explicitly tell it to reference the variable in order to be able to then change the h1 tag with this overriding here now you can see it is indeed orange so i hope that wasn't too confusing if it was feel free to ask any questions in the q a section and i'll reply ashey there and welcome to this course on css variables so why do you want to learn css variables well first of all because in css you very often end up in situations like this where you have for example a main red color throughout your app which you are using at multiple places and the old way of doing that would simply be to reuse the same hexadecimal value like that however with css variables you're able to declare it as a variable first and then use that variable wherever you want later on the obvious benefit here is that now you can simply update this value here and these two will be automatically updated and also semantically it makes more sense it's easier to see that yeah this title is red than it is to see that this title here is red unless you can parse hexadecimal values quickly in your head and some of you might say that well i've had less and sas variables for years so what's new with css variables well first of all it's easier to get started this is native to the browser so you need no transpiling which is pretty nice secondly css variables have access to the dom so you can create local scopes meaning css variables that only work in a certain section of your app for example you can also change the variables with javascript which is really handy for example if you want to enable your users to let's say change the font size of your page and it's also ideal for responsiveness as you can change variables for example based upon media queries and neither of these use cases which i'll show you later would be possible with less and sass and finally as we'll see it's perfect for themes and by that i don't necessarily mean themes as in your website visitors being able to change the layout with component specific themes for example for items which you want to change a little bit could be a product after it has been added to a shopping cart or an or an article you want to feature or whatever basically it's a very common use case and css variables make it really easy and throughout this course you'll become a css variables master in eight screencasts they're pretty quick i explain my goal with this course is to get you up to speed as quickly as possible there are also some interactive challenges or i will at least challenge you to jump into the code and perform tasks in some of the costs and there's a q a section in each of the costs so feel free to ask questions there and i will try to reply as best as i can or sometimes other people actually also reply and that's great if you see a question and you know the answer feel free to help other people out as that's great for your karma finally this is me i'm a front-end developer and a co-founder of this site scrimba you can reach out to me via twitter if you want or feel free to join our gear chat room if you have any comments or questions so finally this is the project we'll be working on throughout this course so you'll get very familiar with this here is the markup and in the index.css the css which we'll be working with and in the next screencast you'll create your very first css variable so i'll see you there hey in this screencast you're going to learn how to create your very first css variable so here we have an example of a portfolio website it consists of a navbar a main section with some items and then a footer and this is what we'll be working with throughout this course the css is defined here or at least the css that we care about i've also added a bunch of styling in the basic.css file but that styling won't be relevant for what you're going to learn in this course so i've extracted out the css we want to work with just to make it easier for us the markup is defined here in the index.html and that's just straightforward html so let's not which i'm not going to explain because i'm assuming that you are familiar with html so we have three different colors so as you can see we have three different colors on our portfolio website it's the red which is our default text color the beige background and the yellow color for the items here and as you can see from the css we're reusing the hexadecimal values quite a few places we're setting the main red color here and we're also setting it explicitly on the paragraph and h1 tag and i'll tell you why a bit later in the course and also on the anchor tags and the background of the button and whenever you see a css value being reused like this it's a perfect example for introducing css variables so let's do that we'll start by defining our variable then we first have to decide which scope we want the variable to live in we'll choose the root which is a pseudo class that points to the root element in the document in our case that is the html element itself and when we defined it on the top level element like that the variables we declare inside here will be available throughout the entire app it'll be a so-called global variable to define it we'll do red then simply copy this value here like that we can now use this variable through this weird syntax r then dash dash red and this might seem a little bit strange with the two dashes and the var and then passing in the variable but that's just how the spec is written so you have to do it like this two dashes when you declare a variable and use it and always use var otherwise it won't work so let's reuse this in all the other places where we're using the red color here air and down here so now let's do the same thing with the beige background even though that's now just being used one place here though i still think we should put it in a variable as it also makes the code easier to read so let's do ace and copy this value paste it in here and then replace this with var dash so i think we start to see the benefit here already we don't have to repeat ourselves again and again and the code here is actually more understandable than if we were simply using the hexadecimal values as this here as the variable names allows you to quickly glance over the code and understand okay yeah so the color of the h1 and the p tags is indeed red and then there's also the obvious benefit that if we want to change a value for example adjust our red color a little bit then we can simply change the value of the red variable i happen to have a different shade of red on my clipboard so i'll paste that in and as you can see that updated the red color throughout the entire app so let's get back to the old one like that okay what i want you to do now is to take our third color the yellow color which is used here and here and create a variable do it on the root element and then use it down here so pause this green cost jump into the code and do that and when you're finished just resume back to this screencast and then i'll do it as well so go ahead and do that now as i think it's really important for you to actually get your hands dirty with the code okay hopefully you managed to do the task now i'm going to do it so we'll create a yellow variable and we'll grab the color value here and then we can replace this value here with var dash dash yellow and we can do the exact same thing down here and okay so that was it i'll see you in the next screencast hey in this screencast you're going to learn how to override variables because in the previous one you learned how to create variables on the root element which points to the root element in our document which is this html tag here and css variables works so that all the children of the element in which you declare the variable on have access to that variable and as our entire markup on the page is a descendant of the html tag our css variables were available throughout the entire application however there might be cases where you for example want the variables to change a little bit in certain sections of the app and that's where overwriting comes in which is really handy and not something something you can do with sas and list variables is they know nothing of the dom whereas css variable does so you can tell a css variable that you want the value to change for example inside a given element and we're going to do that in the items because here we want our because here we want our red color to be a little bit softer and i've actually added the new value down here so i'm going to copy that and inside of the item we'll do the exact same thing as we did up in the root we'll simply do dash dash red and we'll paste in this value and now you can see that the red color inside the items changed what's happening here is that the h1 tag which is using the red variable and the button which is also using the red variable for its background now has a red variable which refers to the updated value since they are inside of the item let's have a look at that in the html here is the item elements you can see it has an h1 wrapped inside of it and a button as well and inside of each of these items we've flipped the the red variable from this value up here to this value down here and the red variable is inherited down to its children so all the elements inside of the items get their red variables updated as well that's a really neat thing that the variables are inherited down in the document tree notice though that for the h1 tag up here which as we can see is outside of the divs with the class of item the red value is still the original one up here okay so that was it i'll see you in the next screencast hey in this screencast we're going to do almost the same thing as we did in the previous one where we overrode variable in a local scope however this time we're going to create a new variable in a local scope and this is relevant for cases where you know that the variable will only be used in that section of the app so it's no need putting it in the global scope here up in the root let's for example say that we want the red color in our navbar to have a different shade than it has throughout the app what we then can do is that on the navbar let's target it navbar simply create a new variable just as we do it in the root by doing dash dash let's call it navred then let's paste this value in actually and just change it a little bit i'm going to remove this 6 and add 1. that should make it a bit different though still pretty red and then down in the anchor tags in the navbar where we previously referred to the global red variable we're now going to refer to the nav red there as you can see the color changed to more red orange-ish color and now this navred is only available in the nav bar which is the markup here meaning that only the children inside this element can access the nav red variable so if i now try to use this nav red variable outside of the navbar let's for example try down in the button make the background use the nav red you can see that just broke the layout because navrat doesn't exist down here it only exists inside here so what i want you to do now is create a local variable inside of the item you can for example call it item yellow and then use that yellow inside of the items so go ahead and do that pause the screencast create a new variable in the item and then re-and then use that variable somehow inside of the items okay so hopefully you managed to do that now i'll show you how to do it as well it's really simple simply do item yellow then set the value to this here but let's modify it a little bit let's swap out this c with an f that should change it substantially and now we'll use the item yellow here copy this and paste it in and boom you can see the yellow color inside here is updated however inside of the button we're still referring to the global yellow so let's paste that one in there as well and there it's starting to look good or ugly depending on your design preferences and finally i want to point out that some people prefer to separate the declaration of variables and the reference so what you could do then is take this one and remove it and then item and then paste it in there so now we're declaring it here and referencing it down here that's basically a matter of personal preferences as you can do whatever you want okay that was it so i'll see you in the next screencast hey in this screencast we're going to talk about themes because that's an area where css variables come in really handy and you might think well i'm not going to allow my users to switch themes on my site anyway so why do i need to learn this well i'm not just talking about user specific themes but also component specific themes that's a much more normal use case for example it could be that you want to mark an item in your ecommerce store as purchased or added to cart or it could be that you have a section of your site maybe an admin section which has a different theme perhaps it's darker than the website itself or as we are going to do perhaps you want to feature something on your site and by simply giving the item a featured class make it stand out from the rest so that's what we're going to do here now we want to simply be able to add a featured class to one of these items and thereby make it stand out from the rest we basically want to be able to do like this feature which should result in a style change for both the div hair itself and the h1 and buttons and normally in order to do this you'd have to create a featured class and then also target the button and also the h1 tag it could result in quite a lot of extra css in order to achieve that but the beautiful thing with css variables is that you can scrap all this and inside of this featured class here we're simply going to change the value of a few variables we're going to override them which we learned in the previous screencast i've cheated a little bit and copied in the new values for yellow and red in here and simply paste that in and boom as you can see now this project d item stands out from the other items it's not a particularly nice color but it proves the point so what happens here is that the h1 which is inside of featured now refers to the red value which we have declared here and not the red value we declared up here and also the button it's red and yellow now refer to the local values for red and yellow now we can add feature to this item here as well for example run the code and here you can see now both of these are featured so technically we're just doing the same thing that we did in the screencast where we were overriding variables however now we've put it in a more useful context okay that was it i'll see you in the next screencast hey in this screencast we're going to learn how to work with css variables in javascript because as i've mentioned before css variables live in the dom meaning that you can update them with javascript that's super cool not something you could do with for example sas or less variables as they are transpiled down to regular css so let's head over to the index.js and the first thing we need to do is to grab hold of the route which is where we declared the variables you can see here and that now refers to the html as that is the root of our document so we'll do var root equals document dot query selector then grab the root let's log that out as you can see that logs out the html element itself to get the styles we've defined on root we'll do var root styles and then use the get computed style method which we have access to and which returns the properties and values for the element we pass in and we'll pass in the root and then to get one of the variables let's let's for example grab the red one we'll do root styles dot get property value and then simply pass in the name of the variable which is red now console log out red you'll see that we get the correct value you can see this one here so now that we know that we can fetch the variable let's also change it to that we'll refer to the routine root style set prop property and then the first parameter is the name of the variable which is red and the second one is whatever we want to update it to so let's just change it for the sake of this tutorial to green run the code and boom as you can see the entire page has been updated as we've simply changed this here and it's inherited down to all the elements which is using it throughout this app so this is super useful just imagine that you for example want your users to change the font size on the page or maybe you actually want them to be able to pick themes or change colors at some in some sections css variables make that really easy for you okay what i want you to do now is to fetch this yellow color here which we are using in the background for the items fetch it out using javascript and change it to something else for example to orange so go ahead and do that and when you come back i'll do it as well okay hopefully you managed to do the task it's really simple all you have to do is in order to fetch this yellow color here is simply change the red to yellow instead let's also change the other references to yellow like that and then let's set it to orange and there we go we've changed the yellow variable to orange and that affects not only the background of the items themselves as it uses the yellow variable but also the text color inside of the button both of them are now orange okay that was it i'll see you in the next screencast hey in this screencast i'm going to teach you how to change a variable based upon the width of the screen because shrink the screen down to a typical mobile width the items become too wide for the screen so we need to rearrange on our grid we want them to rather appear on top of each other so stacked downwards and to do that you have to learn a little bit about css grid as well because i've pulled in the grid styling which is the styling for the grid and i actually have a full css grid course which i've linked to in the about section in this screencast so be sure to check that one out as well and if you haven't seen css grid before it's pretty straightforward but what we're saying here is that our element with the class of grid which is the grid here which wraps these four items let's do like this so this one here is getting a display of grid and we're defining the columns here we're saying that we want two columns each being 200 pixels wide so these two columns are 200 pixels wide each and grid auto rows means that the rows will be 140 pixels tall because we're setting that here and grid gap sets the gap in between the items and justify content center basically centers the content so check out my grid course if you think this is hard but you don't really need to understand this all you need to understand is this line here which is saying that we want two columns each being 200 pixels wide because that's what we need to change with with our media query meaning that we need to extract this out in a variable and i actually like to declare my variables at the top so have have it like this variable declarations and then have the styles here so that we separate here we'll do grid and paste in grid template columns but we'll change this to columns and then when we're using that value you just have to do var dash dash columns like that so this should be pretty straightforward for you by now we're declaring a variable and we're using it now let's change it when the width of the screen becomes less than 450 pixels video all and max width of 450px and you might be fooled to think that you could just do like this columns 200 px as that's the change we want we want to remove one of the columns here we have two columns each being 200 pixels you want to reduce that to one which basically results in the items stacking on top of each other however we can't just change it here we have to wrap it in the scope in which we defined it with a grid like that here so at the width which is below 450px we're going to change the columns variable inside of grid to 200 px instead of 200 bx 200 bx let's try that we'll narrow the screen and boom as you can see now they're stacked on top of each other and this isn't something that you could have done with less or sass variables as they have no information of what's going on in the dom they're already transpiled down to regular css however as these css variables live in the dom they have access to this and you can change them based upon for example screen resize or screen size in general now what i want you to do is also change the background the beige color when the screen is less than 450px so jump into the code and try to do that and when you come back i'll show you how to do it as well okay so hopefully you managed to do the task changing the beige color and do that i have to refer to the root again and the page and then give it a new value let's copy this and paste it in and change it a little bit run the code and then when we shrink on the page boom you can see that the background also changed okay that was it i'll see you in the next screencast hey in this screencast i want to talk a little bit about inheritance as you as you've seen throughout this course css variables behave very much as other css properties in that their values are inherited and cascade however there are a few things that you maybe would think that would work but which doesn't and i want to explain those two in this screencast now the first one is that you can create variables based upon other variables let's say that we're for example all one variable main color and we want it to simply be the red color now we can refer to main color instead of red for example down here in the anchor tags in the nav bar let's do that they are still red now and here you might be fooled to think that you could actually do like this and update the red or override the red variable here to something else let's just just change it to orange instead for example and you could expect that that would override the red which again would override main color but as you can see that isn't happening because main color the value of that has already been resolved to the value of red so main color doesn't have a reference to the variable it only points to the value however if you were to rather update the main color here like that as you can see then it works so that's something you should be aware of the second thing is that we've here set the color of the age ones and the paragraphs to read specifically and you don't actually need this we could have just taken this away and the page would look identical however if you now were to for example update the red value here let's take the orange here as well then you can see that the h1 isn't updated and that's because it has inherited the h1 the color red from the body though though it has only inherited the value of the variable doesn't inherit the variable itself so again it's this about referencing the value or the variable and we have to explicitly tell it to reference the variable in order to be able to then change the h1 tag with this overriding here now you can see it is indeed orange so i hope that wasn't too confusing if it was feel free to ask any questions in the q a section and i'll reply as\n"