# CSS Functions

CSS Functions are used as values for various CSS properties. They can perform calculations, retrieve values, manipulate colors, define shapes, and more.

## 1. `attr()`

The `attr()` function retrieves the value of an attribute of the selected element and uses it in the stylesheet. It is most commonly used with the `content` property in pseudo-elements.

```css
/* Display the href attribute value after links */
a::after {
  content: " (" attr(href) ")";
}
```

*Note: While the spec allows `attr()` to be used for other properties (like width), browser support is currently limited mostly to `content`.*

## 2. `url()`

The `url()` function is used to include a file. It takes an absolute or relative URL as its parameter.

```css
body {
  background-image: url("images/bg.png");
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2');
}
```

## 3. `var()`

The `var()` function is used to insert the value of a custom property (CSS variable).

```css
:root {
  --main-color: blue;
}

div {
  color: var(--main-color);
}
```

## 4. Math Functions

CSS provides powerful mathematical functions for dynamic values.
*   **`calc()`**: Performs calculations (`width: calc(100% - 20px)`).
*   **`min()`**: Uses the smallest value.
*   **`max()`**: Uses the largest value.
*   **`clamp()`**: Clamps a value between a minimum and maximum.

## 5. Color Functions

*   **`rgb()` / `rgba()`**: Red, Green, Blue, (Alpha).
*   **`hsl()` / `hsla()`**: Hue, Saturation, Lightness, (Alpha).
*   **`color-mix()`**: Mixes two colors together in a given color space.
    ```css
    color: color-mix(in srgb, red, blue); /* Purple */
    ```

## 6. Other Common Functions

*   **`repeat()`**: Used in Grid Layout to repeat columns/rows.
*   **`minmax()`**: Used in Grid Layout to define a size range.
*   **`fit-content()`**: Clamps a given size to the available size.

[[programming/css/css]]
[[programming/css/calc-function]]
[[programming/css/math-functions]]
[[programming/css/css-variables]]