How do you know when to appropriately use a class vs an id when writing html and CSS?

You're right on Kahlia, and this is a good question. I think it's best to look at what are best practices.

Generally, classes get used for styling. Even if you think you'll only use the class once, it still leaves you the option to be reused in a document, when that unforeseen change happens. It's also helpful to use a class as you can use multiple classes on a single element, but a single element can only have one id. This allows you're CSS code to remain DRY (don't repeat yourself) as you can separate bits and pieces into reusable "modules" of CSS

There is one other important piece not many people mention. CSS specificity, and the joking (not really) referred to CSS specificity hell. And ID, by nature is worth 100 specificity points, and a class is only worth 10, as you can see, it can take 10 classes to match the specificity of one id. This becomes a problem as a website grows, and you think your class should override an ID style, but it won't because of CSS specificity. By keeping your classes in styles, not IDs, you help keep specificity low (the goal) and you make sure most selectors are on the same level playing field.

https://css-tricks.com/specifics-on-css-specificity/

All of that to say, generally in my HTML, an ID on an element does something. It's a Javascript hook, it has an animation or transformation attached to it, while you can guess my classes are going to contain the structural, and presentation CSS styles. And that's pretty general for most all sites and frameworks.

With classes you can attach styles and/or functionality to any html elememt you like.

For example using a class is an excellent way to attach a clearfix so you could clear a float.

.clearfix::after {
  display: table;
  content: "";
  clear: both;

}

which could go on a html element

<div class="clearfix">This is a div</div>

You'd me more likely to use an idea if you're going to use a style only one. This is purely personal preference but I generally use an id to create a wrapper div element for a website interface.

You can give an element any number of classes, separated by a space but you can only give an element one id for one particular element at a time. :)