El atributo “id” es similar a class (Permite llamar desde un elemento a un código CSS) con la diferencia de que el atributo id solo puede aplicarse a un elemento, no a tantos como quisiéramos, como se hacía con el atributo class.
Es decir, el atributo ID sirve para identificar un elemento, y solo debe usarse para identificar un único elemento, si queremos que pertenezcan a varios elementos entonces debemos usar las clases. Se podría decir que las clases son para grupos. Con el atributo ID también se puede dirigir al visitante a un punto de la página (texto).
Un uso incorrecto de las clases sería definir las clases para un único elemento, porque se puede utilizar #ID para este propósito. Por ejemplo, cuando debemos identificar una única cabecera (class=”header”).
Un uso incorrecto de los #ID´s es definir los estilos de cada elemento de forma individual en lugar de agrupar todos los estilos que sean comunes y aplicarlos por clases.
Un ejemplo con el atributo id sería este:
<div id="elegante"> Soy un simple texto en un div. </div>
El código CSS para efectuar el estilo del id sería este:
#elegante{
width: 90%;
padding: 10px;
border: 2px dashed #CCC;
background: white;
}
¡ATENCIÓN! Si te fijas, hemos puesto una almohadilla (#elegante) en vez de un punto (.elegante) como hacíamos con el atributo class, esta es otra de las diferencias respecto al otro atributo.
