10 CSS Functions every Front-end Developer should know

CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML. It is a crucial part of web development, as it allows developers to control the appearance of their websites and applications.

In this article, we will be discussing some of the most useful CSS functions that every frontend developer should be familiar with. These functions can be used to add style and formatting to your website or application and can greatly improve the user experience.

Like any other programming language, Functions in CSS makes the task easier by providing a one-line solution to the problem that you are trying to solve. But, unlike any other programming language, the result of the functions in CSS is not actually affecting any logic on the website as it is only used for affecting the visual elements that are present in the website.

The many different types of functions that are available in CSS are given below −

• Custom property’s function

• Color functions

• Pseudo class selector functions

• Animation functions

• Filter functions

• Sizing and scaling functions

• Comparison functions

• Logical functions

There are many other types of functions available in CSS. But this article will only discuss 10 of these many functions available for us to use.

The var() function

The only custom property function that is available in CSS is the var function. Whenever we have to use a custom property in CSS, var function is used to reference it

Example

An example of using the var function for referencing a custom property is given below −

html {
   --background-color: teal;
}
div {
   background-color: var(--background-color);
}

The calc() function

The most common function that is used for mathematical / arithmetic calculation in CSS is the calc function. It is widely used along with the var function that we discussed above to dynamically calculate the property values.

Example

p {
   height: calc(100px – 80px);
}

We can also use calc with other form units like em, rem etc.

The url() function

More often than not the resources that you need to add to your website are located in several different locations. So at these times, we need a function that can be used to load those resources into the CSS file. The url function does exactly that, it links and loads the resources from the source location to the destination, i.e., CSS file. You can link all types of resources, for example images, svgs, fonts, stylesheets, etc.

Example

body{
   background-image: url(/fonts/myFont);
}

The rgb() function

While designing the websites, we have to work with colors a lot. CSS provides us variety of ways to use colors like hex codes, color names, etc. One such way to represent a color is to use their rgb values and the rgb() function allows us to represent these hex codes into rgb and use them in our stylesheets.

Example

html{
   color: rgb(255, 255, 255);
}

We can use another function, rgba, which can be used to control the opacity of the defined color.

The hsl() function

One another function that can be used to represent color is hsl function. It defines the color as hue, saturation, and lightness values. Some developers tend to use this over rgb.

Example

html{
   color: hsl(100, 50%, 80%);
}

Just like rgb, hsl also has an altered version hsla that controls the opacity of the defined color too.

The blur() function

To apply distinction to an element, we use the blur function.

Example

.someClass{
   filter: blur(67%);
}

The opacity() function

The opacity of an element is the visibility of that respective element. It specifies how much of the background is visible through that.

Example

.someClass{
   filter: opacity(0.75);
}

The nth-child() function

When we have to select the specific child elements of a parent element we can use the nth-child function. It is a pseudo class selector function and has several alterations to target different element as per your need.

Example

.someClass:nth-child(3){
   Color: black;
}

Some of its alterations are nth-last-child, nth-of-type, nth-last-of-type etc.

The scale() function

This function lets you control the size of an element and its children. We can also define the axis along which we want this change to happen.

Example

.someClass{
   transform: scale(100%);
}

The translate() function

This function lets you change the position of an element. We can even specify the axis that we need the element to change to.

Example

.someClass{
   transform: translate(30%);
}

Conclusion

In this article, we discussed functions, what are their use in CSS, how they are different from functions, from other programming languages. We also learnt different types of functions available in CSS. At last we saw 10 most commonly used functions in CSS that every front-end developer needs to know. These are just some of the most popular functions but there is always more to learn.