2_how_css_is_structured
dz / mdn / css / 0_css_first_steps / 2_how_css_is_structuredSummary
How CSS is structured
Node Tree
Nodes
applying_css_html | |
content | Applying CSS to HTML |
children | stylesheet, inline_styles |
stylesheet | |
content | stylesheet |
children | internal_stylesheet, ext_stylesheet |
parents | applying_css_html |
ext_stylesheet | |
content | external stylesheet |
children | tag_link |
parents | stylesheet |
internal_stylesheet | |
content | internal stylesheet |
children | tag_head, tag_style |
parents | stylesheet |
inline_styles | |
content | Inline styles |
children | style_attribute |
parents | applying_css_html |
remarks | avoid this approach |
tag_link | |
content | <link> |
parents | mdn/html/elements, ext_stylesheet |
tag_style | |
content | <style> |
parents | internal_stylesheet, mdn/html/elements, tag_head |
tag_head | |
content | <head> |
children | tag_style |
parents | internal_stylesheet, mdn/html/elements |
style_attribute | |
content | style attribute |
parents | inline_styles |
selector | |
content | selector |
children | specificity, cascade, css_rulesets |
specificity | |
content | Specificity |
children | rules_event_of_conflict |
parents | selector |
cascade | |
content | cascade |
children | rules_event_of_conflict |
parents | selector |
rules_event_of_conflict | |
content | Rules to control which is stronger in the event of conflict |
parents | specificity, cascade |
props_vals | |
content | Properties and Values |
children | props, case_insensitive, vals, css_declaration |
props | |
content | Properties |
children | prop_names_no_whitespace, shorthand_properties, human_readable_identifiers (description) |
parents | props_vals |
vals | |
content | Values |
children | several_vals_single_line |
parents | props_vals |
human_readable_identifiers | |
content | Human Readable Identifiers, Which stylistic features to modify |
parents | props |
css_declaration | |
content | CSS declaration |
children | declaration_blocks |
parents | props_vals |
declaration_blocks | |
content | Declaration Blocks |
parents | css_declaration, css_rulesets |
css_rulesets | |
content | CSS rulesets |
children | declaration_blocks |
parents | selector |
case_insensitive | |
content | Case Insensitive |
parents | props_vals |
functions | |
content | Functions |
children | transform, calc |
calc | |
content | calc() |
parents | functions |
transform | |
content | transform |
children | rotate |
parents | functions |
rotate | |
content | rotate |
parents | transform |
at_rules | |
content | @rules |
children | at_rules_name (pronunciation), at_import (example,example), instruction_perform_behave (description) |
at_rules_name | |
content | "at rules" |
parents | at_rules |
instruction_perform_behave | |
content | Provides instruction for what CSS should perform or how it should behave |
parents | at_rules |
at_import | |
content | @import |
parents | at_rules |
at_media | |
content | @media |
children | media_rules |
media_rules | |
content | Media Rules |
parents | at_media |
shorthands | |
content | Shorthands |
children | omission_overrides (warning), several_vals_single_line, shorthand_properties |
several_vals_single_line | |
content | Several values in a single line |
parents | vals, shorthands |
shorthand_properties | |
content | Shorthand Properties |
parents | props, shorthands |
omission_overrides | |
content | An omission can override previously set values |
parents | shorthands |
comments | |
content | comments |
whitespace | |
content | whitespace |
children | prop_names_no_whitespace |
prop_names_no_whitespace | |
content | Property names never have any whitespace |
parents | whitespace, props |