Loading course content...
Loading course content...
Code Playground is only enabled on larger screen sizes.
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 the 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 talk more about them 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 the variable name as the input and returns its value as the output.
<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 when you want to change the design, you must scroll through the entire file to make the adjustments.
That can easily to lead to mistakes, especially in large projects.
A better way to organize your code is to store your accent color as a variable, and then access it later using the var() function.
When you need to change the accent color, all you need to do is changing 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>