¿Cuál es la diferencia del id y las clases?¿En qué momentos se debe usar el ID en css?

Hola @JekaBernal7 los ID's deben ser únicos e irrepetibles en tu archivo html, las clases si las puedes nombres n numero de veces. Por ejemplo en tu código en tu lista numerada tus <li> todos tienen el mismo ID esto NO se debe hacer

Hola. He hecho este código y no sé si ID y Class están utilizadas correctamente.

Si pudieran retroalimentarme, se los agradecería!

El id es un identificador único, las clase puede existir n numero de veces, puedes utilizar el id en css cuando tu quieras pero imagina que usas un id para cada elemento tu archivo css sería enorme y esto hace que tu código sea repetitivo muchas veces , no esta prohibido pero no es recomendable, con las clases no pasa eso ya que puedes agrupar varios elementos que les puedes poner los mismos estilos, tu código queda más claro y más limpio.

Te lo explico con un ejemplo: Tienes un conjunto de cajas, a las cuales quieres tener un estilo general (tamaño, margin, padding), pero quieres que cada una tenga un background distinto, ¿cómo haces?, pues asignas la misma clase a todas, pero un ID diferenciado a cada una:

Así sería tu HTML:

    <div class="container">
        <div class="box" id="box1"></div>
        <div class="box" id="box2"></div>
        <div class="box" id="box3"></div>
    </div>

Y respecto al CSS sería así:

.box {
    display: inline-block;
    height: 120px;
    width: 120px;
    border-radius: 12px;
    color: white;
}
#box1 {
    background-color: green;
}
#box2 {
    background-color: yellow;
}
#box3 {
    background-color: black;
}

Así ahorras código, y además te permite luego usar javascript más fácil.

Las clases las utilizas para identificar uno o más elementos, puedes tener varias etiquetas HTML con la misma clase, en este caso la usar normalmente para agregar estilos en común a esos elementos. El ID es un identificador único que debe estar presente una sola vez en un documento HTML, esto quiere decir, que no puedes tener un ID más de una vez por documento, este lo usas normalmente en Javascript. En CSS no es muy recomendable usar ID porque la idea es que tengas estilos reutilizables, sin embargo, puedes usarlo cuando tendrás un estilo único.

Cuando se quiere agregar estilos, lo más recomendable es utilizar clases. Es lo que suele hacerse más en la industria.

Agregar ID a elementos es más común para interactuar con ellos en JavaScript con

Hola Carlos,

La clase la utilizamos para un conjunto de elementos. El id a un solo elemento.

No debería existir otro elemento con el mismo identificador en el documento HTML.

Te muestro un ejemplo práctico:

 <p class="margin" id="text">Texto 1</p>
    <p class="margin">Texto 2</p>
    <p class="margin">Texto 3</p>
    <p class="margin">Texto 4</p>
    <p class="margin">Texto 5</p>

.class {
  margin-top: 5px;
}

#text {
  font-size: 2rem;
  color: blue;
}

Todos los párrafos tienen una clase que les da un margin-top de 5 px pero solo existe uno que tiene un tamaño de 2 rem y que es azul.