10 CSS functions every Front End developer Should Know

Like all other programming languages, CSS also have their functions. CSS functions are used as a value for various CSS properties. Unlike other programming languages, we cannot write our own functions in CSS.

Let us take a look at some of the important CSS functions you should know –

1. url() Function: This function is used to set the background image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image.

background: url("photo.jpg")

2. calc() Function: This function is used to perform calculations.

width: calc(100%-60px)

3. var() Function: This function is used to insert the value of a CSS variable.

--white: #fff
h2 { color: var(--white); }

4. rgb() & rgba() Functions: It is used to describe the levels of colour, here ‘r’ stands for red, ‘g’ stands for green, ‘b’ stands for blue and ‘a’ is used to specify the opacity of a colour.

color: rgb(0, 0, 0)
color: rgba(0, 0, 0, 1)

5. hsl() Function: This function is used to describe the levels of color using hue, saturation and lightness.

color: hsl(0, 0, 0)

6. blur() Function: It is used to apply the blur effect.

.body{
    filter : blur(100px);
}

7. brightness() Function: It helps to adjust the brightness.

.h2{
    filter: brightness(50%);
}

8. opacity() Function: It helps to set the opacity of the element.

img{
    filter : opacity(50%);
}

9. :not() Function: To apply the style to img element not having .no-p class.

img:not(.no-p){
    padding: 0;
}

10. :nth-child() & :nth-last-child() Selectors: To select one or more elements in a group of elements.

li:nth-child(2), 
li:nth-last-child(2){
    color: yellow;
}