CSS Functions
CSS provides different built-in functions that allow us to calculate values dynamically, handle variables, or create flexible layouts. These functions greatly contribute to modern, responsive, and maintainable web design.
calc() function
The calc() function allows mathematical operations within CSS values. This makes it easy to combine percentages, pixels, and other units.
This example shows how to subtract 50 pixels from the full width using calc().
var() function
The var() function allows the use of CSS variables defined with the -- prefix. With this, we can centrally control colors, sizes, and other properties.
In this example, the var() function calls a CSS variable value as the background color.
minmax() function
The minmax() function is used in grid layouts and allows us to specify both the minimum and maximum size of a column or row. This enables flexible and responsive layouts.
In this example, the first column of the grid is at least 150 pixels wide but can grow flexibly if more space is available.
Comparison of functions
| Function | Usage |
|---|---|
| calc() | To mathematically combine values, e.g., 100% - 50px. |
| var() | To call and reuse CSS variables. |
| minmax() | To define flexible sizes for grid columns or rows. |
Tips for using functions
CSS functions allow you to create dynamic and easily maintainable code, but it is important to know which function is the most useful in each situation.
- Calc() helps avoid unnecessary wrapper elements when calculating layout values.
- Var() is especially effective if you use the same colors or sizes in multiple places.
- Minmax() enables a fully responsive grid that works well on both small and large screens.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
