Functions are special statements in CSS that add programmatic characteristics to the language. A function accepts one or more inputs and returns an output, which is then assigned to the CSS property.
For example, 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.
1p {
2 color: rgb(168, 189, 45);
3}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.
The var() function
In this lesson, we will discuss a very special function called var(). Understanding how it works will give you a better idea of what functions are, and what they do.
The function var() allows you to retrieve a user-defined variable.
1:root {
2 --primary-color: salmon;
3}
4
5p {
6 color: var(--primary-color);
7}The variables are defined in the :root section. :root is a pseudo-selector that matches 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.
The var() function 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.
1a {
2 color: skyblue;
3}
4
5button {
6 background-color: skyblue;
7}
8
9/* . . . */But that means when you want to change the design, you must scroll through the entire file to make the adjustments. That is easy to lead to errors, especially in a large project.
A better way to organize your code is to put this information in the :root section as variables and then access them later in the code using the var() function. When you need to change the accent color, all you need to do is changing the corresponding variable.
1:root {
2 --primary-color: skyblue;
3}
4
5a {
6 color: var(--primary-color);
7}
8
9button {
10 background-color: var(--primary-color);
11}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.
1:root {
2 --primary-color: skyblue;
3 --font-size: 16px;
4 --font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
5}
6
7p {
8 border: var(--primary-color) solid 2px;
9 font-size: var(--font-size);
10 font-family: var(--font-family);
11}The @ rules
The @ rules are special statements in CSS. They have the following syntax:
1@<identifier> <rule>;
2
3@<identifier> {
4 <rule>;
5 <rule>;
6 /* . . . */
7}
8
9@<identifier> <name> {
10 <rule>;
11 <rule>;
12 /* . . . */
13}It is difficult to summarize exactly what @ rules are because different rules have different purposes in CSS. For example, the @charset rule specifies the character encoding method used in the CSS file.
1@charset "utf-8";@import is used to import external CSS files.
1@import url("/path/to/external-styles.css");url() is another CSS function used to load external files. Later, we are also going to use it to load background images and other resources.
@font-face is used to specify custom fonts used to display the texts.
1@font-face {
2 font-family: "Trickster";
3 src: url("/path/to/trickster.woff") format("woff");
4 /* . . . */
5}@keyframes defines the keyframes in an animation effect.
1@keyframes changecolor {
2 from {
3 color: red;
4 }
5
6 to {
7 color: blue;
8 }
9}Of course, there are other @ rules available in CSS, and we will discuss them in future lessons. For now, you only need to be familiar with the syntax.