Tema 3 IDs y Clases
Imagina el siguiente caso: quieres modificar un párrafo con CSS pero no puedes utilizar la etiqueta <p> como selector porque eso cambiaría todos los párrafos de tu documento HTML. ¿Cómo puedes modificar un párrafo en específico?
En el módulo anterior vimos brevemente en algunos ejemplos el uso del atributo id: lo utilizamos con enlaces para referenciar elementos inputs desde labels. Los id también pueden cumplir una función diferente para CSS: nos sirven para seleccionar al único elemento en el documento con este atributo (es por esto que no podemos asignar el mismo id a múltiples elementos).
Si queremos modificar múltiples elementos específicos, podemos utilizar el atributo class.
Los atributos class y id son globales, es decir, se pueden utilizar en cualquier elemento HTML.
En CSS, para acceder a elementos por su id o class, se utlizan los caracteres # y ., respectivamente. Observa el siguiente ejemplo:
HTML
<p id="rojo">Este texto se modificó usando un
ID.</p>
<p class="azul">Este texto se modificó usando una
clase.</p>
<p class="azul pequeño">Este texto también se modificó usando
clases.</p>
CSS
p {
font-family: Arial,
Helvetica, sans-serif;
font-size: 32px;
}
#rojo {
color: red;
}
.azul {
color: blue;
}
.pequeño {
font-size: 18px;
}
Utilizamos un id para modificar el primer párrafo con el color rojo. Nota que no podemos utilizar el id "rojo" para otros elementos una vez asignado.
Por otra parte, utilizamos el atributo class para asignar el color azul del resto de los párrafos.
También hicimos una tercer clase llamada pequeño, que utilizamos para disminuir el tamaño del texto que estaba especificado en p.
También, como puedes obervar, se pueden asignar múltiples clases a un solo elemento. Solo se necesitan separar los nombres de las clases por espacios.