HTML Code:
    <header>
        <h1>CSS COLORS</h1>
    </header>
    <main>
        <article>
            <h2>Article 1</h2>
        </article>
    </main>
    <footer>
        <p><small> No Copyright</small></p>
    </footer>

CSS CODE:
body{
    font-size: 30px;
    line-height: 1.5;
}

The issue is font-size of h1 is 60px,h2 is of 45px and footer is of 25px.Can please someone explain this to me as why size gets increased?

I also tried to change font-size but still it gets increasing;but when i set “font-size:20px” inside body then h1 is of 2em and h2 is of 1.5em default values .Now when I changed it to 30px it gets incresaed more