Ya aprendimos cómo hacer una página web bonita y completa con todo tipo de marcas textos e imágenes, pero nos falta algo, estilo. Mi página web aquí se ve igual que las páginas web que has estado haciendo. Texto negro, fondo blanco, el mismo tipo de letra, todo igual de arriba a abajo. Pero has navegado en la web y has visto que las páginas web se ven muy diferentes unas de otras. Mira alrededor en Khan Academy los diferentes colores y tipos y tamaños de letra. De hecho, es lo que vamos a hacer ahora. Pausa esta guía paso a paso y revisa algunas páginas web. ¿Qué hay de diferente en cada una de ellas? ¿Qué es lo que te gusta o te disgusta de su estilo? Voy a esperar aquí. Es importante ver cómo las páginas web pueden ser diferentes porque muy pronto podrás hacer que tus propias páginas web se vean diferentes y querrás hacerlo de manera que seas feliz, porque esto te representa, y esto también hace felices a otros usuarios . Bueno, para montar nuestra página web necesitamos aprender un lenguaje completamente nuevo, CSS. Esto significa Hojas de Estilo en Cascada y es una forma de definir los estilos que vamos a aplicar a las diferentes partes de nuestra página web. Incorporamos CSS dentro de HTML pero realmente no es HTML. Entonces tenemos que aprender un lenguaje nuevo y trata de no confundir HTML con CSS. Vamos a ver cómo podemos usar los estilos de CSS en todos los aspectos de nuestra página web como los tipos de letra, tamaños y diseños pero empezaremos con algo que es divertido, el color. ¿Qué tal si cambiamos algunos encabezados en nuestra página web a un agradable verde césped? Para empezar, necesitamos añadir etiquetas de estilo al encabezado de nuestra página. Cuando el navegador ve esto, lo considera correcto. Todo lo que está aquí dentro es CSS. Voy a usar mi analizador CSS para entender esto en lugar del mi analizador de HTML. Aquí dentro, vamos a añadir una regla de estilos de CSS. Una regla de estilos tiene un selector que le dice al navegador qué parte de la página web tiene estilo, y declaraciones que le dicen al navegador cómo estilizar esa parte. Si queremos estilizar todos nuestros encabezados h2 en nuestra página, tenemos que teclear este selector h2. Después ponemos llaves. Asegúrate de que sean llaves, no corchetes. Esos no funcionarán. Dentro, pondremos nuestras declaraciones que tienen propiedades y valores. Así que para cambiar el color del texto, usamos la propiedad de color. Entonces ponemos dos puntos y necesitamos asignar un valor. Tenemos que decirle al navegador qué color queremos. Bueno, podemos escribir green (verde). Lo va entender porque el verde es un color común. Pero no es el verde que quiero. Quiero un verde césped. Si escribo grassy green (verde césped), oh. Ahora el navegador está confundido y pone los encabezados negros de nuevo, porque no entiende grassy green (verde césped). Si queremos se capaces de especificar cualquier color, tenemos que usar algo que se llama espectro RGB del cual tal vez escuchaste en tu clase de arte. No necesitas ser experto porque aquí tenemos un selector de color RGB para ti. Para usarlo, basta con sustituir esto con rgb y paréntesis. Aparece un selector de color y puedes mover tu ratón dentro de él y seleccionar un color, y puedes ver el color actualizado en tiempo real. Cuando te sientas feliz, selecciona el color. Ahora, ¿sabes por qué hay tres números que no cambian en los paréntesis RGB? Son los componentes rojo, verde y azul que forman el color. Ok, lo mejor acerca del selector h2 de CSS que usamos, es que pondrá iguales todos los encabezados h2 en la página. Entonces podemos cambiar múltiples encabezados porque queremos que todos los encabezados h2 sean verdes y esto es consistente para todos los encabezados h2 que se encuentran en la página. Si continuas con CSS, puedes aprender sobre otras maneras de cambiar sólo algunas partes de la página, como si quisieras cambiar sólo uno de los encabezados h2. Pero se puede ir bastante lejos con este tipo de selectores. Vamos a ver otra regla de estilo de CSS. Ahora vamos a cambiar el fondo por uno azul cielo. ¿Cómo podemos cambiar el color del fondo en una página? Bueno, ¿qué etiqueta abarca toda la página? No es la etiqueta h1. No es la etiqueta P, no es la de imagen. Es la etiqueta body, recuerda, todo lo que es visible está dentro de la etiqueta body. Así que si queremos cambiar el estilo a toda la página, necesitamos usar un selector para seleccionar esa etiqueta. Entonces escribimos body. Ahora, en lugar de color, vamos a escribir background-color (color de fondo), dos puntos, y luego rgb paréntesis. Usamos nuestro selector de color, hacemos que aparezca y seleccionamos un azul que me hace pensar en los conejitos y en nubes de algodón. ¡Tan - tan! Mira el estilo de mi página. Hay cientos de propiedades más en CSS aparte de color y color de fondo pero fue divertido empezar con éstas. De hecho, cuando termine de hablar, juega un poco con los colores que seleccioné y personaliza esta página para que quede más a tu estilo que al mío. ¡Muy bien sigue adelante!