# CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement.

## Example

``````:root {
--space-unit: 1.5em
}```
```
• We use it then to define the padding of a note block
``````.note {
background-color: skyblue;
}```
```
````<div class="note">A note with a 1.5 padding of the space unit</div>`
```
• The output is:

## List

### Mathematics

#### Calc

The calc() 1) function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.

Example:

``````section {
width: calc(100%/3 - 2*1em - 2*1px);
}
p {
margin: calc(1rem - 2px) calc(1rem - 1px);
}```
```

#### Others (min, max, …)

• Comparison Functions: min(), max(), and clamp()
• Stepped Value Functions: round(), mod(), and rem()
• Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()
• Exponential Functions: pow(), sqrt(), hypot(), log(), exp()
• Sign-Related Functions: abs(), sign()
• Numeric Constants: e, pi

### Image

Image Css function 3) are mainly css gradient functions that create images. See the Gradient functions section for example

### Positioning / Transform

Inside a transform property 4)

````transform: translate(100px, 200px);`
```

### Color Function

#### color-mix

The color-mix 6) function is the color mixture linear interpolation function . Supported only since the css level 5, check your target browser

``````#red {
background-color: red; /* [255,0,0] */
}
#green {
background-color: green; /* [0,255,0] */
}
#mix {
background-color: color-mix(in lch, red 50%, green, 50%); /* [128,128,0] olive - half red - half green  */
}
.swatch {
display: inline-block;
width: 3em;
height: 3em;
}```
```
• The HTML
``````<div id="red" class="swatch"></div>
<div id="green" class="swatch"></div>
<div id="mix" class="swatch"></div>```
```

### Attr

The attr() function 13) is allowed as a component value in properties applied to an element or pseudo-element. It returns the value of an attribute on the element.

Not supported fully

The attr function is for now supported only for the content property. See https://caniuse.com/?search=attr

Because:

• In CSS2.1, the attr() expression always returns a string (no number)
• In CSS3, the attr() expression can return many different types (ie may take number)

Example based on css2.1

• The html
````<span class="inline-note" data-content="Prefix: ">My Inline note with a prefix</span>`
```
• The css
``````.inline-note::before {
content: attr(data-content);
}```
```
• output:

Discover More
CSS - Attr function (attribute)

The attr function select the value of an attribute where:

CSS - Height of a box

This page is the height of a box. From How it's calculated To How it's defined HTMLheight attributeHTMLimage...div element When a absolute length value is set, the value applied directly...
CSS - font-size property

CSS CSS font-size in CSS is a property that defines the length (size) of a font. font-size by himself is an element of typography. responsive typography The font-size uses generally a relative...
Color - GreyScale Color Space

A greyscale is the lightness scale where: White is the highest possible value Black is the lowest value. Gray is the a medium value. The midpoint between black and white, neither dark nor light....
Color - Mixture / Composite (Mix / Blend)

Color mixtures are a mixture of two colors. There is a lot of way to mix (or blend) two colors. The most known is the addition of primary color that creates composite colors (secondary, ..) located at...
What is a css variable (also known as custom property or cascading variable)

CSS variables are variable that can be used in a css property value. They are also known as: * custom properties * cascading variables (in reference to the cascading processing of CSS They...