0:00:00.095,0:00:02.336
En esta página web, estamos usando CSS

0:00:02.336,0:00:04.600
para dar estilo a nuestros '' y a los párrafos

0:00:08.670,0:00:08.920
de modo que todos los '' sean verdes y todos los párrafos sean púrpuras.

0:00:09.537,0:00:13.160
Pero, ¿qué pasa si nosotros queremos seleccionar solo el primer '' ?

0:00:13.460,0:00:16.462
o dar estilo solo al segundo párrafo?

0:00:16.716,0:00:19.867
Nosotros necesitariamos encontrar una forma de decirle al navegador exáctamente cuales

0:00:19.867,0:00:21.513
de los elementos estamos seleccionando

0:00:21.513,0:00:24.931
de modo que este no aplique los estilos a todos ellos, como está ahora.

0:00:25.333,0:00:27.945
Una forma de hacerlo es seleccionar por ID.

0:00:28.265,0:00:30.525
Podemos dar a una etiqueta de nuestra página un ID único

0:00:30.525,0:00:32.449
y luego podemos decirle a CSS,

0:00:34.373,0:00:36.297
"Escucha: Yo solo quiero aplicar estos estilos al elemento con este ID,

0:00:36.297,0:00:38.208
no a ninguno de los otros elementos."

0:00:38.455,0:00:41.281
Para hacer esto, el primer paso es de hecho modificar el HTML

0:00:41.281,0:00:45.132
para añadir atributos id a las etiquetas que queremos seleccionar específicamente.

0:00:45.741,0:00:48.371
Comencemos con el segundo párrafo de aquí.

0:00:48.529,0:00:50.896
Para añadir un atributo id, ponemos nuestro cursor

0:00:50.896,0:00:53.415
en el comienzo de la etiqueta '' justo después de p,

0:00:53.415,0:00:58.357
luego añade un espacio, y luego teclea 'id = " '

0:00:58.982,0:01:02.667
Ahora necesitamos rellenar este atributo id con un valor.

0:01:02.812,0:01:04.180
¿Qué ID debería darle?

0:01:04.180,0:01:06.452
Bueno, este debería ser descriptivo y único.

0:01:06.508,0:01:09.229
Nada más en esta página debería tener el mismo ID.

0:01:09.479,0:01:15.080
Bueno, dado que esto es una canción sobre conejos, la llamaré rabbits-song.

0:01:15.422,0:01:19.837
No podemos tener espacios en IDs, asi que si tienen múltiples palabras como esta

0:01:19.837,0:01:22.237
siempre debes utilizar guiones o guiones bajos.

0:01:22.596,0:01:24.717
Personalmente, me encantan los guiones.

0:01:25.650,0:01:28.941
Ahora tenemos una forma de identificar este párrafo únicamente.

0:01:29.016,0:01:31.646
Entonces podemos añadir una regla CSS enfocandolo.

0:01:31.746,0:01:35.479
Volvamos a nuestra etiqueta ''[br]para el segundo paso.

0:01:35.598,0:01:38.428
Añadiremos una nueva línea, después de la última regla.

0:01:39.478,0:01:43.255
Recuerda, la primera parte de una regla del CSS es el selector:

0:01:43.255,0:01:45.840
la parte que le dice al buscador qué seleccionar.

0:01:46.098,0:01:51.130
En nuestras reglas anteriores, usamos selectores como '' y ''

0:01:51.130,0:01:54.031
para seleccionar todos los '' y los '' en la página.

0:01:54.554,0:01:57.203
Ahora para hacer un selector[br]que solo seleccione elementos

0:01:57.203,0:01:58.671
con un ID partícular,

0:01:58.671,0:02:00.862
debemos empezar el selector con un signo #.

0:02:01.293,0:02:04.547
Eso le dice al navegador que[br]lo que viene a continuación es un ID.

0:02:05.147,0:02:08.798
Ahora escribimos nuestra identificación:[br]rabbits-song.

0:02:09.603,0:02:11.882
El resto de la regla[br]es lo mismo que antes.

0:02:11.934,0:02:13.722
Abrimos y cerramos nuestras llaves,

0:02:13.722,0:02:17.844
añadimos una propiedad,[br]como background-color...

0:02:18.364,0:02:20.574
... y listo! Funcionó!

0:02:20.873,0:02:23.934
Solo el párrafo de la canción tiene[br]el color de fondo amarillo,

0:02:23.934,0:02:26.093
y el primer párrafo[br]permanece igual.

0:02:26.574,0:02:30.764
Vamos a hacer esto de nuevo,[br]para seleccionar el primer ``.

0:02:31.133,0:02:32.866
¿Puedes recordar el primer paso?

0:02:33.515,0:02:36.586
Eso es. Necesitamos incluso modificar este HTML

0:02:36.586,0:02:38.145
para añadir el atributo 'id'.

0:02:38.300,0:02:40.693
Así que mantenemos nuestro cursor[br]en la etiqueta inicial,

0:02:40.693,0:02:43.520
añadimos un espacio, tipo 'id = '

0:02:43.580,0:02:46.691
a continuación, escribimos un ID muy singular[br]y descriptiva.

0:02:46.791,0:02:49.944
Así, "rabbits-info-heading".

0:02:50.690,0:02:54.043
Bien, el segundo paso.[br]Retrocedemos a nuestra etiqueta de estilo

0:02:54.043,0:02:57.429
añadimos una nueva línea,[br]escribe el signo #,

0:02:57.429,0:03:01.840
luego nuestro ID, rabbits-info-heading

0:03:01.840,0:03:04.947
y luego ponemos nuestra propiedad dentro de llaves {

0:03:04.947,0:03:08.625
background-color: purple; [br]}

0:03:08.945,0:03:13.260
Oh! Bien, no funcionó. Umm... ¿Ves lo que estuvo mal?

0:03:13.420,0:03:15.279
Yo... deletreé de igual forma?

0:03:15.359,0:03:18.305
rabbits-info-Heading, [br]rabbits-info-heading...

0:03:18.485,0:03:21.049
Hmm... se ven casi iguales.

0:03:21.160,0:03:23.374
Ahora los podemos comparar letra-por-letra

0:03:23.374,0:03:25.079
para averiguar lo que está mal,

0:03:25.079,0:03:29.633
pero lo que me gusta hacer es ir abajo[br]y seleccionar el ID en el HTML,

0:03:29.679,0:03:33.810
copiarlo, y luego pegarlo aquí para asegurarme que está exactamente igual.

0:03:33.887,0:03:35.481
Y... funcionó!

0:03:35.561,0:03:39.825
Mi `` tiene un fondo.[br]¿Y te has dado cuenta de lo que cambió?

0:03:40.085,0:03:44.474
Tal vez lo hiciste. Fue la h.[br]La h usada era una H mayúscula,

0:03:44.474,0:03:47.003
que el navegador[br]no la considera como igual.

0:03:47.103,0:03:50.231
Tiene que ser h minúscula para coincidir en el HTML.

0:03:50.315,0:03:52.850
Eso es porque los id distinguen mayúsculas de minúsculas.

0:03:52.930,0:03:57.143
Entonces tienes que deletrearlos de la misma forma en todas partes.

0:03:57.513,0:04:01.753
Me parece que lo mejor es simplemente usar siempre[br]minúsculas para cada letra en mis IDs

0:04:01.753,0:04:04.645
de manera que yo no tengo que pensar en si usé minúsculas o mayúsculas.

0:04:05.158,0:04:08.404
Bien, ahora permiteme dejarte con una última advertencia:

0:04:08.404,0:04:10.530
Los IDs deben ser únicos!

0:04:10.648,0:04:13.444
Si tu tienes dos etiquetas en tu página con el mismo ID,

0:04:13.444,0:04:17.835
el navegador podría poner estilo en ambas,[br]pero también podría poner estilo en solo una de ellas.

0:04:17.962,0:04:20.341
Y tu no quieres dejarlo a la suerte.

0:04:20.451,0:04:23.096
Lindos, únicos y descriptivos IDs.