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 estilizar nuestros encabezados ""

0:00:04.600,0:00:09.470
y para que todos los "" sean verdes y todos los párrafos sean morados.

0:00:09.537,0:00:13.460
Pero ¿qué pasa si sólo quieres seleccionar el primer "",

0:00:13.460,0:00:16.462
o estilizar sólo el segundo párrafo?

0:00:16.716,0:00:19.867
Necesitamos tener una manera de decirle al navegador exactamente cuál

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

0:00:21.513,0:00:25.351
para que no aplique el estilo a todos, como lo está haciendo ahora.

0:00:25.351,0:00:28.275
Una manera de hacerlo es seleccionado por "Id".

0:00:28.275,0:00:30.525
Podemos darle a una etiqueta en nuestra página un "Id" único,

0:00:30.525,0:00:32.176
y luego podemos decirle a CSS,[br]

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

0:00:36.297,0:00:38.458
a ningún otro elemento".

0:00:38.458,0:00:41.281
Para hacer eso, el primer paso es, en realidad, modificar el HTML

0:00:41.281,0:00:45.742
para añadir atributos "Id" a las etiquetas que queremos seleccionar específicamente.

0:00:45.742,0:00:48.511
Vamos a iniciar aquí con el segundo párrafo.

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
al inicio de la etiqueta "", justo después de la "p",

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

0:00:58.982,0:01:02.667
Ahora necesitamos llenar 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.532
Bueno, debería ser uno descriptivo y único.

0:01:06.532,0:01:09.509
Ninguna otra cosa en esta página debería tener el mismo "Id".

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

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

0:01:19.837,0:01:22.607
siempre deberían usar guiones o guiones bajos.

0:01:22.607,0:01:25.597
En realidad a mí me gustan los guiones.

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

0:01:29.016,0:01:31.646
Ahora podemos añadir una regla CSS a esto.

0:01:31.746,0:01:35.479
Vamos nuevamente a nuestra etiqueta "" para el segundo paso.

0:01:35.598,0:01:39.438
Vamos a añadir una nueva línea, después de la última regla.

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

0:01:43.255,0:01:45.840
la parte que le dice al navegador 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 "´s" en la página.

0:01:54.554,0:01:57.203
Ahora para hacer un selector que sólo seleccione elementos

0:01:57.203,0:01:58.671
con un "Id" particular,

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

0:02:01.293,0:02:04.547
Esto le dice al navegador que lo que sigue es un "Id".

0:02:05.147,0:02:09.598
Ahora escribimos nuestro "Id" : "rabbits-song".

0:02:09.603,0:02:11.882
El resto de la regla es igual que las anteriores.

0:02:11.934,0:02:13.722
Cuando abrimos y cerramos nuestras llaves,

0:02:13.722,0:02:17.844
añadimos una propiedad, como el color de fondo,

0:02:18.364,0:02:20.574
y ¡tan tan! ¡Funciona!

0:02:20.873,0:02:23.934
Sólo el párrafo de la canción tiene un color de fondo amarillo,

0:02:23.934,0:02:26.623
y el estilo del primer párrafo es el mismo.

0:02:26.623,0:02:30.764
Vamos a hacerlo de nuevo, para seleccionar este primer "".

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

0:02:33.515,0:02:36.586
Está bien. En realidad necesitamos 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 ponemos nuestro cursor en el inicio de la etiqueta,

0:02:40.693,0:02:43.520
añadimos un espacio, tecleamos "id = "

0:02:43.580,0:02:46.691
y luego tecleamos un "Id" único y muy descriptivo.

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

0:02:50.690,0:02:54.043
Ok, el segundo paso. Regresamos a nuestra etiqueta de estilo

0:02:54.043,0:02:57.429
añadimos una nueva línea, escribimos 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 nuestras propiedades dentro de llaves "{

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

0:03:08.945,0:03:13.260
¡Oh oh! Ok, no funcionó.[br]Mmm, ¿ves algo que esté mal?

0:03:13.420,0:03:15.279
¿Escribí de la misma forma?

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

0:03:18.485,0:03:21.049
Mmm, parace que es lo mismo.

0:03:21.160,0:03:23.374
Ahora puedo compararlos letra por letra,

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

0:03:25.079,0:03:29.633
pero lo que me gusta hacer es ir abajo, y seleccionar el "Id" en el HTML,

0:03:29.679,0:03:33.810
copiarlo y luego pegarlo aquí para estar segura de que es exactamente lo mismo.

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

0:03:35.561,0:03:39.825
Mi "" tiene un color de fondo.[br]¿Y te diste cuenta qué cambio?

0:03:40.085,0:03:44.474
Tal vez lo hiciste. Aquí había una "h".[br]La "h" era una "H" mayúscula,

0:03:44.474,0:03:47.003
que el navegador no considera igual.

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

0:03:50.315,0:03:52.850
Esto es porque los "Id´s" distinguen mayúsculas de minúsculas.

0:03:52.930,0:03:57.143
Así que tienes que escribirlas de la misma manera en todos lados.

0:03:57.513,0:04:01.753
Me parece que lo mejor es simplemente usar minúsculas en cada letra de mis "Id´s".

0:04:01.753,0:04:04.645
Y así no tengo que pensar si usé mayúsculas o minúsculas.

0:04:05.158,0:04:08.404
Ok, déjame darte una última advertencia:

0:04:08.404,0:04:10.530
¡Los "Id´s" tienen que ser únicos!

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

0:04:13.444,0:04:17.835
el navegador tal vez estilice los dos, pero puede que sólo estilice uno de ellos.

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

0:04:20.451,0:04:23.096
"Id´s" lindos, únicos y descriptivos.