Id es identificador, una especie de dni para las etiquetas (salvando las distancias)
Las clases seria algo asi como grupos o modas (para entendernos).
Los ID identifican UN unico elemento (si pones ID repetidas esta mal) asi puedes aprovechar dicho identificador para dirigir a un visitante a ese punto de la pagina (<a href="#ID">texto</a>) para trabajar con javascrip (get.element.by.id) para aplicar estilos exclusivos del elemento (#ID {estilos} ) y mas.
Una clase puede pertenecer a uno o mas elementos.
Un mal uso de las clases es por ejemplo definir clases para un unico elemento ya que se puede usar el #ID para tal fin (por ejemplo con una unica cabecera class="cabecera")
Un mal uso de los #ID´s es definir los estilos de cada elemento individualmente en lugar de agrupar los estilos comunes y aplicarlos por clases
Código:
#menu1 { color: red; font-size: 1.5em; text-decoration: none; }
#historia { color: red; font-size: 1.5em; text-decoration: none; }
#historia2 { color: red; font-size: 1.5em; text-decoration: none; }
#resumen { color: red; font-size: 1em; text-decoration: none; }
Como puedes ver todos los estilos son identicos excepto el ultimo que cambia el tamaño de la fuente.
Código:
.textorojo { color: red; font-size: 1.5em; text-decoration: none; }
#resumen { font-size: 1em; }
El efecto de este codigo es exactamente el mismo sin embargo es mucho mas liviano y comprensible, al compartir estilos los elementos comparten clase y se benefician (aparte de poder cambiarlo en grupo)
el elemento resumen al compartir la mayoria de los elementos tambien comparte clase pero para aplicarle un tamaño de letra distinto nos referimos exclusivamente a el por su #ID.