Set the font-size for Multiple Heading Elements in the same font size

HTML-CSS
1

Tell us what’s happening:
Hi everyone,
I already know the solution of the challenge,

But what is I don’t understand is:

If we change the the code as below, and give the h1 and h6 classes same font size, they display in the same size, but I thought h1 must be bigger than h6 even in the same font size.
Please guide me.

Your code so far


<style>
  h1{
    font-size: 68px;
  }
  
  h6{
    font-size: 68px;
  }
  
</style>
<h1>This is h1 text</h1>
<h6>This is h6 text</h6>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements

2

It’s the default size of h1 and h6 that makes h1 bigger than h6.

But if you modify that default size and make h1's size equal to h6's size, then h1 will be the same size as h6.

Notes:

  1. The default size is already set and it’s not visible in the html.
  2. Setting the size of h1 or h6, means you are overwriting their default size and replacing it with a customized one.
1 Like
3

Adding to what @clevious said, h1-h6 actually show the hierarchy of sections in an HTML page. The size you see is just because of the default CSS. The actual purpose is to give headings in your page a semantic meaning. This is particularly helpful with screen readers as it helps to identify that h1 is a main heading, h2 subheading and so on

You would learn about this topic in applied accessibility section, give it a quick read and you would understand its concept better.
https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content/

1 Like
4

Thanks.
It was very helpful.

1 Like
5

Thanks a lot.
very hepful!

6

You’re welcome.

Good Luck & Happy Coding.