En esta página web, estamos usando CSS

para dar estilo a nuestros '' y a los párrafos

de modo que todos los '' sean verdes y todos los párrafos sean púrpuras.

Pero, ¿qué pasa si nosotros queremos seleccionar solo el primer '' ?

o dar estilo solo al segundo párrafo?

Nosotros necesitariamos encontrar una forma de decirle al navegador exáctamente cuales

de los elementos estamos seleccionando

de modo que este no aplique los estilos a todos ellos, como está ahora.

Una forma de hacerlo es seleccionar por ID.

Podemos dar a una etiqueta de nuestra página un ID único

y luego podemos decirle a CSS,

"Escucha: Yo solo quiero aplicar estos estilos al elemento con este ID,

no a ninguno de los otros elementos."

Para hacer esto, el primer paso es de hecho modificar el HTML

para añadir atributos id a las etiquetas que queremos seleccionar específicamente.

Comencemos con el segundo párrafo de aquí.

Para añadir un atributo id, ponemos nuestro cursor

en el comienzo de la etiqueta '' justo después de p,

luego añade un espacio, y luego teclea 'id = " '

Ahora necesitamos rellenar este atributo id con un valor.

¿Qué ID debería darle?

Bueno, este debería ser descriptivo y único.

Nada más en esta página debería tener el mismo ID.

Bueno, dado que esto es una canción sobre conejos, la llamaré rabbits-song.

No podemos tener espacios en IDs, asi que si tienen múltiples palabras como esta

siempre debes utilizar guiones o guiones bajos.

Personalmente, me encantan los guiones.

Ahora tenemos una forma de identificar este párrafo únicamente.

Entonces podemos añadir una regla CSS enfocandolo.

Volvamos a nuestra etiqueta ''
para el segundo paso.

Añadiremos una nueva línea, después de la última regla.

Recuerda, la primera parte de una regla del CSS es el selector:

la parte que le dice al buscador qué seleccionar.

En nuestras reglas anteriores, usamos selectores como '' y ''

para seleccionar todos los '' y los '' en la página.

Ahora para hacer un selector
que solo seleccione elementos

con un ID partícular,

debemos empezar el selector con un signo #.

Eso le dice al navegador que
lo que viene a continuación es un ID.

Ahora escribimos nuestra identificación:
rabbits-song.

El resto de la regla
es lo mismo que antes.

Abrimos y cerramos nuestras llaves,

añadimos una propiedad,
como background-color...

... y listo! Funcionó!

Solo el párrafo de la canción tiene
el color de fondo amarillo,

y el primer párrafo
permanece igual.

Vamos a hacer esto de nuevo,
para seleccionar el primer ``.

¿Puedes recordar el primer paso?

Eso es. Necesitamos incluso modificar este HTML

para añadir el atributo 'id'.

Así que mantenemos nuestro cursor
en la etiqueta inicial,

añadimos un espacio, tipo 'id = '

a continuación, escribimos un ID muy singular
y descriptiva.

Así, "rabbits-info-heading".

Bien, el segundo paso.
Retrocedemos a nuestra etiqueta de estilo

añadimos una nueva línea,
escribe el signo #,

luego nuestro ID, rabbits-info-heading

y luego ponemos nuestra propiedad dentro de llaves {

background-color: purple; 
}

Oh! Bien, no funcionó. Umm... ¿Ves lo que estuvo mal?

Yo... deletreé de igual forma?

rabbits-info-Heading, 
rabbits-info-heading...

Hmm... se ven casi iguales.

Ahora los podemos comparar letra-por-letra

para averiguar lo que está mal,

pero lo que me gusta hacer es ir abajo
y seleccionar el ID en el HTML,

copiarlo, y luego pegarlo aquí para asegurarme que está exactamente igual.

Y... funcionó!

Mi `` tiene un fondo.
¿Y te has dado cuenta de lo que cambió?

Tal vez lo hiciste. Fue la h.
La h usada era una H mayúscula,

que el navegador
no la considera como igual.

Tiene que ser h minúscula para coincidir en el HTML.

Eso es porque los id distinguen mayúsculas de minúsculas.

Entonces tienes que deletrearlos de la misma forma en todas partes.

Me parece que lo mejor es simplemente usar siempre
minúsculas para cada letra en mis IDs

de manera que yo no tengo que pensar en si usé minúsculas o mayúsculas.

Bien, ahora permiteme dejarte con una última advertencia:

Los IDs deben ser únicos!

Si tu tienes dos etiquetas en tu página con el mismo ID,

el navegador podría poner estilo en ambas,
pero también podría poner estilo en solo una de ellas.

Y tu no quieres dejarlo a la suerte.

Lindos, únicos y descriptivos IDs.