Q1. How can I increase heading tags by one if I am looking for a specific font-size
Q2. Can we use semantic html tags like <section>, <article> when trying to style elements. Or only when they contain tags
Thanks for checking my solution! Have a great day ✨
Question 1) In your css I note you have set the color & font-weight for all of your header tags. There is nothing stopping your selecting those elements again. i.e. you can additionally have:
h1 {
font-size: 20px;
}
h4 {
font-size: 18x;
}
Multiple selections of the same element (or class, or id) will only cause a problem if they aim to set the same css property (in which case specificity and order declaration will decide which value wins).
Question 2) Yes you can select by section. In your example you are selecting by an #id selector, which has the highest specificity. So it's hard to affect any change in your exact solution by going section {color: red;} for example. Something like section {margin: 400px;} will cause a scroll-box.
Although you could select by <section>, it is better to select by class (sometimes id) and not by elements. Consider a larger site (which this page will be part of), general elements will be re-used heavily. On different pages <main>, <section>s, etc., will have different styling requirements. Thus it's better to have <section class="payment-plan">. This also helps your CSS readability, if you select by the CSS class .payment-plan then it's easy to imagine what it's influencing in the HTML. If in the CSS you select by section, well that's hardly descriptive, it could be anything.
Feedback is welcomed.
Nice. I did not realise you can inline an svg into html. Interesting, I guess the advantage there is you save a network call.
If wished you could also reference the svg files from within the html file, which makes it more readable.
Thus the svg element could be replaced with: <img src="./images/illustration-hero.svg">
