If I change the font size of the body and there is a <h1> and <p> in the body, what actually happens to their sizes?

Setting the font-size in the body will set the font-size for the overall page. However, the default browser styles for elements like the h1 element you have described will take on those default styles unless you have otherwise specifically changed them in your own stylesheet.

Therefore, they will take no effect on whatever font-size value you set on the body element.

Why? Well, that's because of the CSS specificity (which you will learn about at the end of the CSS basics course) in the default browser stylesheets set. A css rule specifically targetting the h1 element like this:

h1 {
  font-size: 2em;
}

Is more specific than just:

body {
  font-size: 16px;
}

The h1 typically has a default font-size of 2em = to 32px.

By setting the font-size in the body element, you can use that as the base sizing for other elements. If you use the em unit, since the em unit is a multiplier, you can then go on to sizing other elements much easier than using fixed pixel sizes.

body {
  font-size: 1em; /* = 16px */
}

p {
  font-size: 1em; /* Sets the paragraphs to be 16px. */
  font-size: 2em; /* Sets the paragraphs to be 32px. */
}

It is therefore good practice to use em units for font-sizing since they are a relative unit and will scale across your projects.