Introduction

You may have noticed that some property values you’ve worked with in CSS have a slightly different syntax. When the value is a word followed by a pair of parentheses () containing information between them - as in background-color:rgb(0, 0, 0) - you’re using CSS functions.

In this lesson, we’ll cover the basics of what a function is and some common ways they’re used in CSS.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• Recognize the basic parts of a CSS function.
• Learn about thecalc(),min(),max(), andclamp() functions and how to use each one.

What is a function and how are they used in CSS?

Similar to programming languages, functions in CSS are reusable pieces of code which perform specific tasks. Functions are passed “arguments” between parentheses, each of which is used by the function in a specific way. Some common examples are:

color: rgb(0, 42, 255);background: linear-gradient(90deg, blue, red);

Here, the value ofcolor is the functionrgb(), which accepts arguments in the form of numbers. It processes those numbers to calculate the rgb color corresponding to the three values given. Similarly, thebackground property has a value oflinear-gradient(90deg, blue, red).linear-gradient generates a gradient image using the parameters it’s been given. It needs at least two color arguments: colors to transition between. Additionally, you can set the angle of direction of the gradient line (like we’ve done in the example), add more color values, etc.

Unlike programming languages you’ll use in TOP, CSS does not allow us to create our own functions. Instead, the language comes bundled with a list of premade functions that will help you solve the most common styling problems.

Besides defining colors,there are several CSS functions that are useful when designing a website’s layout and sizing. These become important when thinking about responsive design.

Let’s go over a few of these functions:calc(),min(),max(), andclamp().

calc()

The most powerful use cases for calc include:

• Mixing units
• The ability to nestcalc( calc () - calc () )

See the Pen calc() | CSS Functions by TheOdinProject (@TheOdinProjectExamples) onCodePen.

Take a look at howcalc() is being used here:

:root {--header: 3rem;--footer: 40px;--main: calc(100vh - calc(var(--header) + var(--footer)));}

• --header,--footer, and--main are all examples of CSS variables. You will be learning about these in the next lesson.

Setting main to equal the outcome of:100vh - (3rem + 40px).To put it another way:main = 100vh - (header + footer).calc() is handling the math for us even though we are mixing vh, rem and px units.Combined with CSS variables,calc() can save us from the headache of repeating CSS rules.

You should be able to grasp howcalc() is used in the above CodePen embed. We encourage you to play around with different units and sizes of the elements to see what results you get before moving on.

min()

min() does an excellent job of helping us create responsive websites. Take a look at this example:

See the Pen min() | CSS Functions by TheOdinProject (@TheOdinProjectExamples) onCodePen.

#iconHolder {  width: min(150px, 100%);  height: min(150px, 100%);  box-sizing: border-box;  border: 6px solid blue;}

Themin() function works just like JavaScript’sMath.min() and Ruby’sArray#min methods. It takes a list of values separated by commas and returns the smallest one.

This checks whether100% of the parent element’s width is smaller than150px. If100% would be narrower than150px, the element will take up the full width of the container (100%). Otherwise, it will be150px wide.

You are able to do basic math inside amin(). For example,width: min(80ch, 100vw - 2rem); (you don’t even needcalc() in this case).

max()

max() works the same way asmin(), only in reverse, and is like JavaScript’sMath.max() and Ruby’sArray#max methods. It will select the largest possible value from within the parentheses.

width: max(100px, 4em, 50%);

The above compares all three values and sets the element’s width to whichever is largest. If50% of the parent container is bigger than100px and4em, the width will be50%. If4em is larger than the others, it will use4em.

The max function is most useful when the viewing window is either exceptionally small, or the user increases the content size by using the browser’s zoom feature.You may not find a lot of use for max at first, but it is a good tool to be aware of for projects where accessibility is important.

clamp()

clamp() is a great way to make elements fluid and responsive.clamp() takes 3 values:

h1 {  font-size: clamp(1.5rem, 5vw, 3rem);}

1. the minimum value1.5rem
2. the scaling value5vw
3. the maximum value3rem

Theclamp() CSS function uses these values to set the minimum value, scaling value and maximum value. In the above example, this would mean the minimum acceptable font-size would be1.5rem and the maximum would be3rem.

A font-size of5vw is set in-between. The value5vw allows the font-size to scale according to the viewport’s width, but the size is restricted by the minimum and maximum values we’ve set.

Assignment

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

• What are the four CSS math functions we covered above?
• How do we use CSS math functions in our CSS?
• How can CSS functions help make websites and applications more responsive?

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

• Steve Griffith’s video on CSS Math functions gives a good visual overview of these functions.
• Here aresome specific use cases formin,max,clamp andcalc, including color palette generation, background size responsiveness, and accessibility settings.
• Ahmad Shadeed writes aboutmore real world use cases for CSS Math functions with more detailed explanations.