Skip to content

Latest commit

 

History

History
192 lines (144 loc) · 4.73 KB

css-units.md

File metadata and controls

192 lines (144 loc) · 4.73 KB

⚑ CSS Units

The CSS Units are used to specify the unit of measurements for value of the properties.

There are almost 5 type of Units in CSS.

☴ Overview:

  1. Pixels (px)
  2. Percentages (%)
  3. Ems (em)
  4. Rems (rem)
  5. Viewport units (vw, vh, vmax, vmin)
  6. Functions

✦ Pixels:

It is a fixed unit of measurement that represents one pixel on the screen.

Syntax: value px

p {
  font-size: 16px;
}

✦ Percentages:

It is a relative unit of measurement that represents a percentage of the parent element's size.

Syntax: value %

div {
  width: 50%;
}

✦ Ems:

It is a relative unit of measurement that represents the font size of the element's parent

Syntax: value em

p {
  font-size: 1.2em;
}

✦ Rems:

It is a relative unit of measurement that represents the font size of the root element (usually the <html> element).

Syntax: value rem

p {
  font-size: 1.5rem;
}

✦ Viewport Units:

It is a relative units of measurement based on the viewport size (the visible area of the browser window)

Syntax:

  • vw: Viewport width,
  • vh: Viewport height,
  • vmax: Maximum of viewport width and height,
  • vmin: Minimum of viewport width and height.
div {
  font-size: 2vw;
  height: 100vh;
}

✦ Functions:

CSS has predefined functions that may accepts certain parameters. Which return value for the properties to assign them.

The list of commonly used functions:

✦ Min Function:

It will give the minimum value among the comma separated given units by comparing them.

This will gives smallest (most negative) value from the list of comma separated values.

This function can be used anywhere that accepts the units such as number, integer, percentage, length, angle, time, frequency.

Syntax: min(value1, value2);

The example assigns the minimum possible width either 800px or 90%.

.container {
	width: min(800px, 90%);
}

The long description of the above min function can be possible by the below code.

.container {
	width: 800px;
	max-width: 90%;
}

This min function will set width to the container that if 800px is smaller than 90% of the viewport then it will return 800px as value and vice versa.

✦ Max Function:

It will give the maximum value among the comma separated given units by comparing them.

This will gives largest (most positive) value from the list of comma separated values.

This function can be used anywhere that accepts the units such as number, integer, percentage, length, angle, time, frequency.

Syntax: max(value1, value2);

The example assigns the maximum possible width either 200px or 90%.

.container {
	width: max(200px, 90%);
}

The long description of the above max function can be possible by the below code.

.container {
	width: 90%;
	min-width: 200px;
}

This max function will set width to the container that if 200px is larger than 90% of the viewport then it will return 200px as value and vice versa.

✦ Minmax Function:

This function in CSS is used to specify a range of values for a property, allowing you to set a minimum and maximum value for a property. This is particularly useful for creating responsive layouts and ensuring that elements don't become too large or too small.

Syntax: minmax(min-value, max-value)

.container {
	width: minmax(300px, 80%);
}

✦ Calc Function:

This function in CSS is used to performs mathematical calculations on CSS values.

Syntax: calc(expression)

.container {
	width: calc(100% - 20px);
	margin: calc(2rem / 2);
}

✦ Clamp Function:

This function in CSS is used to clamps a value between a minimum and maximum.

Syntax: clamp(min-value, preferred-value, max-value)

.container {
	font-size: clamp(12px, 2vw, 24px);
}

✦ Repeat Function:

This function in CSS is used to repeat a value to the specified number of times.

Syntax: repeat(count, value)

.container {
	grid-template-area: repeat(3, 1fr);
}

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page