WEBVTT

00:00:00.705 --> 00:00:02.163
Ya aprendimos cómo hacer una página web

00:00:02.163 --> 00:00:04.119
bonita y completa con todo tipo 
de marcas

00:00:04.119 --> 00:00:07.949
textos e imágenes, pero nos falta algo, 
estilo.

00:00:07.949 --> 00:00:09.400
Mi página web aquí se ve igual que

00:00:09.400 --> 00:00:10.982
las páginas web que has estado haciendo.

00:00:10.982 --> 00:00:13.686
Texto negro, fondo blanco, el mismo tipo
de letra,

00:00:13.686 --> 00:00:15.851
todo igual de arriba a abajo.

00:00:15.851 --> 00:00:18.019
Pero has navegado en la web y
has visto que las páginas web se ven

00:00:18.019 --> 00:00:20.229
muy diferentes unas de otras.

00:00:20.229 --> 00:00:21.609
Mira alrededor en Khan Academy

00:00:21.609 --> 00:00:24.652
los diferentes colores y tipos y 
tamaños de letra.

00:00:24.652 --> 00:00:26.819
De hecho, es lo que vamos a hacer 
ahora.

00:00:26.819 --> 00:00:29.895
Pausa esta guía paso a paso y revisa algunas
páginas web.

00:00:29.895 --> 00:00:31.625
¿Qué hay de diferente en cada 
una de ellas?

00:00:31.625 --> 00:00:35.012
¿Qué es lo que te gusta o te disgusta 
de su estilo?

00:00:35.012 --> 00:00:37.204
Voy a esperar aquí.

00:00:38.051 --> 00:00:40.750
Es importante ver cómo las páginas web
pueden ser diferentes


00:00:40.750 --> 00:00:43.229
porque muy pronto podrás hacer

00:00:43.229 --> 00:00:45.442
que tus propias páginas web se vean
diferentes y querrás hacerlo

00:00:45.442 --> 00:00:48.535
de manera que seas feliz,
porque esto te representa,

00:00:48.535 --> 00:00:51.198
y esto también hace felices a otros 
usuarios .

00:00:51.198 --> 00:00:53.001
Bueno, para montar nuestra página web
necesitamos

00:00:53.001 --> 00:00:55.455
aprender un lenguaje completamente 
nuevo, CSS.

00:00:55.455 --> 00:00:57.878
Esto significa Hojas de Estilo en Cascada

00:00:57.878 --> 00:00:59.759
y es una forma de definir los estilos 
que vamos a aplicar

00:00:59.759 --> 00:01:01.735
a las diferentes partes de nuestra 
página web.

00:01:01.735 --> 00:01:06.306
Incorporamos CSS dentro de HTML
pero realmente no es HTML.

00:01:06.306 --> 00:01:08.025
Entonces tenemos que aprender un
lenguaje nuevo

00:01:08.025 --> 00:01:11.165
y trata de no confundir HTML con CSS.

00:01:11.165 --> 00:01:13.957
Vamos a ver cómo podemos usar los 
estilos de CSS en todos los aspectos

00:01:13.957 --> 00:01:16.696
de nuestra página web como los tipos
de letra, tamaños y diseños

00:01:16.696 --> 00:01:20.548
pero empezaremos con algo que es
divertido, el color.

00:01:20.548 --> 00:01:22.184
¿Qué tal si cambiamos algunos 
encabezados

00:01:22.184 --> 00:01:25.531
en nuestra página web a un 
agradable verde césped?

00:01:25.531 --> 00:01:28.404
Para empezar, necesitamos añadir
etiquetas de estilo

00:01:28.404 --> 00:01:31.633
al encabezado de nuestra página.

00:01:31.845 --> 00:01:34.461
Cuando el navegador ve esto, 
lo considera correcto.


00:01:34.461 --> 00:01:37.388
Todo lo que está aquí dentro es CSS.

00:01:37.388 --> 00:01:40.061
Voy a usar mi analizador CSS para 
entender esto

00:01:40.061 --> 00:01:43.105
en lugar del mi analizador de HTML.

00:01:43.459 --> 00:01:48.312
Aquí dentro, vamos a añadir una regla 
de estilos de CSS.

00:01:48.312 --> 00:01:50.886
Una regla de estilos tiene un selector
que le dice al navegador

00:01:50.886 --> 00:01:54.063
qué parte de la página web tiene 
estilo, y declaraciones

00:01:54.063 --> 00:01:56.791
que le dicen al navegador cómo estilizar
esa parte.

00:01:56.791 --> 00:02:00.336
Si queremos estilizar todos nuestros 
encabezados h2 en nuestra página,

00:02:00.336 --> 00:02:03.995
tenemos que teclear este selector h2.

00:02:03.995 --> 00:02:06.010
Después ponemos llaves.

00:02:06.010 --> 00:02:08.475
Asegúrate de que sean llaves, 
no corchetes.

00:02:08.475 --> 00:02:10.151
Esos no funcionarán.

00:02:10.151 --> 00:02:12.797
Dentro, pondremos nuestras 
declaraciones

00:02:12.797 --> 00:02:14.402
que tienen propiedades y valores.

00:02:14.402 --> 00:02:19.240
Así que para cambiar el color del texto,
usamos la propiedad de color.

00:02:19.240 --> 00:02:22.901
Entonces ponemos dos puntos y 
necesitamos asignar un valor.

00:02:22.901 --> 00:02:25.777
Tenemos que decirle al navegador qué
color queremos.

00:02:25.777 --> 00:02:28.706
Bueno, podemos escribir green (verde).

00:02:29.306 --> 00:02:32.197
Lo va entender porque el verde 
es un color común.

00:02:32.197 --> 00:02:33.833
Pero no es el verde que quiero.

00:02:33.833 --> 00:02:35.930
Quiero un verde césped.

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

00:02:39.422 --> 00:02:42.401
Ahora el navegador está confundido
y pone los encabezados

00:02:42.401 --> 00:02:45.656
negros de nuevo, porque no entiende
grassy green (verde césped).

00:02:45.656 --> 00:02:48.446
Si queremos se capaces de especificar cualquier color,

00:02:48.446 --> 00:02:51.638
tenemos que usar algo que se llama 
espectro RGB

00:02:51.638 --> 00:02:54.150
del cual tal vez escuchaste en tu clase
de arte.

00:02:54.150 --> 00:02:55.996
No necesitas ser experto

00:02:55.996 --> 00:02:58.806
porque aquí tenemos un selector de 
color RGB para ti.

00:02:58.806 --> 00:03:03.806
Para usarlo, basta con sustituir esto 
con rgb y paréntesis.

00:03:04.083 --> 00:03:06.559
Aparece un selector de color
y puedes mover

00:03:06.559 --> 00:03:09.330
tu ratón dentro de él y seleccionar
un color,

00:03:09.330 --> 00:03:12.405
y puedes ver el color actualizado en 
tiempo real.

00:03:12.405 --> 00:03:14.874
Cuando te sientas feliz, selecciona el color.

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

00:03:17.024 --> 00:03:20.407
que no cambian en los paréntesis RGB?

00:03:20.407 --> 00:03:22.933
Son los componentes rojo, verde y azul

00:03:22.933 --> 00:03:26.228
que forman el color.

00:03:26.464 --> 00:03:29.928
Ok, lo mejor acerca del selector 
h2 de CSS

00:03:29.928 --> 00:03:33.940
que usamos, es que pondrá iguales todos 
los encabezados h2 en la página.

00:03:33.940 --> 00:03:36.532
Entonces podemos cambiar múltiples
encabezados porque queremos

00:03:36.532 --> 00:03:40.360
que todos los encabezados h2 sean 
verdes y esto es consistente

00:03:40.360 --> 00:03:43.475
para todos los encabezados h2 que se
encuentran en la página.

00:03:43.475 --> 00:03:45.123
Si continuas con CSS, puedes
aprender

NOTE Paragraph

00:03:45.123 --> 00:03:47.482
sobre otras maneras de cambiar sólo
algunas partes de la página,

00:03:47.482 --> 00:03:50.020
como si quisieras cambiar sólo uno 
de los encabezados h2.


00:03:50.020 --> 00:03:54.408
Pero se puede ir bastante lejos con 
este tipo de selectores.

00:03:54.408 --> 00:03:56.318
Vamos a ver otra regla de estilo de CSS.

00:03:56.318 --> 00:03:59.213
Ahora vamos a cambiar el fondo por uno
azul cielo.

00:03:59.213 --> 00:04:02.056
¿Cómo podemos cambiar el color del
fondo en una página?

00:04:02.056 --> 00:04:05.811
Bueno, ¿qué etiqueta abarca toda
la página?

00:04:05.811 --> 00:04:07.204
No es la etiqueta h1.

00:04:07.204 --> 00:04:10.571
No es la etiqueta P, no es la de imagen.

00:04:10.571 --> 00:04:13.168
Es la etiqueta body, recuerda, todo lo

00:04:13.168 --> 00:04:16.201
que es visible está dentro de la etiqueta body.

00:04:16.201 --> 00:04:18.380
Así que si queremos cambiar el estilo 
a toda la página,

00:04:18.380 --> 00:04:22.617
necesitamos usar un selector para 
seleccionar esa etiqueta.

00:04:22.617 --> 00:04:25.412
Entonces escribimos body.

00:04:26.905 --> 00:04:31.278
Ahora, en lugar de color, vamos a 
escribir background-color (color de fondo),

00:04:31.709 --> 00:04:36.359
dos puntos, y luego rgb paréntesis.

00:04:36.359 --> 00:04:41.049
Usamos nuestro selector de color, 
hacemos que aparezca y seleccionamos 
un azul

00:04:41.049 --> 00:04:45.646
que me hace pensar en los conejitos y 
en nubes de algodón.

00:04:45.646 --> 00:04:46.661
¡Tan - tan!

00:04:46.661 --> 00:04:49.370
Mira el estilo de mi página.

00:04:49.370 --> 00:04:51.424
Hay cientos de propiedades más en CSS

00:04:51.494 --> 00:04:53.970
aparte de color y color de fondo

00:04:54.116 --> 00:04:56.592
pero fue divertido empezar con éstas.

00:04:56.762 --> 00:04:58.033
De hecho, cuando termine de hablar,
juega un poco

00:04:58.163 --> 00:05:01.137
con los colores que seleccioné y 
personaliza esta página

00:05:01.527 --> 00:05:03.874
para que quede más a tu estilo que al mío.

00:05:04.044 --> 00:05:07.083
¡Muy bien sigue adelante!