At this point in our CSS journey, we’ve already been exposed to a few CSS functions—for example the var() and repeat() functions. But the possibilities and usefulness that CSS functions bring are much farther reaching.

In a broad sense, functions are blocks of organized and reusable code that help to perform a single, related action. Functions have the benefit of keeping code modular and allowing for a high degree of reusability.

Functions in CSS are a little more limiting than most programming languages. We cannot create our own functions in CSS but instead have access to a wide variety of predefined functions, which allow for expansive page styling.

To use a function in CSS, follow the standard functional notation syntax:

h1 { property: function-name(argument); }

Functions are a type of CSS value that is inserted in the place of a hardcoded value of a CSS declaration. Some functions can even take multiple arguments, generally each of which must be separated by a comma.

By the end of this lesson, you will be able to use some of the most common and beneficial CSS functions. You will also feel comfortable enough to try out the whole spectrum of CSS functions available!


Look through the full list of CSS functions then explore the webpage to the right and the accompanying style.css file. Explore some of the CSS functions used for the webpage.

When you are ready to learn more, proceed to the next exercise.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?