1
00:00:00,095 --> 00:00:02,336
En esta página web, estamos usando CSS

2
00:00:02,336 --> 00:00:04,600
para dar estilo a nuestros '' y a los párrafos

3
00:00:08,670 --> 00:00:08,920
de modo que todos los '' sean verdes y todos los párrafos sean púrpuras.

4
00:00:09,537 --> 00:00:13,160
Pero, ¿qué pasa si nosotros queremos seleccionar solo el primer '' ?

5
00:00:13,460 --> 00:00:16,462
o dar estilo solo al segundo párrafo?

6
00:00:16,716 --> 00:00:19,867
Nosotros necesitariamos encontrar una forma de decirle al navegador exáctamente cuales

7
00:00:19,867 --> 00:00:21,513
de los elementos estamos seleccionando

8
00:00:21,513 --> 00:00:24,931
de modo que este no aplique los estilos a todos ellos, como está ahora.

9
00:00:25,333 --> 00:00:27,945
Una forma de hacerlo es seleccionar por ID.

10
00:00:28,265 --> 00:00:30,525
Podemos dar a una etiqueta de nuestra página un ID único

11
00:00:30,525 --> 00:00:32,449
y luego podemos decirle a CSS,

12
00:00:34,373 --> 00:00:36,297
"Escucha: Yo solo quiero aplicar estos estilos al elemento con este ID,

13
00:00:36,297 --> 00:00:38,208
no a ninguno de los otros elementos."

14
00:00:38,455 --> 00:00:41,281
Para hacer esto, el primer paso es de hecho modificar el HTML

15
00:00:41,281 --> 00:00:45,132
para añadir atributos id a las etiquetas que queremos seleccionar específicamente.

16
00:00:45,741 --> 00:00:48,371
Comencemos con el segundo párrafo de aquí.

17
00:00:48,529 --> 00:00:50,896
Para añadir un atributo id, ponemos nuestro cursor

18
00:00:50,896 --> 00:00:53,415
en el comienzo de la etiqueta '' justo después de p,

19
00:00:53,415 --> 00:00:58,357
luego añade un espacio, y luego teclea 'id = " '

20
00:00:58,982 --> 00:01:02,667
Ahora necesitamos rellenar este atributo id con un valor.

21
00:01:02,812 --> 00:01:04,180
¿Qué ID debería darle?

22
00:01:04,180 --> 00:01:06,452
Bueno, este debería ser descriptivo y único.

23
00:01:06,508 --> 00:01:09,229
Nada más en esta página debería tener el mismo ID.

24
00:01:09,479 --> 00:01:15,080
Bueno, dado que esto es una canción sobre conejos, la llamaré rabbits-song.

25
00:01:15,422 --> 00:01:19,837
No podemos tener espacios en IDs, asi que si tienen múltiples palabras como esta

26
00:01:19,837 --> 00:01:22,237
siempre debes utilizar guiones o guiones bajos.

27
00:01:22,596 --> 00:01:24,717
Personalmente, me encantan los guiones.

28
00:01:25,650 --> 00:01:28,941
Ahora tenemos una forma de identificar este párrafo únicamente.

29
00:01:29,016 --> 00:01:31,646
Entonces podemos añadir una regla CSS enfocandolo.

30
00:01:31,746 --> 00:01:35,479
Volvamos a nuestra etiqueta ''
para el segundo paso.

31
00:01:35,598 --> 00:01:38,428
Añadiremos una nueva línea, después de la última regla.

32
00:01:39,478 --> 00:01:43,255
Recuerda, la primera parte de una regla del CSS es el selector:

33
00:01:43,255 --> 00:01:45,840
la parte que le dice al buscador qué seleccionar.

34
00:01:46,098 --> 00:01:51,130
En nuestras reglas anteriores, usamos selectores como '' y ''

35
00:01:51,130 --> 00:01:54,031
para seleccionar todos los '' y los '' en la página.

36
00:01:54,554 --> 00:01:57,203
Ahora para hacer un selector
que solo seleccione elementos

37
00:01:57,203 --> 00:01:58,671
con un ID partícular,

38
00:01:58,671 --> 00:02:00,862
debemos empezar el selector con un signo #.

39
00:02:01,293 --> 00:02:04,547
Eso le dice al navegador que
lo que viene a continuación es un ID.

40
00:02:05,147 --> 00:02:08,798
Ahora escribimos nuestra identificación:
rabbits-song.

41
00:02:09,603 --> 00:02:11,882
El resto de la regla
es lo mismo que antes.

42
00:02:11,934 --> 00:02:13,722
Abrimos y cerramos nuestras llaves,

43
00:02:13,722 --> 00:02:17,844
añadimos una propiedad,
como background-color...

44
00:02:18,364 --> 00:02:20,574
... y listo! Funcionó!

45
00:02:20,873 --> 00:02:23,934
Solo el párrafo de la canción tiene
el color de fondo amarillo,

46
00:02:23,934 --> 00:02:26,093
y el primer párrafo
permanece igual.

47
00:02:26,574 --> 00:02:30,764
Vamos a hacer esto de nuevo,
para seleccionar el primer ``.

48
00:02:31,133 --> 00:02:32,866
¿Puedes recordar el primer paso?

49
00:02:33,515 --> 00:02:36,586
Eso es. Necesitamos incluso modificar este HTML

50
00:02:36,586 --> 00:02:38,145
para añadir el atributo 'id'.

51
00:02:38,300 --> 00:02:40,693
Así que mantenemos nuestro cursor
en la etiqueta inicial,

52
00:02:40,693 --> 00:02:43,520
añadimos un espacio, tipo 'id = '

53
00:02:43,580 --> 00:02:46,691
a continuación, escribimos un ID muy singular
y descriptiva.

54
00:02:46,791 --> 00:02:49,944
Así, "rabbits-info-heading".

55
00:02:50,690 --> 00:02:54,043
Bien, el segundo paso.
Retrocedemos a nuestra etiqueta de estilo

56
00:02:54,043 --> 00:02:57,429
añadimos una nueva línea,
escribe el signo #,

57
00:02:57,429 --> 00:03:01,840
luego nuestro ID, rabbits-info-heading

58
00:03:01,840 --> 00:03:04,947
y luego ponemos nuestra propiedad dentro de llaves {

59
00:03:04,947 --> 00:03:08,625
background-color: purple; 
}

60
00:03:08,945 --> 00:03:13,260
Oh! Bien, no funcionó. Umm... ¿Ves lo que estuvo mal?

61
00:03:13,420 --> 00:03:15,279
Yo... deletreé de igual forma?

62
00:03:15,359 --> 00:03:18,305
rabbits-info-Heading, 
rabbits-info-heading...

63
00:03:18,485 --> 00:03:21,049
Hmm... se ven casi iguales.

64
00:03:21,160 --> 00:03:23,374
Ahora los podemos comparar letra-por-letra

65
00:03:23,374 --> 00:03:25,079
para averiguar lo que está mal,

66
00:03:25,079 --> 00:03:29,633
pero lo que me gusta hacer es ir abajo
y seleccionar el ID en el HTML,

67
00:03:29,679 --> 00:03:33,810
copiarlo, y luego pegarlo aquí para asegurarme que está exactamente igual.

68
00:03:33,887 --> 00:03:35,481
Y... funcionó!

69
00:03:35,561 --> 00:03:39,825
Mi `` tiene un fondo.
¿Y te has dado cuenta de lo que cambió?

70
00:03:40,085 --> 00:03:44,474
Tal vez lo hiciste. Fue la h.
La h usada era una H mayúscula,

71
00:03:44,474 --> 00:03:47,003
que el navegador
no la considera como igual.

72
00:03:47,103 --> 00:03:50,231
Tiene que ser h minúscula para coincidir en el HTML.

73
00:03:50,315 --> 00:03:52,850
Eso es porque los id distinguen mayúsculas de minúsculas.

74
00:03:52,930 --> 00:03:57,143
Entonces tienes que deletrearlos de la misma forma en todas partes.

75
00:03:57,513 --> 00:04:01,753
Me parece que lo mejor es simplemente usar siempre
minúsculas para cada letra en mis IDs

76
00:04:01,753 --> 00:04:04,645
de manera que yo no tengo que pensar en si usé minúsculas o mayúsculas.

77
00:04:05,158 --> 00:04:08,404
Bien, ahora permiteme dejarte con una última advertencia:

78
00:04:08,404 --> 00:04:10,530
Los IDs deben ser únicos!

79
00:04:10,648 --> 00:04:13,444
Si tu tienes dos etiquetas en tu página con el mismo ID,

80
00:04:13,444 --> 00:04:17,835
el navegador podría poner estilo en ambas,
pero también podría poner estilo en solo una de ellas.

81
00:04:17,962 --> 00:04:20,341
Y tu no quieres dejarlo a la suerte.

82
00:04:20,451 --> 00:04:23,096
Lindos, únicos y descriptivos IDs.