Diferencias entre Class y ID - Ejemplo de uso en HTML y CSS

Puedes definir sus propios selectores en forma de selectores de clase e ID.

El beneficio de esto es que puede tener el mismo elemento HTML, pero presentarlo de manera diferente según su clase o ID.

En el CSS, un selector de clase es un nombre precedido por un punto (".") Y un selector de ID es un nombre precedido por un carácter hash ("#").

Entonces, el CSS podría verse algo así como:

#top {
    background-color: #ccc;
    padding: 20px
}

.intro {
    color: red;
    font-weight: bold;
}

El HTML se refiere al CSS utilizando los atributos idy class. Podría verse más o menos así:

<div id="top">
	<h1>Cerry de chocolate</h1>
	<p class="intro">Esta es mi receta para hacer curry con chocolate</p>
	<p class="intro">Mmm mm mmmmm</p>
</div>

La diferencia entre una ID y una clase es que una ID se puede usar para identificar un solo elemento, mientras que una clase se puede usar para agrupar más de uno.

También puede aplicar un selector a un elemento HTML específico simplemente indicando primero el selector HTML, por p.mermelada { /* lo que sea */ } lo que solo se aplicará a los elementos de párrafo que tengan la clase "memelada".