How to format JQuery output to top of page and style with CSS

First, you should always wrap your jQuery in the following to have it execute once all of the HTML has been loaded:

$(document).ready(function() {
  // all of your jQuery
}

To apply a single CSS attribute, you can use:

$("#jquerytarget").css("background-color", "red");

To apply multiple CSS attributes:

$("#jquerytarget").css({"background-color": "red", "color": "yellow", ...});

A better way to do this is to write your CSS in your stylesheet and then use addClass, removeClass, or toggleClass:

// Adds myClass to the target element
$("$jquerytoggle").addClass("myClass");

// Removes myClass from the target element
$("$jquerytoggle").removeClass("myClass");

// Removes myClass if it is assigned already, or adds it if it doesn't (toggles)
$("$jquerytoggle").toggleClass("myClass");

Answer for problem 01

If you want to load the HTML first and then run the JavaScript code, you have to wrap your code as follows.

document.addEventListener("DOMContentLoaded", function(event) { 
  // write your code here
});

Your code should be enclosed by the event handler function. An event handler function (or callback) must be registered on the element that emits the event, in our case, the document object.

Answer for problem 02

You can set CSS properties to the elements as follows. In the following code snippet, I am going to change the background color of the <p> elements upon clicking the button.

<p>Paragraph 01</p>
<p>Paragraph 02</p>
<p>Paragraph 03</p>

<button>Change background color of all Paragraphs</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $("button").click(function() {
      $("p").css("background-color", "yellow");
    });
  });
</script>

If you want to assign specific CSS properties to specific classes, you can try the following. The background color of "paragraph 2" can be changed upon clicking the button. I have selected the elements based on theirs 'id's.

<p id="para-01">Paragraph 01</p>
<p id="para-02">Paragraph 02</p>

<button id="addBackgroundChange">Add background color of Paragraph 1</button>
<button id="removeBackgroundChange">Remove background color of Paragraph 1</button>
<button id="toggleBackgroundChange">toggle background color of Paragraph 2</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

  // to add a class (the background color)
  $(document).ready(function() {
    $("#addBackgroundChange").click(function() {
      $("#para-01").addClass("new-para-background");
    });
  });

  // to remove a class (the background color)
  $(document).ready(function() {
    $("#removeBackgroundChange").click(function() {
      $("#para-01").removeClass("new-para-background");
    });
  });

  // to toggle a class (the background color)
  $(document).ready(function() {
    $("#toggleBackgroundChange").click(function() {
      $("#para-02").toggleClass("new-para-background");
    });
  });
</script>

<style>
  .new-para-background {
    background-color: yellow;
  }
  
</style>