Loading course content...
Loading course content...
Functions are special statements in CSS. It accepts one or more inputs and returns an output. The output will then be assigned to the CSS property.
We've seen an example of this, the rgb() function we discussed before accepts three values as input and returns the corresponding color code as the output.
The color code is then assigned to the color property.
p {
color: rgb(168, 189, 45);
}There are dozens of different functions available in CSS, and you can find a complete reference here.
Discussing all of them in one lesson is impossible, as some of those functions are quite advanced. Instead, we will discuss them further as we encounter specific examples in the future.
In this lesson, we will discuss a very special function called var(). This function allows you to retrieve a user-defined variable.
:root {
--primary-color: salmon;
}
p {
color: var(--primary-color);
}The variables are defined in the :root section. :root is a pseudo-selector that selects the HTML document's root element, which is <html>.
In this example, --primary-color is the variable name, and salmon is the variable value.
The var() function accepts a variable name as input and returns its value.
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
reprehenderit?
</p>:root {
--primary-color: salmon;
}
p {
color: var(--primary-color);
}var() allows you to create a system where you can reuse the same variables in different locations of the CSS file.
When designing a webpage, you'll want to keep your design language consistent.
For instance, if you want skyblue to be your primary accent color, you'll need to use that value in many different places across your entire CSS file.
a {
color: skyblue;
}
button {
background-color: skyblue;
}
/* . . . */But that means you have to scroll through the entire file to make adjustments.
That can easily lead to mistakes, especially in large projects.
A better way to organize your code is to store your accent color as a variable and access it later with the var() function.
When you need to change the accent color, all you need to do is change the corresponding variable.
:root {
--primary-color: skyblue;
}
a {
color: var(--primary-color);
}
button {
background-color: var(--primary-color);
}Of course, the power of var() is not limited to colors. You can define anything you want, such as the font family, font size, width and height, etc.
:root {
--primary-color: skyblue;
--font-size: 16px;
--font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
p {
border: var(--primary-color) solid 2px;
font-size: var(--font-size);
font-family: var(--font-family);
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, reprehenderit? </p> </body> </html>