WEBVTT

00:00:00.095 --> 00:00:02.336
En esta página web estamos usando CSS

00:00:02.336 --> 00:00:04.600
para estilizar nuestros encabezados ""

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

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

00:00:13.460 --> 00:00:16.462
o estilizar sólo el segundo párrafo?

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

00:00:19.867 --> 00:00:21.513
de los elementos estamos seleccionando

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

00:00:25.351 --> 00:00:28.275
Una manera de hacerlo es seleccionado por "Id".

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

00:00:30.525 --> 00:00:32.176
y luego podemos decirle a CSS,


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

00:00:36.297 --> 00:00:38.458
a ningún otro elemento".

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

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

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

00:00:48.529 --> 00:00:50.896
Para añadir un atributo "Id", ponemos nuestro cursor

00:00:50.896 --> 00:00:53.415
al inicio de la etiqueta "", justo después de la "p",

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

00:00:58.982 --> 00:01:02.667
Ahora necesitamos llenar este atributo "Id" con un valor.

00:01:02.812 --> 00:01:04.180
¿Qué "Id" debería darle?

00:01:04.180 --> 00:01:06.532
Bueno, debería ser uno descriptivo y único.

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

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

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

00:01:19.837 --> 00:01:22.607
siempre deberían usar guiones o guiones bajos.

00:01:22.607 --> 00:01:25.597
En realidad a mí me gustan los guiones.

00:01:25.650 --> 00:01:28.941
Ahora tenemos una manera de identificar este párrafo de manera única.

00:01:29.016 --> 00:01:31.646
Ahora podemos añadir una regla CSS a esto.

00:01:31.746 --> 00:01:35.479
Vamos nuevamente a nuestra etiqueta "" para el segundo paso.

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

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

00:01:43.255 --> 00:01:45.840
la parte que le dice al navegador qué seleccionar.

00:01:46.098 --> 00:01:51.130
En nuestras reglas anteriores, usamos selectores como "" y ""

00:01:51.130 --> 00:01:54.031
para seleccionar todos los "" y los "´s" en la página.

00:01:54.554 --> 00:01:57.203
Ahora para hacer un selector que sólo seleccione elementos

00:01:57.203 --> 00:01:58.671
con un "Id" particular,

00:01:58.671 --> 00:02:00.862
debemos iniciar el selector con un signo #.

00:02:01.293 --> 00:02:04.547
Esto le dice al navegador que lo que sigue es un "Id".

00:02:05.147 --> 00:02:09.598
Ahora escribimos nuestro "Id" : "rabbits-song".

00:02:09.603 --> 00:02:11.882
El resto de la regla es igual que las anteriores.

00:02:11.934 --> 00:02:13.722
Cuando abrimos y cerramos nuestras llaves,

00:02:13.722 --> 00:02:17.844
añadimos una propiedad, como el color de fondo,

00:02:18.364 --> 00:02:20.574
y ¡tan tan! ¡Funciona!

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

00:02:23.934 --> 00:02:26.623
y el estilo del primer párrafo es el mismo.

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

00:02:31.133 --> 00:02:32.866
¿Puedes recordar el primer paso?

00:02:33.515 --> 00:02:36.586
Está bien. En realidad necesitamos modificar este HTML

00:02:36.586 --> 00:02:38.145
para añadir el atributo "Id".

00:02:38.300 --> 00:02:40.693
Así que ponemos nuestro cursor en el inicio de la etiqueta,

00:02:40.693 --> 00:02:43.520
añadimos un espacio, tecleamos "id = "

00:02:43.580 --> 00:02:46.691
y luego tecleamos un "Id" único y muy descriptivo.

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

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

00:02:54.043 --> 00:02:57.429
añadimos una nueva línea, escribimos el signo #,

00:02:57.429 --> 00:03:01.840
luego nuestro "Id", "rabbits-info-Heading"

00:03:01.840 --> 00:03:04.947
y luego ponemos nuestras propiedades dentro de llaves "{

00:03:04.947 --> 00:03:08.625
background-color: purple;
}"

00:03:08.945 --> 00:03:13.260
¡Oh oh! Ok, no funcionó.
Mmm, ¿ves algo que esté mal?

00:03:13.420 --> 00:03:15.279
¿Escribí de la misma forma?

00:03:15.359 --> 00:03:18.305
"rabbits-info-Heading,
rabbits-info-heading"

00:03:18.485 --> 00:03:21.049
Mmm, parace que es lo mismo.

00:03:21.160 --> 00:03:23.374
Ahora puedo compararlos letra por letra,

00:03:23.374 --> 00:03:25.079
para averiguar qué es lo que está mal,

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

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

00:03:33.887 --> 00:03:35.481
Y ¡funcionó!

00:03:35.561 --> 00:03:39.825
Mi "" tiene un color de fondo.
¿Y te diste cuenta qué cambio?

00:03:40.085 --> 00:03:44.474
Tal vez lo hiciste. Aquí había una "h".
La "h" era una "H" mayúscula,

00:03:44.474 --> 00:03:47.003
que el navegador no considera igual.

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

00:03:50.315 --> 00:03:52.850
Esto es porque los "Id´s" distinguen mayúsculas de minúsculas.

00:03:52.930 --> 00:03:57.143
Así que tienes que escribirlas de la misma manera en todos lados.

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

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

00:04:05.158 --> 00:04:08.404
Ok, déjame darte una última advertencia:

00:04:08.404 --> 00:04:10.530
¡Los "Id´s" tienen que ser únicos!

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

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

00:04:17.962 --> 00:04:20.341
Y no quieres dejarlo a la suerte.

00:04:20.451 --> 00:04:23.096
"Id´s" lindos, únicos y descriptivos.