CSS values and units

Question 1

What is a CSS value type aka CSS data type?

Answer 1

A value type in CSS is a way to define a collection of allowable values.

In CSS specifications and on the property pages on MDN you will be able to spot value types as they will be surrounded by angle brackets, such as <color> or <length>. When you see the value type <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <color> reference page.

Note: You’ll see CSS value types referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value type. The term value refers to any particular expression supported by a value type that you choose to use.

“What is a CSS value?” (MDN Web Docs). Retrieved March 14, 2024.

Question 2

<integer> CSS data type

Answer 2

The <integer> CSS data type is a special type of <number> that represents a positive or negative whole number.

Syntax

The <integer> data type consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single + or - sign. There is no unit associated with integers.

Note: There is no official range of valid <integer> values, and the specifications do not specify a range.

Examples:

Valid integers

12          Positive integer (without a leading + sign)
\+123        Positive integer (with a leading + sign)
-456        Negative integer
0           Zero
\+0          Zero, with a leading +
-0          Zero, with a leading -

Invalid integers

12.0        This is a <number>, not an <integer>, though it represents an integer.
12.         Decimal points are not allowed.
\+---12      Only one leading +/- is allowed.
ten         Letters are not allowed.
_5          Special characters are not allowed.
\35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5).
\4E94       Non-arabic numerals are not allowed, even when escaped (here: the Japanese 5, 五).
3e4         Scientific notation is not allowed.

”<integer> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 14, 2024.

Question 3

<number> CSS data type

Answer 3

The <number> CSS data type represents a number, being either an integer or a number with a fractional component.

Syntax

The syntax of <number> extends the syntax of <integer>. A fractional value is represented by a . followed by one or more decimal digits, and may be appended to an integer. There is no unit associated with numbers.

Interpolation

When animated, values of the <number> CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the easing function associated with the animation.

Examples:

Valid numbers

12          A raw <integer> is also a <number>.
4.01        Positive fraction
-456.8      Negative fraction
0.0         Zero
\+0.0        Zero, with a leading +
-0.0        Zero, with a leading -
.60         Fractional number without a leading zero
10e3        Scientific notation
-3.4e-2     Complicated scientific notation

Invalid numbers

12.         Decimal points must be followed by at least one digit.
\+-12.2      Only one leading +/- is allowed.
12.1.1      Only one decimal point is allowed.

”<number> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 20, 2024.

Question 4

<dimension> CSS data type

Answer 4

The <dimension> CSS data type represents a <number> with a unit attached to it, for example 10px.

CSS uses dimensions to specify distances (<length>), durations (<time>), frequencies (<frequency>), resolutions (<resolution>), and other quantities.

Syntax

The syntax of <dimension> is a <number> immediately followed by a unit which is an identifier. Unit identifiers are case insensitive.

Examples:

Valid dimensions

12px      12 pixels
1rem      1 rem
1.2pt     1.2 points
2200ms    2200 milliseconds
5s        5 seconds
200hz     200 Hertz
200Hz     200 Hertz (values are case insensitive)

Invalid dimensions

12 px       The unit must come immediately after the number.
12"px"      Units are identifiers and therefore unquoted.
3sec        The seconds unit is abbreviated "s" not "sec".

”<dimension> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 20, 2024.

Question 5

<percentage> CSS data type

Answer 5

The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element’s parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.

Note: Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value.

Syntax

The <percentage> data type consists of a <number> followed by the percentage sign (%). Optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number.

Interpolation

When animated, values of the <percentage> data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the easing function associated with the animation.

”<percentage> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 20, 2024.

Question 6

<length> CSS data type

Answer 6

The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.

Note: Although <percentage> values are usable in some of the same properties that accept <length> values, they are not themselves <length> values. See <length-percentage>.

Syntax
The <length> data type consists of a <number> followed by one of the length units. As with all CSS dimensions, there is no space between the number and the unit literal. Specifying the length unit is optional if the number is 0.

Note: Some properties allow negative <length> values, while others do not.

The <length> units can be relative or absolute. Relative lengths represent a measurement in terms of some other distance. Depending on the unit, this distance can be the size of a specific character, the line height, or the size of the viewport. Style sheets that use relative length units can more easily scale from one output environment to another.

”<length> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 21, 2024.

Question 7

Absolute <length> units

Answer 7

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

• cm - Centimeters 1cm = 37.8px = 25.2/64in
• mm - Millimeters 1mm = 1/10th of 1cm
• Q - Quarter-millimeters 1Q = 1/40th of 1cm
• in - Inches 1in = 2.54cm = 96px
• pc - Picas 1pc = 1/6th of 1in
• pt - Points 1pt = 1/72nd of 1in
• px - Pixels 1px = 1/96th of 1in

Most of these units are more useful when used for print, rather than screen output. For example, we don’t typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

“Lengths” (MDN Web Docs). Retrieved March 21, 2024.

Question 8

Relative <length> units

Answer 8

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. Some of the most useful units for web development are listed in the table below.

• 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.
• rlh - Line height of the root element. When used on the font-size or line-height properties of the root element, it refers to the properties’ initial value.
• 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.
• vb - 1% of the size of the initial containing block in the direction of the root element’s block axis.
• vi - 1% of the size of the initial containing block in the direction of the root element’s inline axis.
• svw, svh - 1% of the small viewport’s width and height, respectively.
• lvw, lvh - 1% of the large viewport’s width and height, respectively.
• dvw, dvh - 1% of the dynamic viewport’s width and height, respectively.

“Lengths” (MDN Web Docs). Retrieved March 21, 2024.

Question 9

Explain the four different viewport sizes viewport-percentage length units are based on

Answer 9

The viewport-percentage length units are based on four different viewport sizes: small, large, dynamic, and default.

Small viewport
The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.

The small viewport size is represented by the sv prefix and results in the sv* viewport-percentage length units.

Large viewport
The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.

The large viewport unit is represented by the lv prefix and results in the lv* viewport-percentage units.

Dynamic viewport
The viewport sized taking in cosideration consideration the UA UI:

• When the dynamic toolbars are expanded, the dynamic viewport is equal to the size of the small viewport.
• When the dynamic toolbars are retracted, the dynamic viewport is equal to the size of the large viewport.

The dynamic viewport unit is represented by the dv prefix and results in the dv* viewport-percentage units. The sizes of the dynamic viewport-percentage units are not stable, even when the viewport itself is unchanged.

Note: using viewport-percentage units based on the dynamic viewport size can cause the content to resize while a user is scrolling a page. This can lead to degradation of the user interface and cause a performance hit.

Default viewport
The default viewport size is defined by the browser. The behavior of the resulting viewport-percentage unit could be equivalent to the viewport-percentage unit based on the small viewport size, the large viewport size, an intermediate size between the two, or the dynamic viewport size.

“Relative length units based on viewport” (MDN Web Docs). Retrieved March 21, 2024.

Also

“The large, small, and dynamic viewport units | Blog | web.dev” (web.dev). Retrieved April 2, 2024.

Question 10

vh viewport-percentage length unit

Answer 10

Represents a percentage of the height of the viewport’s initial containing block. 1vh is 1% of the viewport height. For example, if the viewport height is 300px, then a value of 70vh on a property will be 210px.

For small, large, and dynamic viewport sizes, the respective viewport-percentage units are svh, lvh, and dvh. vh represents the viewport-percentage length unit based on the browser default viewport size.

“vh” (MDN Web Docs). Retrieved March 22, 2024.

Question 11

vw viewport-percentage length unit

Answer 11

Represents a percentage of the width of the viewport’s initial containing block. 1vw is 1% of the viewport width. For example, if the viewport width is 800px, then a value of 50vw on a property will be 400px.

For small, large, and dynamic viewport sizes, the respective viewport-percentage units are svw, lvw, and dvw. vw represents the viewport-percentage length unit based on the browser default viewport size.

“vw” (MDN Web Docs). Retrieved March 22, 2024.

Question 12

vmax viewport-percentage length unit

Answer 12

Represents in percentage the largest of vw and vh.

For small, large, and dynamic viewport sizes, the respective viewport-percentage units are svmax, lvmax, and dvmax. vmax represents the viewport-percentage length unit based on the browser default viewport size.

“vmax” (MDN Web Docs). Retrieved March 22, 2024.

Question 13

vb viewport-percentage length unit

Answer 13

Represents percentage of the size of the initial containing block, in the direction of the root element’s block axis.

For small, large, and dynamic viewport sizes, the respective viewport-percentage units are svb, lvb, and dvb, respectively. vb represents the viewport-percentage length unit based on the browser default viewport size.

“vb” (MDN Web Docs). Retrieved March 22, 2024.

Question 14

vi viewport-percentage length unit

Answer 14

Represents a percentage of the size of the initial containing block, in the direction of the root element’s inline axis.

For small, large, and dynamic viewport sizes, the respective viewport-percentage units are svi, lvi, and dvi. vi represents the viewport-percentage length unit based on the browser default viewport size.

“vi” (MDN Web Docs). Retrieved March 22, 2024.

Question 15

<percentage> CSS data type

Answer 15

The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element’s parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.

Note: Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value.

Syntax
The <percentage> data type consists of a <number> followed by the percentage sign (%). Optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number.

Examples:

HTML

<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>

”<percentage> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 25, 2024.

Question 16

What is the target of <percentage> data type?

Answer 16

A <percentage> CSS data type should have a target taken as a reference source. Most answers to this are the parent block of the element we assign the percentage. This is correct, but does not entirely cover all the cases. The most correct answer should be the containing block, meaning the block that contains our element and it doesn’t have to be the direct parent.

However, for certain properties, the reference source for the percentage unit is neither the parent nor the containing block, instead, it is itself - self element.

• width - containing block’s width
• height - containing block’s height
• padding - containing block’s width
• margin - containing block’s width
• top/bottom- containing block’s height
• left/right - containing block’s width
• transform: translateX() - self element’s width
• transform: translateY() - self element’s height
• background-size - background positioning area
• background-position - background positioning area
• font-size - parent’s block font-size
• line-height - self element’s font-size

NOTE: background positioning area, Can be interpreted as similar to the containing block, but with an addition of these 3 factors:

• Block with only content (content-box)
• Block with content and padding (padding-box)
• Block with content, padding and border (border-box)

The 3 factors are given by the background-origin property. You can read more on MDN.

“Understanding CSS Percentage” (DEV Community). Retrieved March 25, 2024.

Question 17

<ratio> CSS data type

Answer 17

The <ratio> CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values.

Syntax
In Media Queries Level 3, the <ratio> data type consisted of a strictly positive <integer> followed by a forward slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <integer>. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height.

In Media Queries Level 4, the <ratio> date type is updated to consist of a strictly positive <number> followed by a forward slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <number>. In addition a single <number> as a value is allowable.

Formal syntax

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?  

Examples:

@media screen and (min-aspect-ratio: 16/9) {
  /* … */
}

”<ratio> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved March 25, 2024.

Question 18

<length-percentage> CSS data type

Answer 18

The <length-percentage> CSS data type represents a value that can be either a <length> or a <percentage>.

Syntax
Refer to the documentation for <length> and <percentage> for details of the individual syntaxes allowed by this type.

Examples:

p {
  /* length-percentage examples */
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /* length examples */
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /* percentage example */
  text-size-adjust: 20%;
}

”<length-percentage> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 2, 2024.

Question 19

<color> CSS data type

Answer 19

The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.

Note: Although <color> values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices’ color profiles.

Syntax

/* Named colors */
rebeccapurple
aliceblue

/* RGB Hexadecimal */
#f09
#ff0099

/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* LAB (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* Oklch (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* Relative CSS colors */
/* HSL hue change */
hsl(from red 240deg s l)
/* HWB alpha channel change */
hwb(from green h w b / 0.5)
/* LCH lightness change */
lch(from blue calc(l + 20) c h)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

”<color> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 2, 2024.

Question 20

How can you specify a <color> CSS data type?

Answer 20

A <color> value can be specified using one of the methods listed below:

• By keywords: <named-color> (such as blue or pink), <system-color>, and currentcolor.
• By hexadecimal notations: <hex-color> (such as #ff0000).
• By <color-function>, with parameters in a color space using functional notations:
  -. sRGB color space: hsl(), hwb(), rgb();
  -. CIELAB color space: lab(), lch();
  -. Oklab color space: oklab(), oklch();
  -. Other color spaces: color().
• By using relative color syntax to output a new color based on an existing color. Any of the above color functions can take an origin color preceded by the from keyword and followed by definitions of the channel values for the new output color.
• By mixing two colors: color-mix().
• By specifying two colors, the first used for light color-schemes and the second used for dark color-schemes: light-dark().

”<color> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 2, 2024.

Question 21

What does the currentcolor keyword represent?

Answer 21

The currentcolor keyword represents the value of an element’s color property. This lets you use the color value on properties that do not receive it by default.

If currentcolor is used as the value of the color property, it instead takes its value from the inherited value of the color property.

“currentcolor keyword” (MDN Web Docs). Retrieved April 2, 2024.

Question 22

<angle> CSS data type

Answer 22

The <angle> CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in <gradient>s and in some transform functions.

Syntax

The <angle> data type consists of a <number> followed by one of the units listed below. As with all dimensions, there is no space between the unit literal and the number. The angle unit is optional after the number 0.

Optionally, it may be preceded by a single + or - sign. Positive numbers represent clockwise angles, while negative numbers represent counterclockwise angles. For static properties of a given unit, any angle can be represented by various equivalent values. For example, 90deg equals -270deg, and 1turn equals 4turn. For dynamic properties, like when applying an animation or transition, the effect will nevertheless be different.

Units

• deg - Represents an angle in degrees. One full circle is 360deg. Examples: 0deg, 90deg, 14.23deg.
• grad - Represents an angle in gradians. One full circle is 400grad. Examples: 0grad, 100grad, 38.8grad.
• rad - Represents an angle in radians. One full circle is 2π radians which approximates to 6.2832rad. 1rad is 180/π degrees. Examples: 0rad, 1.0708rad, 6.2832rad.
• turn - Represents an angle in a number of turns. One full circle is 1turn. Examples: 0turn, 0.25turn, 1.2turn.

”<angle> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 3, 2024.

Question 23

<gradient> CSS data type

Answer 23

The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.

A CSS gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element to which it applies.

Syntax

The <gradient> data type is defined with one of the function types listed below.

• Linear gradient - Linear gradients transition colors progressively along an imaginary line. They are generated with the linear-gradient() function.
• Radial gradient - Radial gradients transition colors progressively from a center point (origin). They are generated with the radial-gradient() function.
• Conic gradient - Conic gradients transition colors progressively around a circle. They are generated with the conic-gradient() function.
• Repeating gradient - Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.

”<gradient> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 3, 2024.

Question 24

<image> CSS data type

Answer 24

The <image> CSS data type represents a two-dimensional image.

Syntax

The <image> data type can be represented with any of the following:

• An image denoted by the url() data type
• A <gradient> data type
• A part of the webpage, defined by the element() function
• An image, image fragment or solid patch of color, defined by the image() function
• A blending of two or more images defined by the cross-fade() function.
• A selection of images chosen based on resolution defined by the image-set() function.

”<image> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 3, 2024.

Question 25

What kind of images can CSS handle?

Answer 25

CSS can handle the following kinds of images:

• Images with intrinsic dimensions (a natural size), like a JPEG, PNG, or other raster format.
• Images with multiple intrinsic dimensions, existing in multiple versions inside a single file, like some .ico formats. (In this case, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.)
• Images with no intrinsic dimensions but with an intrinsic aspect ratio between its width and height, like an SVG or other vector format.
• Images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a CSS gradient.

”<image> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 3, 2024.

Question 26

How does CSS determines an Image’s concrete size?

Answer 26

CSS determines an object’s concrete size using (1) its intrinsic dimensions; (2) its specified size, defined by CSS properties like width, height, or background-size; and (3) its default size, determined by the kind of property the image is used with:

• background-image - The size of the element’s background positioning area
• list-style-image - The size of a 1em character
• border-image-source - The size of the element’s border image area
• cursor - The browser-defined size matching the usual cursor size on the client’s system
• content for a pseudo-element (::after/::before) - A 300px × 150px rectangle

The concrete object size is calculated using the following algorithm:

• If the specified size defines both the width and the height, these values are used as the concrete object size.
• If the specified size defines only the width or only the height, the missing value is determined using the intrinsic ratio, if there is any, the intrinsic dimensions if the specified value matches, or the default object size for that missing value.
• If the specified size defines neither the width nor the height, the concrete object size is calculated so that it matches the intrinsic aspect ratio of the image but without exceeding the default object size in any dimension. If the image has no intrinsic aspect ratio, the intrinsic aspect ratio of the object it applies to is used; if this object has none, the missing width or height are taken from the default object size.

”<image> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 3, 2024.

Question 27

<time> CSS data type

Answer 27

The <time> CSS data type represents a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties.

Syntax
The <time> data type consists of a <number> followed by one of the units listed below. Optionally, it may be preceded by a single + or - sign. As with all dimensions, there is no space between the unit literal and the number.

Note: Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0s or 0ms.

Units

• s - Represents a time in seconds. Examples: 0s, 1.5s, -60s.
• ms - Represents a time in milliseconds. Examples: 0ms, 150.25ms, -60000ms.

Note: Conversion between s and ms follows the logical 1s = 1000ms.

Examples:

Valid times

12s         Positive integer
-456ms      Negative integer
4.3ms       Non-integer
14mS        The unit is case-insensitive, although capital letters are not recommended.
\+0s         Zero with a leading + and a unit
-0ms        Zero with a leading - and a unit

Invalid times

0           Although unitless zero is allowed for <length>s, it's invalid for <time>s.
12.0        This is a <number>, not a <time>, because it's missing a unit.
7 ms        No space is allowed between the number and the unit.

”<time> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 4, 2024.

Question 28

<resolution> CSS data type

Answer 28

The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.

On screens, the units are related to CSS inches, centimeters, or pixels, not physical values.

Syntax
The <resolution> data type consists of a strictly positive <number> followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

Units

• dpi - Represents the number of dots per inch. Screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
• dpcm - Represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi.
• dppx - Represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi, which corresponds to the default resolution of images displayed in CSS as defined by image-resolution.
• x- Alias for dppx.

Note: Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0dpi, 0dpcm, or 0dppx.

Examples:

@media print and (min-resolution: 300dpi) {
  /* … */
}

@media (resolution: 120dpcm) {
  /* … */
}

@media (min-resolution: 2dppx) {
  /* … */
}

@media (resolution: 1x) {
  /* … */
}

Valid resolutions

96dpi
50.82dpcm
3dppx

Invalid resolutions

72 dpi     Spaces are not allowed between the number and the unit.
ten dpi    The number must use digits only.
0          The unit is required.

”<resolution> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 4, 2024.

Question 29

<overflow> CSS data type

Answer 29

The <overflow> enumerated value type represents the keyword values for the overflow-block, overflow-inline, overflow-x, and overflow-y longhand properties and the overflow shorthand property. These properties apply to block containers, flex containers, and grid containers.

Syntax

<overflow> = visible | hidden | clip | scroll | auto

Values
The <overflow> enumerated value type is specified using one of the values listed below.

• visible - Overflow content is not clipped and may be visible outside the element’s padding box. The element box is not a scroll container. This is the default value for all the properties that have the <overflow> enumerated value type.
• hidden - Overflow content is clipped at the element’s padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scrollbars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content can be scrolled programmatically (for example, by setting the value of the scrollLeft property or the scrollTo() method). The content can also be scrolled via keyboard interaction. The element box on which this value is set is a scroll container.
• clip - Overflow content is clipped at the element’s overflow clip edge that is defined using the overflow-clip-margin property. As a result, content overflows the element’s padding box by the <length> value of overflow-clip-margin or by 0px if not set. Overflow content outside the clipped region is not visible, user agents do not add a scrollbar, and programmatic scrolling is also not supported. No new formatting context is created.
• scroll - Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view using scrollbars. User agents display scrollbars in both horizontal and vertical directions if only one value is set, whether or not any content is overflowing or clipped. The use of this keyword value, therefore, can prevent scrollbars from appearing and disappearing as content changes. Printers may still print overflowing content. The element box on which this value is set is a scroll container.
• auto - Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view. Unlike scroll, user agents display scrollbars only if the content is overflowing and hide scrollbars by default. If content fits inside the element’s padding box, it looks the same as with visible but still establishes a new formatting context. The element box on which this value is set is a scroll container.

”<overflow> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 4, 2024.