Learning to Code: Day 10— Introduction to CSS Part 7

Hello everyone, how are you keeping this fine Sunday? I was speaking with a friend who recommended buying a notebook to have on hand whenever you find some key word that you want to jot down for later. I think that’s a pretty decent idea. Anyway, let’s get back into CSS and HTML.

What did the Hexadecimal digit say the programmer? Do you value me?

Tough crowd. Alright let’s look at all things “CSS Variables” today.

Custom CSS Variables

.dog {
--dog-fur: gray;

— dog-fur is only an example but you see how it looks in the style block.

CSS variables are defined as var. So let’s see how that looks when we apply it to any background of any element:

background: var(--dog-fur);

Remember: don’t forget that semi-colon at the end. Easy peasy.

Attaching a Fallback Value to the CSS Variable

background: var(--dog-fur, black);

This sets the background to black if your custom variable wasn’t previously set.

Improve Compatibility with Browser Fallbacks

Inheriting CSS Variables

Overwriting Variables

Using Media Query to change a Variable

Media queries is a feature of CSS3 allowing content rendering to adapt to different conditions such as screen resolution (e.g. mobile and desktop screen size).”

Secondly, let’s see what the “media” rule is, according to w3schools.com:

“The @media rule is used in media queries to apply different styles for different mediatypes/devices. Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device.”

CSS Variables can simplify the way you use media queries. For example, when your screen isn’t compatible with the “media query break point” (FreeCodeCamp), then you can change the value of a variable to apply it’s style wherever needed. This would be the same as overwriting the variable as discussed above. Let’s look at the example given by FreeCodeCamp, which was asking me to edit the size and skin of a cute penguin animation. Note the media query and the :root selector positions, and the overwritten values in the media query's :root:


:root {

— penguin-size: 300px;

— penguin-skin: gray;


@media (max-width: 350px) {

:root {

— penguin-size: 200px;

— penguin-skin: black;


…more code…


Aaaand that swiftly brings us to the end of this section Introduction to CSS!

Of course there is much more to learn, but next we will be looking at Applied Visual Design Challenges, all lessons cited and explained here from FreeCodeCamp of course. See you tomorrow!



Frontend Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store