mdn/css/1_css_building_blocks/11_values_units

11_values_units

dz / mdn / css / 1_css_building_blocks / 11_values_units

Summary

CSS Values and Units

Node Tree

Nodes

css_rules
content CSS Rules
children declarations

declarations
content Declarations
children props_and_values
parents css_rules

props_and_values
content Properties and Values
parents declarations

value_types
content Value Types
children position, unitless_numbers, collection_of_allowable_values, color, data_types (AKA), each_prop_has_value_type, image, numeric_types

each_prop_has_value_type
content Each property has a value type
parents value_types

data_types
content data types
parents value_types

collection_of_allowable_values
content A way to define a collection of allowable values
parents value_types

numeric_types
content Numeric types
children percentage, dimension, integer, number
parents value_types

integer
content <integer>
parents numeric_types

number
content <number>
parents numeric_types

dimension
content <dimension>
children length
parents numeric_types

percentage
content <percentage>
parents numeric_types

length
content <length>
children relative, absolute
parents dimension

absolute
content absolute
parents length

relative
content relative
children percentages, ems_rems, lh_rlh
parents length

ems_rems
content ems and rems
children lh_rlh (related)
parents relative

lh_rlh
content lh and rlh
parents ems_rems, relative

percentages
content percentages
parents relative

unitless_numbers
content unitless numbers
children opacity (example)
parents value_types

opacity
content opacity (0-1)
parents unitless_numbers

color
content Color
children rgb_rgba_vals, color_keywords, hex_rgb_vals, hue, other_color_funcs
parents value_types

color_keywords
content Color Keywords
children human_readable_text_value (description), keywords_are_identifiers, named_colors (AKA)
parents color

named_colors
content Named Colors
parents color_keywords

human_readable_text_value
content Human-readable text value
parents color_keywords

hex_rgb_vals
content Hexadecimal RGB Values
parents color

rgb_rgba_vals
content RGB/RGBA Values
children older_rgb_no_fourth_param
parents color

hue
content <hue>
children angle_specified, hsl
parents color

older_rgb_no_fourth_param
content Older versions of rgb() didn't take fourth parameter, used rgba() instead
parents rgb_rgba_vals

angle_specified
content Specified in <angle>
parents hue

hsl
content hsl()
parents hue

other_color_funcs
content Other color functions: hwb(), lch(), lab()
parents color

image
content <image>
children gradient, image_url
parents value_types

image_url
content (actual) image via url
parents image

gradient
content Gradient
parents image

position
content <position>
children position_keywords, 2d_coords_set (description), default_to_center
parents value_types

2d_coords_set
content Set of 2d coordinates
parents position

default_to_center
content If only one axis specified, the other value defaults to center
parents position, position_keywords

position_keywords
content Keywords: top, left, bottom, right, center
children default_to_center ("center" is a position keyword), keywords_are_identifiers
parents position
remarks The order these guides mention directions is consistently in cardinal-clockwise order

keywords_are_identifiers
content Keywords are more accurately described as identifiers
children not_quoted_not_strings
parents color_keywords, position_keywords

not_quoted_not_strings
content Not quoted, not strings
parents keywords_are_identifiers

functions
content functions
children transform_functions, math_funcs, more_color_funcs (example)

more_color_funcs
content rgb(), hsl()
parents functions

transform_functions
content Transform Functions: common way to move, rotate, and scale elements on a page
parents functions

math_funcs
content Math Functions
children calc, exponential_funcs, min_max_clamp
parents functions

exponential_funcs
content Exponential Functions
parents math_funcs

calc
content calc()
parents math_funcs

min_max_clamp
content min(), max(), clamp(): pick smallest, largest, and middle value from set of values
parents math_funcs

trig_funcs
content trig functions: sin(), cos(), tan()