CSS values and units

What is a CSS value?

A value type in CSS is a way to define a collection of allowable values.
This means that if you see as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, rgb() functions, etc.
You can use any available values, assuming they are supported by your browser

The following are all absolute length units — they are not relative to anything else, and are generally considered to always be the same size.

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport.
The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page.

(em) => Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
(ex) => x-height of the element's font.
(ch) => The advance measure (width) of the glyph "0" of the element's font.
(rem) => Font size of the root element.
(lh) => Line height of the element.
(vw) => 1% of the viewport's width.
(vh) => 1% of the viewport's height.
(vmin) => 1% of the viewport's smaller dimension.
(vmax) => 1% of the viewport's larger dimension.

em and rem are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text.

a percentage is treated in the same way as a length.
The thing with percentages is that they are always set relative to some other value.
- For example, if you set an element's font-size as a percentage, it will be a percentage of the font-size of the element's parent.
If you use a percentage for a width value, it will be a percentage of the width of the parent.

Some value types accept numbers, without any unit added to them.
An example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is).
This property accepts a number between 0 (fully transparent) and 1 (fully opaque).

we will take a look at is the group of values known as functions.
In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer.
Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values.
We've already seen functions in action in the Colors section — rgb(), hsl(), etc.
The value used to return an image from a file — url() — is also a function.
A value that behaves more like something you might find in a traditional programming language is the calc() CSS function.
This function gives you the ability to do simple calculations inside your CSS.