What are CSS Functions?

var() Function

The var() function is used to easily apply CSS properties to HTML elements throughout the document. This function takes a variable that must be declared in the root of the HTML file to be able to use it globally or it can also be set within a specific selector if it needs to be used locally. First, within the root of the HTML file, name your variable (it can be any name you want), preceded by two dashes. For example:

--background-color: rgb(102, 178, 178);

Then, call or use that variable name to access its values and apply it to an element. For example:

div {backgound-color: var(--background-color);

The var() function is useful to apply colors, heights, widths, and other CSS properties, without the need of copying multiple times the same lines of code. Simply, name a variable with the values you desire and then just use the name of that variable to apply it. And if you need to change a value on that variable you only have to do it in one place and changes will be applied anywhere that variable was used. The following block of code is applied to a div with an id of var-function, where the var() function is used to apply background-color of the element.

#var-function {
                    width: 100px; 
                    height: 100px;
                    background-color: var(--background-color);

                }

url() Function

The url() function is used to link an external file. This file can be an image, stylesheet, or external font. The url() function points to external files, so every declaration or use of it, is an HTTP request which could compromise performance on your webpage. Example:

div {background-image: url(images/imagefile);}

The following block of code applies am image to the background of a div element with an url-function id using the url() function.

#url-function {
                width: 100px; 
                height: 100px;
                margin: 10px auto;
                background-image: url(../images/luna3.png);
                background-repeat: no-repeat;
                background-size: cover;
            }

            

:nth-child() Function

The :nth-child() function belongs to pseudo class selector functions which allows to select specific elements from a group of elements or siblings. It uses only one argument that can be a numeric value(1,2,3,4...) which represent the index position of each element, or the odd or even keywords, which will select multiple children in an odd (2,4,6..) or even(1,3,5..) pattern. For example:

li:nth-child(odd) {background-color: rgb(102,178,178);}

The following block of code uses the odd keyword to select the children that are in the odd index position of their parent and applies them the same background color.

li:nth-child(odd) {
                    background-color: rgb(102,178,178);
                    font-weight: bold;
                }

linear-gradient() Function

The linear-gradient() function is used to create background images to the elements to which it's applied. The function takes as arguments the direction you want the gradient to follow and the colors you want to apply. For the direction use the keywords to top, to right, to bottom, and to right. For the color values, the name of colors can be used or the rgba() function. Percentages can be used to apply a stop point of each color. For example:

div {background-image: linear-gradient rgba(102,178,178, 0.3);}

Look how the linear-gradient() function is applied to the following div element that has a class of linear-gradient.

.linear-function {
                margin: 50px;
                width: 150px; 
                height: 150px;
                background-image: linear-gradient(red, orange, yellow, green, blue,indigo,violet);
                }