Difference between font-size and font-weight

HTML-CSS
1

I have a doubt, what is the difference between font-size and font-weight in CSS?

Best regards.

Your code so far


<style>
h1 {
  font-weight: 800;

}
h2 {
  font-weight: 600;

}
h3 {
  font-weight: 500;

}
h4 {
  font-weight: 400;

}
h5 {
  font-weight: 300;

}
h6 {
  font-weight: 200;

}
</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>
<h3>This is h3 text</h3>
<h4>This is h4 text</h4>
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36.

Challenge: Set the font-weight for Multiple Heading Elements

Link to the challenge:

2

Font size is the size of your font it can 11 px, 50px etc.
Font weight is whether you want to bold it or not.

3

Hi namitamaru, thank you for your reply. Please check the link to the challenge. The font is resized, for that reason I’m confused.

Thank you again.

4

Hello @nelaruizc,
that’s because you have <h1> <h2> <h3> <h4> tags…
And by default, html sets a font-size to those tags!
If you set all your tags to <h1> and change the font-weight of each one, you will see they will be of the same size!
Cheers

5

Maybe because you havent inserted the value to it for example, 300 px or 300 em.
Hope it helps.

6

You’re right. Thank you so much. :grinning:

2 Likes