Open In App

10 CSS functions every Front End developer Should Know

Improve
Improve
Like Article
Like
Save
Share
Report

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;
}

Last Updated : 12 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads