mdn/css/0_css_first_steps/2_how_css_is_structured

2_how_css_is_structured

dz / mdn / css / 0_css_first_steps / 2_how_css_is_structured

Summary

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