Cómo usar las Clases (class) e Id's (id) en CSS

IMAGEN.1http://www.campusmvp.es/recursos/post/clases-ids-css-cuando-como-usarlas.aspx

Algo que siempre causa alguna confusión cuando escribimos CSS es determinar si debemos aplicar esas definiciones como clases o IDs ¿Cuál es la diferencia?

Tanto una como otra sirven para identificar una etiqueta y, de ese modo, nos resulta más sencillo agregarle propiedades. Por ejemplo:

<style>
  #nombreID {color: red;}
  .nombreClase {color: blue;}
</style>

<div id="nombreID"> este texto será rojo </div>
<div class="nombreClase"> este texto será azul </div>

Para definir las propiedades de un ID le anteponemos el símbolo # al nombre y para definir una clase, usamos un punto.

Una regla elemental y que no debe violarse dice que sólo usaremos un ID si esa etiqueta es única, no debería haber dos etiquetas con el mismo ID en la misma página; en cambio, usaremos class si es un estilo que repetiremos en diferentes etiquetas.

Además, suele decirse que el atributo ID se utiliza para definir áreas específicas de una página (el header, el footer, un menú, etc) y una clase se usa para definir estilos de tipo general (enlaces, listas, etc).

Los ID nos permiten organizar el estilo e identificar etiquetas para luego manipularlas con JavaScript. Las clases, nos evitan escribir códigos repetidos y esa es su mayor utilidad.

Hay varias formas de implementarlas:

a.green {color: green;}

hará que los enlaces que contengan esa clase, se muestren de color verde:

<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo NO será de color verde </p>

En cambio, esta otra:

.green {color: green;}

hará que cualquier etiqueta que contengan esa clase, se muestren de color verde:

<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo también será de color verde </p>

Tanto las clases como los IDs pueden combinarse asi que no es extraño ver cosas como estas:

<div id="unNombre" class="unaClase"> ....... </div>

o bien: IDID IDclassID ID JavaScript.

IDs pueden combinarse asi que no es extraño ver cosas como estas:

<div id="unNombre" class=

<div class="unaClase otraClase"> ....... </div>

¿Para qué usamos ID y class juntas? Por ejemplo:

<style>
  .ejemploCSS {
    background-color: #000;
    border: 1px solid #CCC;
    float: left;
    height: 50px;
    margin-right: 10px;
    padding: 10px;
    width: 150px;
  }
  #ejemploCSS1 {color: white;}
  #ejemploCSS2 {color: yellow;}
  #ejemploCSS3 {color: red;}
</style>

Tenemos una clase donde hemos definido una serie de propiedades como fondo, bordes y tamaño que aplicaremos a un DIV así que, si colocamos tres, uno al lado del otro, se verán iguales. Ahora bien, le agregaremos un ID a cada uno de ellos para darles una propiedad exclusiva, el color del texto:

<div id="ejemploCSS1" class="ejemploCSS"> ... </div>
<div id="ejemploCSS2" class="ejemploCSS"> ... </div>
<div id="ejemploCSS3" class="ejemploCSS"> ... </div>

Se vería esto:

                          

IMAGEN.2http://vagabundia.blogspot.com/2009/04/css-sobre-ids-y-clases.html

                                                                                   

  ¿Y qué pasa si hay propiedades contradictorias? Por ejemplo, definimos el color de fondo tanto en la clase como en el ID ¿Cuál se verá? ¿será negro como dice la clase o variará como dicen los IDs?:

<style>
  .ejemploCSS {background-color: #000;}
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
</style>

Como se ve, el fondo será el del ID y el de la clase será ignorado.

IMAGEN.3http://vagabundia.blogspot.com/2009/04/css-sobre-ids-y-clases.html

Claro, uno puede decir, lo que ocurre es que, primero le decimos que es negro y luego le decimos que es de otro color, lo sobrescribimos, es lógico pero, veamos si lo escribimos al revés:

<style>
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
  .ejemploCSS {background-color: #000;}
</style>

Ahora ponemos el fondo negro al final ¿qué se verá?

IMAGEN.4http://vagabundia.blogspot.com/2009/04/css-sobre-ids-y-clases.html

 

Pués, lo mismo ya que, para decirlo de alguna manera, un ID es "más importante" que una clase (más información). Para hacer que una clase "sobrescriba" una propiedad de un ID, le agregamos la palabra !important:

<style>
  .ejemploCSS {background-color: #000 !important;}
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
</style>

IMAGEN.5http://vagabundia.blogspot.com/2009/04/css-sobre-ids-y-clases.html

¿Cuándo hay que usar clases y cuándo IDs?

La regla más importante a la hora de elegir entre clases e ID’s es que un ID sólo debe ser usado una vez en el documento. 

Es decir, una vez que asignamos un ID a un elemento no se puede volver a asignar a otro elemento de la misma página. ¡Ojo! Cuando hablamos de página nos referimos a la página que se está cargando actualmente en el navegador, no al sitio completo.

Las clases, en cambio, las podemos usar las veces que queramos dentro del mismo documento. Así es que, si hay una serie de propiedades comunes entre una serie de elementos de la misma página lo apropiado será usar clases. Si dentro de esos elementos hay uno que queremos destacar de una manera especial una única vez en la página, entonces usaremos un ID.

En nuestro pequeño ejemplo, usaríamos clases para los párrafos “destacados” porque lo más probable es que haya más de un párrafo que queramos destacar y así podemos controlar la apariencia de todos los párrafos destacados desde un único lugar. En cambio, también lo más probable es que sólo haya un párrafo que sea el resumen de todos los demás. En este caso usaríamos un ID, y nuestro código quedaría así:

<p id="resumen">Este es el resumen del texto y quiero que vaya en itálica.</p>
<p>Esto sería un párrafo de texto normal.</p>
<p>Esto sería otro párrafo de texto normal.</p>
<p>Un nuevo párrafo de texto normal.</p>
<p class="destacado">Aquí va texto que quiero destacar.</p>
<p>Esto sería otro párrafo de texto normal.</p>
<p>Más texto normal.</p>
<p class="destacado">Aquí iría más texto que quiero destacar.</p>
<p>Esto sería otro párrafo de texto normal.</p>
<p>Esto sería otro párrafo de texto normal.</p>

Y empleando clases sería:

body {color:#000;}
p {color:#333;}
#resumen {color:green;font-style:italic;}
.destacado {color:red;}

 Identificación y agrupación de elementos (class e id)

A veces querrás aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. En esta lección examinaremos cómo usar los atributos class e id para especificar propiedades para los elementos seleccionados.

¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta lección.

Agrupación de elementos con el atributo class

Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:

 
 <p>Uvas para el vino blanco:</p>
 <ul>
 <li><a href="ri.htm">Riesling</a></li>
 <li><a href="ch.htm">Chardonnay</a></li>
 <li><a href="pb.htm">Pinot Blanc</a></li>
 </ul>

 <p>Uvas para el vino tinto:</p>
 <ul>
 <li><a href="cs.htm">Cabernet Sauvignon</a></li>
 <li><a href="me.htm">Merlot</a></li>
 <li><a href="pn.htm">Pinot Noir</a></li>
 </ul>
 
 

• Ver ejemplo

Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.

Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo class.

Intentemos especificar algunas clases en el ejemplo anterior:

 
 <p>Uvas para el vino blanco:</p>
 <ul>
 <li><a href="ri.htm" class="whitewine">Riesling</a></li>
 <li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
 <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
 </ul>

 <p>Uvas para el vino tinto:</p>
 <ul>
 <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
 <li><a href="me.htm" class="redwine">Merlot</a></li>
 <li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
 </ul>
 
 

A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.

 
 a {
  color: blue;
 }

 a.whitewine {
  color: #FFBB00;
 }

 a.redwine {
  color: #800000;
 }
 
 

• Ver ejemplo

Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclase en la hoja de estilo del documento.

Identificación de un elemento usando el atributo id

Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con el atributo id.

Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se debería usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id:

 
 <h1>Capítulo 1</h1>
 ...
 <h2>Capítulo 1.1</h2>
 ...
 <h2>Capítulo 1.2</h2>
 ...
 <h1>Capítulo 2</h1>
 ...
 <h2>Capítulo 2.1</h2>
 ...
 <h3>Capítulo 2.1.2</h3>
 ...
 
 

El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos y párrafos. Sería normal asignar un id a cada capítulo de la siguiente manera:

 
 <h1 id="c1">Capítulo 1</h1>
 ...
 <h2 id="c1-1">Capítulo 1.1</h2>
 ...
 <h2 id="c1-2">Capítulo 1.2</h2>
 ...
 <h1 id="c2">Capítulo 2</h1>
 ...
 <h2 id="c2-1">Capítulo 2.1</h2>
 ...
 <h3 id="c2-1-2">Capítulo 2.1.2</h3>
 ...
 
 

Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:

 
 #c1-2 {
  color: red;
 }
 
 

• Ver ejemplo

Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando #nombredelidentificador en la hoja de estilo del documento.