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!