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

Alright, let’s have a wee looksie at custom variables in CSS. They are nested within their parent CSS selector, as you can see here that selector is .dog. The variables are simply made with two hyphens and look like this:

.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

Just like when a font degrades to another font, we can create a fallback if the variable specified as a CSS property value isn’t found or invalid. This can be useful for debugging as you can imagine. Here’s an example of a fallback value attached to the end:

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

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

Improve Compatibility with Browser Fallbacks

Running into bugs and problems is inevitable. So it’s best to provide these fallbacks to prevent potential pitfalls. Some browsers (e.g. Internet Explorer) don’t support certain aspects of CSS, so fallbacks will be required in those cases.

Inheriting CSS Variables

Just like in Part 5’s Styling an HTML Body Element section, CSS Variables can also inherit aspects of their parent elements and those aspects are also available in the element’s descendants. To utilise that inheritance, CSS Variables are defined in a pseudo-class selector called the :root element, which matches the root element of the document, often an HTML element. When the CSS variable is nested inside the :root selector, it is accessible to any selector in the style block which cites that variable.

Overwriting Variables

In addition to this, once the CSS Variables have been set in the :root selector for the whole page, you can then overwrite them again by editing the value of a variable within a specific element.

Using Media Query to change a Variable

Firstly, what is a Media Query? According to Wikipedia,:

“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:

<style>

:root {

— penguin-size: 300px;

— penguin-skin: gray;

}

@media (max-width: 350px) {

:root {

— penguin-size: 200px;

— penguin-skin: black;

}

…more code…

</style>

—

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!