Why is the style of body not applied?

Issue

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;
}

Answered By - T.J. Crowder