Learn

So far, we have seen how CSS variables make it easier to reuse and read CSS code. But variables are also extremely powerful when used with media queries to create responsive designs.

By using variables alongside media queries, we can dynamically change styles according to changes in viewport size and general system preference. For example, we can change the color scheme of our website when a user has their system preference set for dark themes versus light themes.

In the Media Queries lesson, we learned that media queries can be used for conditionally applying styles based on interaction, screen size, type, and more. When using media queries with CSS variables, the main point of note is that we just need to redefine variable values for the effect to take place.

@media screen and (min-width: 600px) { :root { /* Light Color Theme */ --body-background: lightblue; --inner-margin: 6px; --body-text-color: black; --font-size: 18px; } } @media screen and (max-width: 600px) { :root { /* Dark Color Theme */ --body-background: #000; --inner-margin: 12px; --body-text-color: #fff; --font-size: 12px; } }

The example shown above highlights a possible scenario for integrating variables with media queries. Here, we are changing the general style and font size of the web page depending on the size of the page. If the screen width is 600px or smaller, styles for a dark theme are applied. If the screen size is larger than 600px, then it switches to a light theme.

If we didn’t use variables to do this, we would need to set new values for the color properties inside the appropriate media queries. But by using variables, all we have to do is redefine the variable directly! When websites scale up and become more complex, with different theme settings, screen variations, and more, redefining a relatively small number of variables becomes much easier than overriding a large number of hardcoded CSS properties.

Instructions

1.

Add another @media query to the bottom of style.css. It should have a max-width of 500px.

2.

Create an empty ruleset for the :root pseudo-class inside the media query.

3.

Inside the :root selector ruleset, define the following variables and values:

--group-one-background-color: #AF5B5B; --group-two-background-color: #5BB0B0; --main-font-type: 'Helvetica Neue'; --button-background-color: #7f9292; --button-text-color: #000; --button-hover-color: #b2bdbd; --main-header-color: #002626; --featured-artists-background-color: #709683;

Change the width of the browser window. The webpage’s theme should be changing when the viewport width shrinks below 500 pixels!

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?