1
00:00:00,705 --> 00:00:02,163
Ya aprendimos cómo hacer una página web

2
00:00:02,163 --> 00:00:04,119
bonita y completa con todo tipo 
de marcas

3
00:00:04,119 --> 00:00:07,949
textos e imágenes, pero nos falta algo, 
estilo.

4
00:00:07,949 --> 00:00:09,400
Mi página web aquí se ve igual que

5
00:00:09,400 --> 00:00:10,982
las páginas web que has estado haciendo.

6
00:00:10,982 --> 00:00:13,686
Texto negro, fondo blanco, el mismo tipo
de letra,

7
00:00:13,686 --> 00:00:15,851
todo igual de arriba a abajo.

8
00:00:15,851 --> 00:00:18,019
Pero has navegado en la web y
has visto que las páginas web se ven

9
00:00:18,019 --> 00:00:20,229
muy diferentes unas de otras.

10
00:00:20,229 --> 00:00:21,609
Mira alrededor en Khan Academy

11
00:00:21,609 --> 00:00:24,652
los diferentes colores y tipos y 
tamaños de letra.

12
00:00:24,652 --> 00:00:26,819
De hecho, es lo que vamos a hacer 
ahora.

13
00:00:26,819 --> 00:00:29,895
Pausa esta guía paso a paso y revisa algunas
páginas web.

14
00:00:29,895 --> 00:00:31,625
¿Qué hay de diferente en cada 
una de ellas?

15
00:00:31,625 --> 00:00:35,012
¿Qué es lo que te gusta o te disgusta 
de su estilo?

16
00:00:35,012 --> 00:00:37,204
Voy a esperar aquí.

17
00:00:38,051 --> 00:00:40,750
Es importante ver cómo las páginas web
pueden ser diferentes


18
00:00:40,750 --> 00:00:43,229
porque muy pronto podrás hacer

19
00:00:43,229 --> 00:00:45,442
que tus propias páginas web se vean
diferentes y querrás hacerlo

20
00:00:45,442 --> 00:00:48,535
de manera que seas feliz,
porque esto te representa,

21
00:00:48,535 --> 00:00:51,198
y esto también hace felices a otros 
usuarios .

22
00:00:51,198 --> 00:00:53,001
Bueno, para montar nuestra página web
necesitamos

23
00:00:53,001 --> 00:00:55,455
aprender un lenguaje completamente 
nuevo, CSS.

24
00:00:55,455 --> 00:00:57,878
Esto significa Hojas de Estilo en Cascada

25
00:00:57,878 --> 00:00:59,759
y es una forma de definir los estilos 
que vamos a aplicar

26
00:00:59,759 --> 00:01:01,735
a las diferentes partes de nuestra 
página web.

27
00:01:01,735 --> 00:01:06,306
Incorporamos CSS dentro de HTML
pero realmente no es HTML.

28
00:01:06,306 --> 00:01:08,025
Entonces tenemos que aprender un
lenguaje nuevo

29
00:01:08,025 --> 00:01:11,165
y trata de no confundir HTML con CSS.

30
00:01:11,165 --> 00:01:13,957
Vamos a ver cómo podemos usar los 
estilos de CSS en todos los aspectos

31
00:01:13,957 --> 00:01:16,696
de nuestra página web como los tipos
de letra, tamaños y diseños

32
00:01:16,696 --> 00:01:20,548
pero empezaremos con algo que es
divertido, el color.

33
00:01:20,548 --> 00:01:22,184
¿Qué tal si cambiamos algunos 
encabezados

34
00:01:22,184 --> 00:01:25,531
en nuestra página web a un 
agradable verde césped?

35
00:01:25,531 --> 00:01:28,404
Para empezar, necesitamos añadir
etiquetas de estilo

36
00:01:28,404 --> 00:01:31,633
al encabezado de nuestra página.

37
00:01:31,845 --> 00:01:34,461
Cuando el navegador ve esto, 
lo considera correcto.


38
00:01:34,461 --> 00:01:37,388
Todo lo que está aquí dentro es CSS.

39
00:01:37,388 --> 00:01:40,061
Voy a usar mi analizador CSS para 
entender esto

40
00:01:40,061 --> 00:01:43,105
en lugar del mi analizador de HTML.

41
00:01:43,459 --> 00:01:48,312
Aquí dentro, vamos a añadir una regla 
de estilos de CSS.

42
00:01:48,312 --> 00:01:50,886
Una regla de estilos tiene un selector
que le dice al navegador

43
00:01:50,886 --> 00:01:54,063
qué parte de la página web tiene 
estilo, y declaraciones

44
00:01:54,063 --> 00:01:56,791
que le dicen al navegador cómo estilizar
esa parte.

45
00:01:56,791 --> 00:02:00,336
Si queremos estilizar todos nuestros 
encabezados h2 en nuestra página,

46
00:02:00,336 --> 00:02:03,995
tenemos que teclear este selector h2.

47
00:02:03,995 --> 00:02:06,010
Después ponemos llaves.

48
00:02:06,010 --> 00:02:08,475
Asegúrate de que sean llaves, 
no corchetes.

49
00:02:08,475 --> 00:02:10,151
Esos no funcionarán.

50
00:02:10,151 --> 00:02:12,797
Dentro, pondremos nuestras 
declaraciones

51
00:02:12,797 --> 00:02:14,402
que tienen propiedades y valores.

52
00:02:14,402 --> 00:02:19,240
Así que para cambiar el color del texto,
usamos la propiedad de color.

53
00:02:19,240 --> 00:02:22,901
Entonces ponemos dos puntos y 
necesitamos asignar un valor.

54
00:02:22,901 --> 00:02:25,777
Tenemos que decirle al navegador qué
color queremos.

55
00:02:25,777 --> 00:02:28,706
Bueno, podemos escribir green (verde).

56
00:02:29,306 --> 00:02:32,197
Lo va entender porque el verde 
es un color común.

57
00:02:32,197 --> 00:02:33,833
Pero no es el verde que quiero.

58
00:02:33,833 --> 00:02:35,930
Quiero un verde césped.

59
00:02:35,930 --> 00:02:39,422
Si escribo grassy green (verde césped), oh.

60
00:02:39,422 --> 00:02:42,401
Ahora el navegador está confundido
y pone los encabezados

61
00:02:42,401 --> 00:02:45,656
negros de nuevo, porque no entiende
grassy green (verde césped).

62
00:02:45,656 --> 00:02:48,446
Si queremos se capaces de especificar cualquier color,

63
00:02:48,446 --> 00:02:51,638
tenemos que usar algo que se llama 
espectro RGB

64
00:02:51,638 --> 00:02:54,150
del cual tal vez escuchaste en tu clase
de arte.

65
00:02:54,150 --> 00:02:55,996
No necesitas ser experto

66
00:02:55,996 --> 00:02:58,806
porque aquí tenemos un selector de 
color RGB para ti.

67
00:02:58,806 --> 00:03:03,806
Para usarlo, basta con sustituir esto 
con rgb y paréntesis.

68
00:03:04,083 --> 00:03:06,559
Aparece un selector de color
y puedes mover

69
00:03:06,559 --> 00:03:09,330
tu ratón dentro de él y seleccionar
un color,

70
00:03:09,330 --> 00:03:12,405
y puedes ver el color actualizado en 
tiempo real.

71
00:03:12,405 --> 00:03:14,874
Cuando te sientas feliz, selecciona el color.

72
00:03:14,874 --> 00:03:17,024
Ahora, ¿sabes por qué hay tres números

73
00:03:17,024 --> 00:03:20,407
que no cambian en los paréntesis RGB?

74
00:03:20,407 --> 00:03:22,933
Son los componentes rojo, verde y azul

75
00:03:22,933 --> 00:03:26,228
que forman el color.

76
00:03:26,464 --> 00:03:29,928
Ok, lo mejor acerca del selector 
h2 de CSS

77
00:03:29,928 --> 00:03:33,940
que usamos, es que pondrá iguales todos 
los encabezados h2 en la página.

78
00:03:33,940 --> 00:03:36,532
Entonces podemos cambiar múltiples
encabezados porque queremos

79
00:03:36,532 --> 00:03:40,360
que todos los encabezados h2 sean 
verdes y esto es consistente

80
00:03:40,360 --> 00:03:43,475
para todos los encabezados h2 que se
encuentran en la página.

81
00:03:43,475 --> 00:03:45,123
Si continuas con CSS, puedes
aprender

82
00:03:45,123 --> 00:03:47,482
sobre otras maneras de cambiar sólo
algunas partes de la página,

83
00:03:47,482 --> 00:03:50,020
como si quisieras cambiar sólo uno 
de los encabezados h2.


84
00:03:50,020 --> 00:03:54,408
Pero se puede ir bastante lejos con 
este tipo de selectores.

85
00:03:54,408 --> 00:03:56,318
Vamos a ver otra regla de estilo de CSS.

86
00:03:56,318 --> 00:03:59,213
Ahora vamos a cambiar el fondo por uno
azul cielo.

87
00:03:59,213 --> 00:04:02,056
¿Cómo podemos cambiar el color del
fondo en una página?

88
00:04:02,056 --> 00:04:05,811
Bueno, ¿qué etiqueta abarca toda
la página?

89
00:04:05,811 --> 00:04:07,204
No es la etiqueta h1.

90
00:04:07,204 --> 00:04:10,571
No es la etiqueta P, no es la de imagen.

91
00:04:10,571 --> 00:04:13,168
Es la etiqueta body, recuerda, todo lo

92
00:04:13,168 --> 00:04:16,201
que es visible está dentro de la etiqueta body.

93
00:04:16,201 --> 00:04:18,380
Así que si queremos cambiar el estilo 
a toda la página,

94
00:04:18,380 --> 00:04:22,617
necesitamos usar un selector para 
seleccionar esa etiqueta.

95
00:04:22,617 --> 00:04:25,412
Entonces escribimos body.

96
00:04:26,905 --> 00:04:31,278
Ahora, en lugar de color, vamos a 
escribir background-color (color de fondo),

97
00:04:31,709 --> 00:04:36,359
dos puntos, y luego rgb paréntesis.

98
00:04:36,359 --> 00:04:41,049
Usamos nuestro selector de color, 
hacemos que aparezca y seleccionamos 
un azul

99
00:04:41,049 --> 00:04:45,646
que me hace pensar en los conejitos y 
en nubes de algodón.

100
00:04:45,646 --> 00:04:46,661
¡Tan - tan!

101
00:04:46,661 --> 00:04:49,370
Mira el estilo de mi página.

102
00:04:49,370 --> 00:04:51,424
Hay cientos de propiedades más en CSS

103
00:04:51,494 --> 00:04:53,970
aparte de color y color de fondo

104
00:04:54,116 --> 00:04:56,592
pero fue divertido empezar con éstas.

105
00:04:56,762 --> 00:04:58,033
De hecho, cuando termine de hablar,
juega un poco

106
00:04:58,163 --> 00:05:01,137
con los colores que seleccioné y 
personaliza esta página

107
00:05:01,527 --> 00:05:03,874
para que quede más a tu estilo que al mío.

108
00:05:04,044 --> 00:05:07,083
¡Muy bien sigue adelante!