11_values_units

dz / mdn / css / 1_css_building_blocks / 11_values_units

Summary

CSS Values and Units

Node Tree

• functions
  • math_funcs
    • exponential_funcs
    • min_max_clamp
    • calc
  • more_color_funcs
  • transform_functions
• trig_funcs
• value_types
  • each_prop_has_value_type
  • image
    • gradient
    • image_url
  • numeric_types
    • dimension
      • length
        • relative
          • ems_rems
            • lh_rlh
          • lh_rlh
          • percentages
        • absolute
    • integer
    • number
    • percentage
  • position
    • position_keywords
      • keywords_are_identifiers
        • not_quoted_not_strings
      • default_to_center
    • 2d_coords_set
    • default_to_center
  • unitless_numbers
    • opacity
  • collection_of_allowable_values
  • color
    • hex_rgb_vals
    • hue
      • hsl
      • angle_specified
    • other_color_funcs
    • rgb_rgba_vals
      • older_rgb_no_fourth_param
    • color_keywords
      • human_readable_text_value
      • keywords_are_identifiers
        • not_quoted_not_strings
      • named_colors
  • data_types
• css_rules
  • declarations
    • props_and_values

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	each_prop_has_value_type, image, numeric_types, position, unitless_numbers, collection_of_allowable_values, color, data_types (AKA)

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	dimension, integer, number, percentage
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	ems_rems, lh_rlh, percentages
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	hex_rgb_vals, hue, other_color_funcs, rgb_rgba_vals, color_keywords
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	hsl, angle_specified
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	keywords_are_identifiers, default_to_center ("center" is a position keyword)
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	math_funcs, more_color_funcs (example), transform_functions

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	exponential_funcs, min_max_clamp, calc
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()