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

3
00:00:04,600 --> 00:00:09,470
y para que todos los "" sean verdes y todos los párrafos sean morados.

4
00:00:09,537 --> 00:00:13,460
Pero ¿qué pasa si sólo quieres seleccionar el primer "",

5
00:00:13,460 --> 00:00:16,462
o estilizar sólo el segundo párrafo?

6
00:00:16,716 --> 00:00:19,867
Necesitamos tener una manera de decirle al navegador exactamente cuál

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

8
00:00:21,513 --> 00:00:25,351
para que no aplique el estilo a todos, como lo está haciendo ahora.

9
00:00:25,351 --> 00:00:28,275
Una manera de hacerlo es seleccionado por "Id".

10
00:00:28,275 --> 00:00:30,525
Podemos darle a una etiqueta en nuestra página un "Id" único,

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


12
00:00:32,176 --> 00:00:36,297
"Escucha: Sólo quiero aplicar estos estilos al elemento con este 'Id',

13
00:00:36,297 --> 00:00:38,458
a ningún otro elemento".

14
00:00:38,458 --> 00:00:41,281
Para hacer eso, el primer paso es, en realidad, modificar el HTML

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

16
00:00:45,742 --> 00:00:48,511
Vamos a iniciar aquí con el segundo párrafo.

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

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

20
00:00:58,982 --> 00:01:02,667
Ahora necesitamos llenar 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,532
Bueno, debería ser uno descriptivo y único.

23
00:01:06,532 --> 00:01:09,509
Ninguna otra cosa en esta página debería tener el mismo "Id".

24
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).

25
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

26
00:01:19,837 --> 00:01:22,607
siempre deberían usar guiones o guiones bajos.

27
00:01:22,607 --> 00:01:25,597
En realidad a mí me gustan los guiones.

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

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

30
00:01:31,746 --> 00:01:35,479
Vamos nuevamente a nuestra etiqueta "" para el segundo paso.

31
00:01:35,598 --> 00:01:39,438
Vamos a añadir una nueva línea, después de la última regla.

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

33
00:01:43,255 --> 00:01:45,840
la parte que le dice al navegador 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 "´s" en la página.

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

37
00:01:57,203 --> 00:01:58,671
con un "Id" particular,

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

39
00:02:01,293 --> 00:02:04,547
Esto le dice al navegador que lo que sigue es un "Id".

40
00:02:05,147 --> 00:02:09,598
Ahora escribimos nuestro "Id" : "rabbits-song".

41
00:02:09,603 --> 00:02:11,882
El resto de la regla es igual que las anteriores.

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

43
00:02:13,722 --> 00:02:17,844
añadimos una propiedad, como el color de fondo,

44
00:02:18,364 --> 00:02:20,574
y ¡tan tan! ¡Funciona!

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

46
00:02:23,934 --> 00:02:26,623
y el estilo del primer párrafo es el mismo.

47
00:02:26,623 --> 00:02:30,764
Vamos a hacerlo de nuevo, para seleccionar este primer "".

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

49
00:02:33,515 --> 00:02:36,586
Está bien. En realidad necesitamos 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 ponemos nuestro cursor en el inicio de la etiqueta,

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

53
00:02:43,580 --> 00:02:46,691
y luego tecleamos un "Id" único y muy descriptivo.

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

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

56
00:02:54,043 --> 00:02:57,429
añadimos una nueva línea, escribimos 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 nuestras propiedades 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 oh! Ok, no funcionó.
Mmm, ¿ves algo que esté mal?

61
00:03:13,420 --> 00:03:15,279
¿Escribí de la misma 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
Mmm, parace que es lo mismo.

64
00:03:21,160 --> 00:03:23,374
Ahora puedo compararlos letra por letra,

65
00:03:23,374 --> 00:03:25,079
para averiguar qué es 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 estar segura de que es exactamente lo mismo.

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

69
00:03:35,561 --> 00:03:39,825
Mi "" tiene un color de fondo.
¿Y te diste cuenta qué cambio?

70
00:03:40,085 --> 00:03:44,474
Tal vez lo hiciste. Aquí había una "h".
La "h" era una "H" mayúscula,

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

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

73
00:03:50,315 --> 00:03:52,850
Esto es porque los "Id´s" distinguen mayúsculas de minúsculas.

74
00:03:52,930 --> 00:03:57,143
Así que tienes que escribirlas de la misma manera en todos lados.

75
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".

76
00:04:01,753 --> 00:04:04,645
Y así no tengo que pensar si usé mayúsculas o minúsculas.

77
00:04:05,158 --> 00:04:08,404
Ok, déjame darte una última advertencia:

78
00:04:08,404 --> 00:04:10,530
¡Los "Id´s" tienen que ser únicos!

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

80
00:04:13,444 --> 00:04:17,835
el navegador tal vez estilice los dos, pero puede que sólo estilice uno de ellos.

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

82
00:04:20,451 --> 00:04:23,096
"Id´s" lindos, únicos y descriptivos.