1
00:00:00,531 --> 00:00:04,192
Hemos logrado hacer muchas cosas, con los selectores que hemos visto en CSS:

2
00:00:04,192 --> 00:00:08,006
seleccionando elementos por nombre de etiqueta, por Id, por nombre de clase.

3
00:00:08,290 --> 00:00:11,028
Vamos a revisarlos por un momento en esta página web.

4
00:00:11,257 --> 00:00:13,655
Esta página web es sobre donas.

5
00:00:13,789 --> 00:00:15,963
Y tiene un encabezado, párrafos,

6
00:00:15,963 --> 00:00:19,234
y algunos de los párrafos son cortos, de una sóla línea.

7
00:00:19,242 --> 00:00:23,142
El CSS empieza con una regla sobre seleccionar todas las etiquetas "" de la página web,

8
00:00:23,142 --> 00:00:25,611
y asignarles un tipo de letra "sans-serif".

9
00:00:26,074 --> 00:00:30,063
La voy a cambiar a "monospace" para que puedan ver todo lo que está seleccionado.

10
00:00:30,785 --> 00:00:31,808
¿Lo vieron?

11
00:00:34,102 --> 00:00:37,836
La siguiente regla selecciona el elemento que tiene un "Id" igual a "donut-header".

12
00:00:38,034 --> 00:00:41,913
Y sabemos que es un "Id" porque la regla inicia con el símbolo numeral "#".

13
00:00:42,029 --> 00:00:43,759
Como el "Id" es muy descriptivo,

14
00:00:43,759 --> 00:00:46,688
me suena a que se ha seleccionado el encabezado grande de arriba,

15
00:00:46,688 --> 00:00:47,747
y se ha cambiado la fuente.

16
00:00:47,974 --> 00:00:51,417
Pero voy a desplazarme hacia abajo para confirmar que "" tiene ese "Id".

17
00:00:51,453 --> 00:00:53,184
Sí, aquí está.

18
00:00:53,387 --> 00:00:56,790
La última regla selecciona todos los elementos que tienen "fact" como nombre de clase.

19
00:00:56,896 --> 00:01:00,384
Y sabemos que estamos buscando una clase porque esta regla empieza con un punto.

20
00:01:00,488 --> 00:01:02,956
Para descubrir cuáles elementos tienen ese nombre de clase,

21
00:01:02,956 --> 00:01:05,230
puedo ver lo que la regla está haciendo,

22
00:01:05,230 --> 00:01:07,833
añadiendo un borde en la parte de arriba y de abajo y algo de relleno "padding",

23
00:01:07,833 --> 00:01:10,462
o puedo buscar dentro de mi HTML el nombre de la clase.

24
00:01:10,619 --> 00:01:13,148
Puedo ver el nombre de la clase en este párrafo,

25
00:01:13,148 --> 00:01:14,300
y en este párrafo,

26
00:01:14,300 --> 00:01:16,461
los dos párrafos que contienen información de una línea,

27
00:01:16,461 --> 00:01:18,315
y es por eso que tienen el borde.

28
00:01:18,448 --> 00:01:19,778
Los nombres de clases son geniales,

29
00:01:19,778 --> 00:01:23,007
porque nos permiten usar los mismos estilos en múltiples elementos.

30
00:01:23,033 --> 00:01:25,346
Pero hay más que podemos hacer con los nombres de clases,

31
00:01:25,346 --> 00:01:27,058
y es lo que les voy a mostrar ahora.

32
00:01:27,230 --> 00:01:29,136
Entonces, tenemos una página web sobre donas,

33
00:01:29,136 --> 00:01:31,361
pero las donas en realidad no son saludables para ti.

34
00:01:31,436 --> 00:01:34,007
Puede que sean una de las cosas menos sanas para ti.

35
00:01:34,030 --> 00:01:36,963
Y también son adictivas, por toda esa azúcar que contienen.

36
00:01:37,009 --> 00:01:39,644
Así que si vamos a tener una página que hable de ellas,

37
00:01:39,644 --> 00:01:42,421
probablemente deberíamos advertir a la gente sobre lo poco saludable que son.

38
00:01:42,539 --> 00:01:47,257
¿Qué tal si hacemos roja esta clase "fact", para realmente mostrar que es una advertencia?

39
00:01:47,626 --> 00:01:49,015
¿Cómo hacemos eso?

40
00:01:49,200 --> 00:01:53,401
Bueno, podríamos empezar añadiendo la propiedad "color" a la regla "fact" de CSS,

41
00:01:53,401 --> 00:01:55,099
y ver qué pasa.

42
00:01:55,650 --> 00:02:00,326
Pero esto hace que las dos "fact" sean rojas, y la segunda "fact" no es una advertencia,

43
00:02:00,326 --> 00:02:01,847
es sólo una aclaración de ortografía.

44
00:02:02,051 --> 00:02:03,845
Así que no queremos que sea roja.

45
00:02:04,169 --> 00:02:05,578
Podríamos añadir un "Id",

46
00:02:05,578 --> 00:02:09,573
pero entonces si quisiéramos colorear otras cosas más tarde que son advertencias

47
00:02:09,573 --> 00:02:10,958
y añadir más advertencias,

48
00:02:10,958 --> 00:02:14,185
tendríamos que añadir más y más "Id´s", y reglas para esos "Id´s".

49
00:02:14,391 --> 00:02:19,806
En un caso como éste, lo mejor es añadir otra clase a la etiqueta "".

50
00:02:20,104 --> 00:02:24,151
Los navegadores en realidad nos permiten añadir las clases que queramos a una etiqueta.

51
00:02:24,541 --> 00:02:28,532
Para hacer eso, simplemente ponemos el cursor después del último nombre de clase,

52
00:02:28,532 --> 00:02:33,196
ponemos un espacio, y luego escribimos un nombre nuevo de clase, como "warning".

53
00:02:33,984 --> 00:02:36,329
Ahora podemos hacer una regla para "warning",

54
00:02:37,119 --> 00:02:40,243
y mover esta propiedad de color a esta regla.

55
00:02:40,835 --> 00:02:44,001
Y ahora la clase "fact" de arriba es roja, y la segunda no.

56
00:02:44,218 --> 00:02:45,411
Hermoso.

57
00:02:45,852 --> 00:02:49,285
Podemos poner el nombre de clase en más elementos, como antes.

58
00:02:49,643 --> 00:02:54,121
Tal vez queremos colorear el texto "deep fried",

59
00:02:54,121 --> 00:02:56,986
lo queremos colorear de rojo porque "deep fried" (fritas) es algo

60
00:02:56,986 --> 00:02:59,872
a menudo asociado con cosas que no son saludables.

61
00:03:00,025 --> 00:03:03,692
Así que podemos añadir la clase "warning",

62
00:03:03,692 --> 00:03:04,626
también roja.

63
00:03:05,035 --> 00:03:10,820
Ahora, fíjate que esta advertencia de aquí está de color rojo,

64
00:03:10,820 --> 00:03:14,653
y también tiene un borde arriba y un borde abajo.

65
00:03:14,795 --> 00:03:17,545
Y eso es lo que pasa cuando usamos muchas clases,

66
00:03:17,545 --> 00:03:20,578
los navegadores van a revisar todas las reglas que se aplican a ellas,

67
00:03:20,578 --> 00:03:22,340
y van a aplicar todos los estilos.

68
00:03:22,733 --> 00:03:26,810
Debemos ser cuidadosos cuando usamos colores para transmitir significados,

69
00:03:26,810 --> 00:03:28,563
porque algunas personas no distinguen los colores.

70
00:03:28,636 --> 00:03:31,298
Hay algunas personas que difícilmente pueden notar la diferencia

71
00:03:31,298 --> 00:03:33,815
entre rojo y negro, tal vez tú seas una de ellas.

72
00:03:33,899 --> 00:03:37,463
Así que déjenme cambiar nuestra clase para hacerla más evidente para todas las personas.

73
00:03:38,070 --> 00:03:40,711
Cambiaremos este color y el color de fondo,

74
00:03:40,711 --> 00:03:44,740
porque cualquier persona podría identificar que un elemento tiene un color de fondo.

75
00:03:45,104 --> 00:03:47,564
El rojo y negro tienen un contraste muy bajo.

76
00:03:47,564 --> 00:03:51,304
Y el contraste también es importante para hacer que nuestra página sea legible para todos.

77
00:03:51,400 --> 00:03:54,080
Así que voy a cambiar el color a blanco.

78
00:03:54,785 --> 00:03:56,811
Ok, ahora tenemos más contraste,

79
00:03:56,811 --> 00:03:59,611
y un fondo rojo para las personas que pueden ver el rojo.

80
00:03:59,994 --> 00:04:04,497
Y como estamos usando clases las dos etiquetas "warning" tienen los mismos estilos.

81
00:04:04,774 --> 00:04:07,787
Ahora, gracias a la flexibilidad de las clases de CSS,

82
00:04:07,787 --> 00:04:10,735
podemos salvar al mundo entero de las donas.