A remark on the two diagrams following “Then the CSS is parsed and browser creates the CSSOM (CSS Object Model)”: they show body as the root, but would be more accurate if they showed html as be the root and head as hidden by `display: none`.

Consider this style rule set which does just what it looks like:

  head,
  title,
  style,
  script {
    display: block;
  }