Ver entrada completa. Diferencias entre Class e ID

Leer también Elementos span y div.

La principal diferencia entre utilizar un identificador o una clase para definir un estilo es que mediante un ID estamos identificando algún elemento de la página de forma única y por tanto sólo lo podemos utilizarlo con ese elemento. Esto se suele hacer porque luego posiblemente querremos realizar alguna acción sobre ese elemento.

Mientras que con una clase estamos definiendo un estilo genérico que luego podremos utilizar sobre cualquier elemento del HTML.

Class:

Los class se definen utilizando el signo "." seguido por el nombre del identificador y luego las propiedades del estilo.

Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a cualquier selector HTML o elemento de la página.

El estilo definido en una clase no está vinculado a una etiqueta o elemento concreto sino a una 'clase', y esta clase se puede anudar a cualquier etiqueta HTML o grupo de ellas.

Por ejemplo:

.Piepagina {
font-size:small;
}

La clase "piepagina" (definida en la cabecera de la pagina o en archivo externo) puede usarse con cualquier elemento, y visualizara con tipo de letra pequeña el texto al que afecte:

<p class="Piepagina">
<h1 class="Piepagina">
<div class="Piepagina">
<span class="Piepagina">

La clase así definida puede usarse en cualquier elemento o selector: en el primer caso, afectaría al texto dentro del párrafo; en el segundo, a la cabecera h1; en el tercero, a todo el bloque div (cualquiera que fueran las etiquetas que incluya); y en el cuarto, al bloque span.

Solo una clase se puede especificar a la vez para cada etiqueta HTML.

P.miclase.miotraclase

Sería inválido.

Pero si pueden establecerse clases separadas.


Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos:

h1.roja {font:15px; color:red;}

h1.verde {font:15x; color:green;}

h1.azul {font:15x; color: blue;}

Y usar una clase u otra en la Página así:

<h1 class="roja">Este es un encabezamiento rojo</h1>
...
<h1 class="azul">Este es azul </h1>
...
<h1 class="verde">Y este .... verde</h1>

Cuando aplicamos una sintaxis del estilo elementohtml.clase esa regla de estilo solo se aplicará a ese elemento html que tenga asignada esta clase.

Selector ID:

Los ID se definen utilizando el signo "#" seguido por el nombre del identificador y luego las propiedades del estilo.

Mediante el atributo id podemos establecer una identidad única para un único elemento de la página.

La sintaxis html sería por ejemplo, donde especificamos la identidad  "menu" para ese único párrafo.

Al elemento html pueden asignarsele estilos a través del selector id:

#menu {estilos ...}

o bien

p#menu {estilos ...}

Los selectores contextuales pueden buscar tipos de elementos, atributos CLASS, atributos ID o combinaciones de éstos:

DIV P { font: small sans-serif }
.rojizo H1 { color: red }
#x78y CODE { background: blue }
DIV.notaalmargen H1 { font-size: large }

El primer selector corresponde a todos los elementos 'P' que tengan a un 'DIV' entre sus ascendientes.
El segundo selector corresponde a todos los elementos 'H1' que tengan un ascendiente de clase 'rojizo'.
El tercer selector corresponde a todos los elementos 'CODE' que sean descendientes del elemento de 'ID=x78y'.
El cuarto selector corresponde a todos los elementos 'H1' que tengan un ascendiente 'DIV' de clase 'notaalmargen'.

Los selectores contextuales también se pueden agrupar con una coma:

H1 B, H2 B, H1 EM, H2 EM { color: red }

Que es equivalente a:

H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }

Vía: