Fonts
Typography is how text looks. With no CSS, the browser uses its defaults: a serif font, often Times New Roman, at 16px. Its own style makes the heading bold and twice as big, 32px.
The first rule styles body. font-family picks the typeface, the design of the letters. Its value is a list of fonts separated by commas, called a font stack. It may run over two lines.
The browser tries the stack in order. This computer has no font called Inter, so it moves on. It does have Arial, so Arial is used. sans-serif, a generic family, would always work as a last resort.
Inheritance
The rule picks body, yet the heading and paragraph change too. font-family is inherited: an element with no value of its own copies its parent's. h1 and p sit inside body, so both become Arial.
Size, spacing, alignment
body gets font-size: 18px, and p inherits 18px. The heading keeps the browser's own font-size: 2em. An em is the parent's font size, so 2em is now 2 × 18 = 36px, not 32px.
line-height sets how tall each line is. A plain number multiplies the font size: 1.5 × 18 = 27px, so the paragraph's lines move apart. h1 inherits the number 1.5, so its line is 1.5 × 36 = 54px.
The second rule, h1, holds text-align: center. Its selector matches only the heading, so only the heading moves to the middle of its line. The paragraph keeps the default and stays on the left.
The finished heading mixes three sources. Arial and line-height 1.5 are inherited from body. Bold and 2em come from the browser's own style. Center is its own rule. A value set on the element beats one inherited.
What happens
;; step 1/8 · defaults
index.html: body holds h1 and p
no CSS yet: the browser's own defaults
p Times New Roman (serif), 16px
h1 Times New Roman (serif), 32px, bold
line height "normal", about 1.15 × size
h1 font-size: 2em = 2 × 16px = 32px
serif fonts have small feet on the letters
A real browser applies every declaration at once while it works out each element's style. The figure applies them one at a time, and shows the font switch only when it reaches the elements, so you can see what each step does. The figure's computer has Arial, Georgia and Times New Roman and no Inter. Real computers differ, which is why a stack ends with a generic family. A page can also download a font with @font-face, a later topic.