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!