mdn/css/2_css_styling_text/0_fundamental_text_and_font_styling

0_fundamental_text_and_font_styling

dz / mdn / css / 2_css_styling_text / 0_fundamental_text_and_font_styling

Summary

Fundamental text and font styling

Node Tree

Nodes

text_styling
content Text Styling
children font_styles, text_layout_styles

text_layout_styles
content Text Layout Styles
parents text_styling

font_styles
content Font Styles
children color, font_family, font_size
parents text_styling

color
content Color
parents font_styles

font_family
content font-family
children font_stack, web_safe_fonts
parents font_styles

web_safe_fonts
content Web Safe Fonts: fonts generally available across all systems
children default_fonts
parents font_family

default_fonts
content Default Fonts: serif, sans-serif, monospace, cursive, fantasy
children worst_case_scenario
parents web_safe_fonts

worst_case_scenario
content Worst-case scenario
parents default_fonts

font_stack
content Font Stack: font-family consisting of multiple names, that browser can choose from if availablity isn't guaranteed.
parents font_family

font_size
content Font Size
children 16px_default, font_size_units
parents font_styles

font_size_units
content px: pixels high, em: font size of parent element, rem: font size of root element
children 16px_default, rem_keeps_it_simple
parents font_size

16px_default
content 16px by default in root element
parents font_size_units, font_size

rem_keeps_it_simple
content Use rem to keep things simple
parents font_size_units

visual_weight_emphasis_text
content Visual weight/emphasis of text
children font_style, font_weight, text_decoration, text_transform

font_style
content font-style: normal, italic, oblique
parents visual_weight_emphasis_text

font_weight
content font-weight: normal, bold, lighter, bolder, 100-900
parents visual_weight_emphasis_text

text_transform
content text-transform: none, uppercase, lowercase, capitalize, full-width
parents visual_weight_emphasis_text

text_decoration
content text decoration: none, underline, overline, line-through
parents visual_weight_emphasis_text

text_drop_shadows
content text drop shadows
children text_shadow

text_shadow
content text-shadow
children multi_shadow_commas, text_shadow_params
parents text_drop_shadows

text_shadow_params
content text shadow params (4 params): horizontal/vertical offset, blur radius, base color
parents text_shadow

multi_shadow_commas
content Multi-shadows separated with commas
parents text_shadow

text_layout
content text layout
children letter_spacing_word_spacing, text_align, text_alignment

text_alignment
content text alignment
children line_height, text_align
parents text_layout

text_align
content text-align: left, right, center, justify
children justify_with_hyphens (justify)
parents text_layout, text_alignment

justify_with_hyphens
content Use justify with "hyphens" to break longer words across lines
parents text_align

line_height
content line-height
parents text_alignment

letter_spacing_word_spacing
content letter-spacing and word-spacing
parents text_layout

other_styles
content Other styles: font-variant, font-kerning, font-feature-settings, font-variant-alternates font-variant-caps, font-variant-east-asians, font-variant-ligatures

other_layout
content Other layout properties: text-indent, text-overflow, white-space, word-break, direction, hyphens, line-break, line-break, text-align-last, text-orientation, overflow-wrap, writing-mode

font_shorthand_order
content "font" shorthand order: font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family