0_fundamental_text_and_font_styling
dz / mdn / css / 2_css_styling_text / 0_fundamental_text_and_font_stylingSummary
Fundamental text and font styling
Node Tree
- font_shorthand_order
- other_layout
- other_styles
- text_drop_shadows
- text_layout
- text_styling
- visual_weight_emphasis_text
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 |