CSS values and units Flashcards
What is a CSS value type aka CSS data type?
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.
<integer> CSS data type
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.
<number> CSS data type
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.
<dimension> CSS data type
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.
<percentage> CSS data type
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.
<length> CSS data type
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.
Absolute <length> units
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- Centimeters1cm = 37.8px = 25.2/64in -
mm- Millimeters1mm = 1/10th of 1cm -
Q- Quarter-millimeters1Q = 1/40th of 1cm -
in- Inches1in = 2.54cm = 96px -
pc- Picas1pc = 1/6th of 1in -
pt- Points1pt = 1/72nd of 1in -
px- Pixels1px = 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.
Relative <length> units
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 likefont-size, and font size of the element itself, in the case of other properties likewidth. -
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 thefont-sizeorline-heightproperties 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.
Explain the four different viewport sizes viewport-percentage length units are based on
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.
vh viewport-percentage length unit
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.
vw viewport-percentage length unit
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.
vmax viewport-percentage length unit
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.
vb viewport-percentage length unit
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.
vi viewport-percentage length unit
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.
<percentage> CSS data type
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.
What is the target of <percentage> data type?
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’swidth -
height- containing block’sheight -
padding- containing block’swidth -
margin- containing block’swidth -
top/bottom- containing block’sheight -
left/right- containing block’swidth -
transform: translateX()- self element’swidth -
transform: translateY()- self element’sheight -
background-size- background positioning area -
background-position- background positioning area -
font-size- parent’s blockfont-size -
line-height- self element’sfont-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.
<ratio> CSS data type
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.
<length-percentage> CSS data type
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.
<color> CSS data type
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.
How can you specify a <color> CSS data type?
A <color> value can be specified using one of the methods listed below:
- By keywords:
<named-color>(such asblueorpink),<system-color>, andcurrentcolor. - 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.
What does the currentcolor keyword represent?
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.
<angle> CSS data type
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 is360deg. Examples:0deg,90deg,14.23deg. -
grad- Represents an angle in gradians. One full circle is400grad. Examples:0grad,100grad,38.8grad. -
rad- Represents an angle in radians. One full circle is2πradians which approximates to6.2832rad.1radis180/πdegrees. Examples:0rad,1.0708rad,6.2832rad. -
turn- Represents an angle in a number of turns. One full circle is1turn. Examples:0turn,0.25turn,1.2turn.
”<angle> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 3, 2024.
<gradient> CSS data type
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(), andrepeating-conic-gradient()functions.
”<gradient> - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 3, 2024.
<image> CSS data type
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.
