A page is two things written in two languages. HTML says what the content is; CSS says how it should look. The confusion between them is the source of most layout trouble, because a developer reaching for CSS to describe meaning is fighting the wrong language.
About 2 min of reading
See the difference between meaning and style.
A heading by tag
Before you run it, say out loud what it will print. Then open the answer.
A heading by style only
Before you run it, say out loud what it will print. Then open the answer.
Write the HTML for the content, read it in the browser, and only then style it. A page with good structure and no CSS is readable, and that readable state is the thing you want to see before you start moving boxes.
A div that is a button is a bug. The element that already means button gives you the keyboard behaviour, the focus state, and the meaning for free. Reaching for a generic element to rebuild a real one is where accessibility quietly breaks.
A heading is a heading because it is marked as one, not because it is large. That marking is what a screen reader, a search engine, and your own later code all rely on. Style is separate.
CSS selects elements and describes how they look. It can change size, colour, and position, and it never changes what an element means. If you find yourself using CSS to say 'this is a heading', you have the wrong tool.
A CSS selector names HTML elements. That is the whole connection: HTML provides the things to point at, CSS points at them. When the two drift apart, the style silently stops applying, which is the most common bug in a stylesheet.