TIL about inline CSS in html... and went down a rabbit hole

Not much happening today, but I got curious about how web browsers read html and CSS under the hood...

This spring I went through FreeCodeCamp's "Responsive Web Design" module, learning about html and CSS for the first time. They guided me straight to "the right way" of setting up an external stylesheet.

For TechPrep 2.0, one of the module is to go through Codecademy introduction to CSS. Although they say right away that this is not necessarily useful, I learned that I could inject CSS code straight into an html page.

Which got me thinking: "is html and CSS just the same language?"

I asked GP-TA, whose response was:

Yes, HTML and CSS are indeed two distinct languages, each with their own syntax, rules, and purposes.
HTML (HyperText Markup Language) is a markup language used for creating the structure and content of a webpage. It consists of various elements or tags that represent different types of content - headings, paragraphs, links, images, etc.
CSS (Cascading Style Sheets), on the other hand, is a style sheet language used for describing the look and formatting of a document written in HTML. It deals with the presentation aspects like layout, colors, fonts, etc.
The fact that you can write CSS inline within an HTML document doesn’t make them the same language. It’s just a way to apply CSS styles directly to HTML elements. However, it’s generally recommended to separate your CSS into its own file or at least in a style tag in the head of the document to keep styles separate from content, which makes your code more maintainable and easier to understand.
In other words, HTML and CSS work together to create a complete web page, but they have different roles and are distinct languages.

Fair enough, but not entirely convinced.

This led me down a rabbit hole of googling how computers interpret html and CSS on a lower level...

Which led me to the concept of DOM trees. DOM stands for "Document Object Model". I think it has to do with how a web browser first reads through html code to understand the relationship and hierarchy within it. But it is getting late here and I am not reinventing the internet tonight...

A DOM tree

Edit: I kept on reading. Turns out, there is a sister tree, the CSSOM (CSS Objet Model)(and then I think also more trees for Javascript???). And then the browser processes a render tree (so at this point it's basically a forest) which is basically how the trees are related to each other [insert mindblown emoji].