Semantic implementation of the structure of a web page with header, main, and footer
I myself am also a beginner in the world of web development (So any comments about my answer are more than welcome!)
But maybe my tips can still be useful in one way or another. ;-}
The first thing that came to mind is your header and footer element question about grouping them together that way in CSS because they have things in common...My short answer is no, I would change my HTML element for these, or better said, add a class or id attribute, and group it together this way.
Example:
 &lt;header class = &quot;topAndBottom&quot;&gt;.....&lt;/header&gt;
         &lt;footer class = &quot;topAndBottom&quot;&gt;.....&lt;/footer&gt;

CSS example:
 .header, topAndBottom {
.......
}

I personally prefer the class attribute over the id, because you can use it more often in your HTML, the id attribute is once or maybe twice acceptable in your HTML(Not my rules)
Or you can only style your &lt;h1&gt; inside your header and the &lt;h3&gt; inside your footer, I would recommend this if it is mainly text that you want to style.
And one tiny comment about the order in your CSS, and this is purely personal, but maintain the order from your HTML in your CSS for better reading, especially when your code will be more advanced and complex.
Good luck with your learning for web development! I started also not long ago and I am addicted!