Why is the style of body not applied?

My HTML:

function ReverseString(Text) {
  var ReturnValue = "";
  for (var i = (Text.length - 1); i >= 0; i--) {
    ReturnValue += Text.at(i);
  }
  return ReturnValue;
}

function ReverseUserInput() {
  var Input = document.forms[0].elements[0].value;
  document.forms[0].elements[0].value = ReverseString(Input);
}

body {
  font-size: 14px;
}

<form>
  <textarea rows="4" cols="26" class=gross>Text</textarea>
  <input type="button" value="Reverse" onClick="ReverseUserInput()">
</form>

I apply CSS to body, but the CSS for body will not be applied.
Could somebody please explain why?

>Solution :

By default, on most browsers form fields don’t inherit their font settings from their parent like other elements do. To make them do that, you can use inherit for their font-size, etc. For instance, to apply an inherited font size to textarea, button, input, and select elements:

textarea, button, input, select {
    font-size: inherit;
}

Updated snippet:

function ReverseString(Text) {
  var ReturnValue = "";
  for (var i = (Text.length - 1); i >= 0; i--) {
    ReturnValue += Text.at(i);
  }
  return ReturnValue;
}

function ReverseUserInput() {
  var Input = document.forms[0].elements[0].value;
  document.forms[0].elements[0].value = ReverseString(Input);
}

body {
  font-size: 14px;
}
textarea, button, input, select {
  font-size: inherit;
}

<form>
  <textarea rows="4" cols="26" class=gross>Text</textarea>
  <input type="button" value="Reverse" onClick="ReverseUserInput()">
</form>

Or of course, explicitly set their font-size, perhaps in the same rule as the one you set for body:

body, textarea, button, input, select {
    font-size: 14px;
}