0:00:00.705,0:00:02.163
Ya aprendimos cómo hacer una página web

0:00:02.163,0:00:04.119
bonita y completa con todo tipo [br]de marcas

0:00:04.119,0:00:07.949
textos e imágenes, pero nos falta algo, [br]estilo.

0:00:07.949,0:00:09.400
Mi página web aquí se ve igual que

0:00:09.400,0:00:10.982
las páginas web que has estado haciendo.

0:00:10.982,0:00:13.686
Texto negro, fondo blanco, el mismo tipo[br]de letra,

0:00:13.686,0:00:15.851
todo igual de arriba a abajo.

0:00:15.851,0:00:18.019
Pero has navegado en la web y[br]has visto que las páginas web se ven

0:00:18.019,0:00:20.229
muy diferentes unas de otras.

0:00:20.229,0:00:21.609
Mira alrededor en Khan Academy

0:00:21.609,0:00:24.652
los diferentes colores y tipos y [br]tamaños de letra.

0:00:24.652,0:00:26.819
De hecho, es lo que vamos a hacer [br]ahora.

0:00:26.819,0:00:29.895
Pausa esta guía paso a paso y revisa algunas[br]páginas web.

0:00:29.895,0:00:31.625
¿Qué hay de diferente en cada [br]una de ellas?

0:00:31.625,0:00:35.012
¿Qué es lo que te gusta o te disgusta [br]de su estilo?

0:00:35.012,0:00:37.204
Voy a esperar aquí.

0:00:38.051,0:00:40.750
Es importante ver cómo las páginas web[br]pueden ser diferentes[br]

0:00:40.750,0:00:43.229
porque muy pronto podrás hacer

0:00:43.229,0:00:45.442
que tus propias páginas web se vean[br]diferentes y querrás hacerlo

0:00:45.442,0:00:48.535
de manera que seas feliz,[br]porque esto te representa,

0:00:48.535,0:00:51.198
y esto también hace felices a otros [br]usuarios .

0:00:51.198,0:00:53.001
Bueno, para montar nuestra página web[br]necesitamos

0:00:53.001,0:00:55.455
aprender un lenguaje completamente [br]nuevo, CSS.

0:00:55.455,0:00:57.878
Esto significa Hojas de Estilo en Cascada

0:00:57.878,0:00:59.759
y es una forma de definir los estilos [br]que vamos a aplicar

0:00:59.759,0:01:01.735
a las diferentes partes de nuestra [br]página web.

0:01:01.735,0:01:06.306
Incorporamos CSS dentro de HTML[br]pero realmente no es HTML.

0:01:06.306,0:01:08.025
Entonces tenemos que aprender un[br]lenguaje nuevo

0:01:08.025,0:01:11.165
y trata de no confundir HTML con CSS.

0:01:11.165,0:01:13.957
Vamos a ver cómo podemos usar los [br]estilos de CSS en todos los aspectos

0:01:13.957,0:01:16.696
de nuestra página web como los tipos[br]de letra, tamaños y diseños

0:01:16.696,0:01:20.548
pero empezaremos con algo que es[br]divertido, el color.

0:01:20.548,0:01:22.184
¿Qué tal si cambiamos algunos [br]encabezados

0:01:22.184,0:01:25.531
en nuestra página web a un [br]agradable verde césped?

0:01:25.531,0:01:28.404
Para empezar, necesitamos añadir[br]etiquetas de estilo

0:01:28.404,0:01:31.633
al encabezado de nuestra página.

0:01:31.845,0:01:34.461
Cuando el navegador ve esto, [br]lo considera correcto.[br]

0:01:34.461,0:01:37.388
Todo lo que está aquí dentro es CSS.

0:01:37.388,0:01:40.061
Voy a usar mi analizador CSS para [br]entender esto

0:01:40.061,0:01:43.105
en lugar del mi analizador de HTML.

0:01:43.459,0:01:48.312
Aquí dentro, vamos a añadir una regla [br]de estilos de CSS.

0:01:48.312,0:01:50.886
Una regla de estilos tiene un selector[br]que le dice al navegador

0:01:50.886,0:01:54.063
qué parte de la página web tiene [br]estilo, y declaraciones

0:01:54.063,0:01:56.791
que le dicen al navegador cómo estilizar[br]esa parte.

0:01:56.791,0:02:00.336
Si queremos estilizar todos nuestros [br]encabezados h2 en nuestra página,

0:02:00.336,0:02:03.995
tenemos que teclear este selector h2.

0:02:03.995,0:02:06.010
Después ponemos llaves.

0:02:06.010,0:02:08.475
Asegúrate de que sean llaves, [br]no corchetes.

0:02:08.475,0:02:10.151
Esos no funcionarán.

0:02:10.151,0:02:12.797
Dentro, pondremos nuestras [br]declaraciones

0:02:12.797,0:02:14.402
que tienen propiedades y valores.

0:02:14.402,0:02:19.240
Así que para cambiar el color del texto,[br]usamos la propiedad de color.

0:02:19.240,0:02:22.901
Entonces ponemos dos puntos y [br]necesitamos asignar un valor.

0:02:22.901,0:02:25.777
Tenemos que decirle al navegador qué[br]color queremos.

0:02:25.777,0:02:28.706
Bueno, podemos escribir green (verde).

0:02:29.306,0:02:32.197
Lo va entender porque el verde [br]es un color común.

0:02:32.197,0:02:33.833
Pero no es el verde que quiero.

0:02:33.833,0:02:35.930
Quiero un verde césped.

0:02:35.930,0:02:39.422
Si escribo grassy green (verde césped), oh.

0:02:39.422,0:02:42.401
Ahora el navegador está confundido[br]y pone los encabezados

0:02:42.401,0:02:45.656
negros de nuevo, porque no entiende[br]grassy green (verde césped).

0:02:45.656,0:02:48.446
Si queremos se capaces de especificar cualquier color,

0:02:48.446,0:02:51.638
tenemos que usar algo que se llama [br]espectro RGB

0:02:51.638,0:02:54.150
del cual tal vez escuchaste en tu clase[br]de arte.

0:02:54.150,0:02:55.996
No necesitas ser experto

0:02:55.996,0:02:58.806
porque aquí tenemos un selector de [br]color RGB para ti.

0:02:58.806,0:03:03.806
Para usarlo, basta con sustituir esto [br]con rgb y paréntesis.

0:03:04.083,0:03:06.559
Aparece un selector de color[br]y puedes mover

0:03:06.559,0:03:09.330
tu ratón dentro de él y seleccionar[br]un color,

0:03:09.330,0:03:12.405
y puedes ver el color actualizado en [br]tiempo real.

0:03:12.405,0:03:14.874
Cuando te sientas feliz, selecciona el color.

0:03:14.874,0:03:17.024
Ahora, ¿sabes por qué hay tres números

0:03:17.024,0:03:20.407
que no cambian en los paréntesis RGB?

0:03:20.407,0:03:22.933
Son los componentes rojo, verde y azul

0:03:22.933,0:03:26.228
que forman el color.

0:03:26.464,0:03:29.928
Ok, lo mejor acerca del selector [br]h2 de CSS

0:03:29.928,0:03:33.940
que usamos, es que pondrá iguales todos [br]los encabezados h2 en la página.

0:03:33.940,0:03:36.532
Entonces podemos cambiar múltiples[br]encabezados porque queremos

0:03:36.532,0:03:40.360
que todos los encabezados h2 sean [br]verdes y esto es consistente

0:03:40.360,0:03:43.475
para todos los encabezados h2 que se[br]encuentran en la página.

0:03:43.475,0:03:45.123
Si continuas con CSS, puedes[br]aprender

0:03:45.123,0:03:47.482
sobre otras maneras de cambiar sólo[br]algunas partes de la página,

0:03:47.482,0:03:50.020
como si quisieras cambiar sólo uno [br]de los encabezados h2.[br]

0:03:50.020,0:03:54.408
Pero se puede ir bastante lejos con [br]este tipo de selectores.

0:03:54.408,0:03:56.318
Vamos a ver otra regla de estilo de CSS.

0:03:56.318,0:03:59.213
Ahora vamos a cambiar el fondo por uno[br]azul cielo.

0:03:59.213,0:04:02.056
¿Cómo podemos cambiar el color del[br]fondo en una página?

0:04:02.056,0:04:05.811
Bueno, ¿qué etiqueta abarca toda[br]la página?

0:04:05.811,0:04:07.204
No es la etiqueta h1.

0:04:07.204,0:04:10.571
No es la etiqueta P, no es la de imagen.

0:04:10.571,0:04:13.168
Es la etiqueta body, recuerda, todo lo

0:04:13.168,0:04:16.201
que es visible está dentro de la etiqueta body.

0:04:16.201,0:04:18.380
Así que si queremos cambiar el estilo [br]a toda la página,

0:04:18.380,0:04:22.617
necesitamos usar un selector para [br]seleccionar esa etiqueta.

0:04:22.617,0:04:25.412
Entonces escribimos body.

0:04:26.905,0:04:31.278
Ahora, en lugar de color, vamos a [br]escribir background-color (color de fondo),

0:04:31.709,0:04:36.359
dos puntos, y luego rgb paréntesis.

0:04:36.359,0:04:41.049
Usamos nuestro selector de color, [br]hacemos que aparezca y seleccionamos [br]un azul

0:04:41.049,0:04:45.646
que me hace pensar en los conejitos y [br]en nubes de algodón.

0:04:45.646,0:04:46.661
¡Tan - tan!

0:04:46.661,0:04:49.370
Mira el estilo de mi página.

0:04:49.370,0:04:51.424
Hay cientos de propiedades más en CSS

0:04:51.494,0:04:53.970
aparte de color y color de fondo

0:04:54.116,0:04:56.592
pero fue divertido empezar con éstas.

0:04:56.762,0:04:58.033
De hecho, cuando termine de hablar,[br]juega un poco

0:04:58.163,0:05:01.137
con los colores que seleccioné y [br]personaliza esta página

0:05:01.527,0:05:03.874
para que quede más a tu estilo que al mío.

0:05:04.044,0:05:07.083
¡Muy bien sigue adelante!