In CSS How to Change Font Size of H1 and H2

In CSS how do you change font size of h1 and h2

h1 {
  font-weight: bold;
  color: #fff;
  font-size: 32px;
}

h2 {
  font-weight: bold;
  color: #fff;
  font-size: 24px;
}

Note that after color you can use a word (e.g. white), a hex code (e.g. #fff) or RGB (e.g. rgb(255,255,255)) or RGBA (e.g. rgba(255,255,255,0.3)).

Same font size for h1 and h2 in article

This is by design for <h1> tag to be behave like this i.e. size reduce specially for <article>, <aside>, <nav>, <section> and it will keep on decreasing as structure will become more deep i.e. <article> inside <article> inside <article> then size at each level will reduce.

Below is demo:

<!DOCTYPE html><html>
<head>  <title>Headings</title>  <meta charset="utf-8"></head>
<body>  <span>Default</span>  <h1>This is h1.</h1>  <h2>This is h2.</h2>  <h3>This is h3.</h3>  <h4>This is h4.</h4>  <h5>This is h5.</h5>  <h6>This is h6.</h6>  <hr>  <article>    <span>One level inside article tag</span>
    <h1>This is h1.</h1>    <h2>This is h2.</h2>    <h3>This is h3.</h3>    <h4>This is h4.</h4>    <h5>This is h5.</h5>    <h6>This is h6.</h6>    <hr>    <article>      <span>Two level inside article tag</span>
      <h1>This is h1.</h1>      <h2>This is h2.</h2>      <h3>This is h3.</h3>      <h4>This is h4.</h4>      <h5>This is h5.</h5>      <h6>This is h6.</h6>      <hr>      <article>        <span>Three level inside article tag</span>
        <h1>This is h1.</h1>        <h2>This is h2.</h2>        <h3>This is h3.</h3>        <h4>This is h4.</h4>        <h5>This is h5.</h5>        <h6>This is h6.</h6>        <hr>      </article>    </article>
  </article></body>
</html>

Can I give the same font size for H1 and H2

You should never use any Heading tags for text body, it should only be used for headings. It's about semantics.

H1 means it's a top-level heading. H2 will be sub to a H1 etc.

If you want to have bigger font you use CSS to change the size of your paragraphs or create classes that you can apply to any element that need larger fonts.

If you need a certain size in a slider or any other element, just attach a class to it and style the correct elements.

With that said... you can of course make anything any size you like, but then you better forget validation since it's bad practice.

Changing font-size of h1/h2/h3 with button on my website (Using local storage)

Let's suppose these are your html header tags:

<h1>Some text here</h1>
<h2>Some text here</h2>
<h3>Some text here</h3>

And this is the CSS:

h1 {
  font-size: 4em;
}

h2 {
  font-size: 3em;
}

h3 {
  font-size: 2em;
}

Then, if you want to store these CSS settings in the browser's local storage, use this javascript:

var h1font = document.querySelector('h1').style.fontSize;
var h2font = document.querySelector('h2').style.fontSize;
var h3font = document.querySelector('h3').style.fontSize;

localStorage.setItem("h1font", h1font);
localStorage.setItem("h2font", h2font);
localStorage.setItem("h3font", h3font);

How to change font size h1 - h6 with button using javascript?

This kind of thing is already provided for in the CSS specifications, it is the relative units.
here you have to use em unit, --> all font- sizes will be relative to their parent

doc : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

sample code:

function set_font_size_big(test)
  {
  document.querySelectorAll('.main_container').forEach( el =>
    el.classList.toggle('big',test))
  }

.main_container      { font-size  : 16px;  }
.main_container.big  { font-size  : 18px;  }

.main_container > h1 { font-size: 1.95em; }
.main_container > h2 { font-size: 1.56em; }
.main_container > h3 { font-size: 1.25em; }
.main_container > h4 { font-size: 1em;    }
.main_container > h5 { font-size: 0.8em;  }
.main_container > h6 { font-size: 0.64em; }

<button onclick="set_font_size_big(false)"> normal (16px) </button>
<button onclick="set_font_size_big(true)"> big (18px) </button>

<div class="main_container">
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

The 'h1' tag is not changing its font size despite a value in CSS

Nenad Milosavljevic's answer is right, and I am just adding an explanation.

You might be having a CSS file in your HTML file which is overriding your internal CSS. To override that one, you need to put !important to your properties.

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem !important;
    Line-height: 1.5;
}

Setting font-size for all text except h1 h2 etc

Use the :not selector with those "unwanted" elements:

.mybox *:not(h1):not(h2):not(h3) {  font-size: 13px;}

<div class="mybox">  <h1>foo</h1>  <h2>bar</h2>  <h3>Hans</h3>  <label>Gruber</label>  <p>Goku</p>  <div>Yoda</div></div>

Will the font size change depending on what heading I use (h1,h2,h3) if I use css to change it to a certain font size

h1{  font-size: 30px;}h2{  font-size: 30px;}

<h1> This is text</h1><h2> This is also text</h2>

body font size doesn't affect h tags

In Chrome at least, the font size for h1 etc. is defined as 2em. Therefore, it will be a multiple of whatever font size is in effect on an ancestor, including the body.

<div style="font-size: 200%; ">  <h1>This is h1.</h1>  <h2>This is h2.</h2>  <p>This is p.</p></div>