CSS: Seleccionando por Id

En esta página web estamos usando CSS

para estilizar nuestros encabezados ""

y para que todos los "" sean verdes y todos los párrafos sean morados.

Pero ¿qué pasa si sólo quieres seleccionar el primer "",

o estilizar sólo el segundo párrafo?

Necesitamos tener una manera de decirle al navegador exactamente cuál

de los elementos estamos seleccionando

para que no aplique el estilo a todos, como lo está haciendo ahora.

Una manera de hacerlo es seleccionado por "Id".

Podemos darle a una etiqueta en nuestra página un "Id" único,

y luego podemos decirle a CSS,

"Escucha: Sólo quiero aplicar estos estilos al elemento con este 'Id',

a ningún otro elemento".

Para hacer eso, el primer paso es, en realidad, modificar el HTML

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

Vamos a iniciar aquí con el segundo párrafo.

Para añadir un atributo "Id", ponemos nuestro cursor

al inicio de la etiqueta "", justo después de la "p",

añadimos un espacio, y luego tecleamos 'id = "'

Ahora necesitamos llenar este atributo "Id" con un valor.

¿Qué "Id" debería darle?

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

Ninguna otra cosa en esta página debería tener el mismo "Id".

Bueno, como ésta es una canción sobre conejos, la llamaré "rabbits-song" (Canción de conejos).

No podemos tener espacios en los "Id´s", así que si tienen muchas palabras como en este caso

siempre deberían usar guiones o guiones bajos.

En realidad a mí me gustan los guiones.

Ahora tenemos una manera de identificar este párrafo de manera única.

Ahora podemos añadir una regla CSS a esto.

Vamos nuevamente a nuestra etiqueta "" para el segundo paso.

Vamos a añadir una nueva línea, después de la última regla.

Ahora recuerden, la primera parte de una regla CSS es el selector:

la parte que le dice al navegador qué seleccionar.

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

para seleccionar todos los "" y los "´s" en la página.

Ahora para hacer un selector que sólo seleccione elementos

con un "Id" particular,

debemos iniciar el selector con un signo #.

Esto le dice al navegador que lo que sigue es un "Id".

Ahora escribimos nuestro "Id" : "rabbits-song".

El resto de la regla es igual que las anteriores.

Cuando abrimos y cerramos nuestras llaves,

añadimos una propiedad, como el color de fondo,

y ¡tan tan! ¡Funciona!

Sólo el párrafo de la canción tiene un color de fondo amarillo,

y el estilo del primer párrafo es el mismo.

Vamos a hacerlo de nuevo, para seleccionar este primer "".

¿Puedes recordar el primer paso?

Está bien. En realidad necesitamos modificar este HTML

para añadir el atributo "Id".

Así que ponemos nuestro cursor en el inicio de la etiqueta,

añadimos un espacio, tecleamos "id = "

y luego tecleamos un "Id" único y muy descriptivo.

Entonces, "rabbits-info-heading".

Ok, el segundo paso. Regresamos a nuestra etiqueta de estilo

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

luego nuestro "Id", "rabbits-info-Heading"

y luego ponemos nuestras propiedades dentro de llaves "{

background-color: purple;
}"

¡Oh oh! Ok, no funcionó.
Mmm, ¿ves algo que esté mal?

¿Escribí de la misma forma?

"rabbits-info-Heading,
rabbits-info-heading"

Mmm, parace que es lo mismo.

Ahora puedo compararlos letra por letra,

para averiguar qué es 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 estar segura de que es exactamente lo mismo.

Y ¡funcionó!

Mi "" tiene un color de fondo.
¿Y te diste cuenta qué cambio?

Tal vez lo hiciste. Aquí había una "h".
La "h" era una "H" mayúscula,

que el navegador no considera igual.

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

Esto es porque los "Id´s" distinguen mayúsculas de minúsculas.

Así que tienes que escribirlas de la misma manera en todos lados.

Me parece que lo mejor es simplemente usar minúsculas en cada letra de mis "Id´s".

Y así no tengo que pensar si usé mayúsculas o minúsculas.

Ok, déjame darte una última advertencia:

¡Los "Id´s" tienen que ser únicos!

Si tienes dos etiquetas en tu página con exactamente el mismo "Id",

el navegador tal vez estilice los dos, pero puede que sólo estilice uno de ellos.

Y no quieres dejarlo a la suerte.

"Id´s" lindos, únicos y descriptivos.