Uso de IDs y Clases en HTML y CSS

HTML y CSS

Ya he mencionado en unos cuantos posts a los IDs y las clases de HTML e incluso en el último que hice prometí que algún día iba a tratar este tema, y no es para menos, la verdad es que son dos conceptos que debemos tener muy asimilados si queremos ser unos programadores de HTML y CSS decentes.

Si te has leído alguno de mis otros posts, sobretodo los de CSS, seguramente ya te habrás fijado en que cuando realizo un ejemplo con código CSS antes suelo crear una clase personalizada en el HTML con el objetivo de manipular únicamente ese elemento de la página. Y bueno, quizás por el momento no te esté quedando muy clara la cosa, pero sigue leyendo, que te explicaré qué es cada cosa y para que sirve cada una en detalle.

¿Qué es un ID y para qué sirve?

Un ID es un identificador que podemos asignar a cualquier etiqueta de HTML que queramos tener identificada fácilmente. Lo bueno de esto es que podremos personalizar a ese elemento de forma sencilla en nuestro fichero CSS simplemente utilizando el ID en cuestión.

Como siempre, vamos con un ejemplo:


<a id="enlace-identificado" href="https://www.silversites.es">Soy un Enlace muy bien identificado</a>

En este caso se lo he aplicado a un enlace (recuerda que para los enlaces se utiliza la etiqueta <a>). Esto en si no cambia nada, nuestro enlace se va a seguir viendo como siempre, solo que ahora tendrá un identificador que nos va a venir de lujo.

Ahora supongamos que queremos que únicamente este enlace sea distinto a todos los demás, gracias al ID que le hemos añadido, será muy sencillo. Te enseño como con código CSS:


#enlace-identificado {
    color: #31495f;
}

Con esta orden CSS estoy básicamente diciéndole que pinte las letras de un color azul oscuro grisáceo a todos los elementos que tengan el ID en cuestión (para IDs se usa el corchete).

Así que ya te imaginarás que pasará si ahora pongo tres enlaces abajo (mis enlaces suelen ser de color turquesa) pero a uno de ellos le pongo el ID que hemos creado en este ejercicio.

Soy un enlace cualquiera
A mí no me han puesto ningún ID
Soy un enlace identificado

Pues ya has visto para qué sirve un identificador, es una forma de convertir una etiqueta en única a su manera. Además gracias al ID será muy sencillo editarla después mediante CSS, ya que de hecho el ID es un elemento muy prioritario en cuanto a CSS se refiere. Algún día hablaré sobre las prioridades de CSS (#ToDo).

No puede haber dos IDs iguales

Pero ten en cuenta que nunca debería haber dos elementos con el mismo identificador en la misma página. Es como dos personas con el mismo DNI (o con el documento de identificación que tenga tu país), no tendría mucho sentido.

La gracia de un identificador es esa, se supone que es un elemento único y que no debería haber otro igual en ningún lado de la página.

Por poder se puede hacer y te va a funcionar perfectamente, pero no estarás programando adecuadamente. Si lo que buscas es poder poner un identificador a más de un elemento, en ese caso es donde entran las clases.

¿Qué son las Clases y para qué Sirven?

Si te has leído todo el apartado de los ID seguramente ya hayas entendido cuando se utilizan las clases. Básicamente es para asignarle ciertas propiedades a un elemento o varios de la página cuando quieras, podríamos decir que estamos añadiéndolas a un grupo que les confiere ciertos atributos. Atributos que nosotros definiremos.

Vamos con el ejemplo:


<p class="verde">Deseo ser un párrafo verde</p>
<p class="naranja">Deseo ser un párrafo naranja</p>

Ahora solo tenemos que definir las clases mediante CSS:


.verde {
    color: #00b961;
}

.naranja {
    color: #f37500;
}

Por cierto, si quieres una lista de colores chulos para CSS aquí tienes unos que suelo utilizar y que de hecho estoy utilizando en este post.

Bueno, veamos ahora qué ocurre con los párrafos:

Deseo ser un párrafo verde

Deseo ser un párrafo naranja

Pues ahora que hemos definido estas clases que asignan colores a las letras, podemos asignárselas a lo que queramos siempre y cuando tenga letras claro (en este caso, ya que la propiedad color hace eso).

¿Cuál es la diferencia entre IDs y Clases?

Pues que el ID sirve para identificar y añadir propiedades a un único elemento mientras que las clases se utilizan para añadir ciertas propiedades a varios elementos que deberían tener eso en común, véase por ejemplo ser de color azul.

Ahora ya sabes, de nada sirve leer y no practicar, deberías comenzar a crear tus IDs y clases con sus distintas propiedades e ir probando como funciona la cosa. Recuerda que siempre tendrás aquí esta lección si durante el proceso tienes alguna dificultad y si por lo que fuera no te sale o estás teniendo algún problema no dudes en dejar un comentario y te ayudaré a solucionarlo. Eso sí, trata de explicarme en detalle todo, que no es como que tenga acceso a tu código.

¿Ya has entendido como funcionan los IDs y clases en HTML y CSS? ¿Te has quedado con la diferencia entre ambos? ¿Tienes alguna duda? ¡Deja tu comentario!

Tags:,

Leave a Reply