Introducción
a
CSS
¿Qué
es
CSS
y
para
qué
sirve?
CSS
(Cascading
Style
Sheets)
es
el
lenguaje
que
usamos
para
darle
color,
diseño
y
estilo
a
nuestras
páginas
web.
Con
CSS,
podemos
cambiar:
●
Los
colores
de
fondo
y
texto.
●
El
tamaño
y
tipo
de
letra.
●
La
posición
de
los
elementos
en
la
pantalla.
●
Y
mucho
más.
Es
como
la
ropa
de
una
página
web:
HTML
es
el
esqueleto
y
CSS
es
la
apariencia.
4.1.
Sintaxis
y
Selectores
¿Cómo
funciona
CSS?
Las
reglas
en
CSS
tienen
esta
estructura:
selector
{
propiedad:
valor;
}
●
Selector
→
Indica
a
qué
elementos
queremos
aplicar
los
estilos.
●
Propiedad
→
Define
qué
queremos
cambiar
(color,
tamaño,
etc.).
●
Valor
→
Especifica
cómo
queremos
que
sea
ese
cambio.
Ejemplo:
body
{
background-color:
lightblue;
/*
Fondo
azul
claro
*/
}
h1
{
color:
navy;
/*
Texto
azul
oscuro
*/
text-align:
center;
/*
Centrar
el
título
*/
}
Explicación:
●
body
→
Selecciona
toda
la
página.
●
background-color:
lightblue;
→
Cambia
el
color
de
fondo
a
azul
claro.
●
h1
→
Selecciona
todos
los
títulos
<h1>
.
●
color:
navy;
→
Cambia
el
color
del
texto
a
azul
oscuro.
●
text-align:
center;
→
Centra
el
texto
en
la
pantalla.
Ejercicio:
Aplicar
estilos
a
una
página
HTML
Vamos
a
crear
una
página
con
estilos
personalizados.
1.
Crea
un
archivo
HTML
Copia
este
código
en
un
archivo
llamado
index.html:
<!DOCTYPE
html>
<html
lang="es">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Mi
primera
página
con
CSS</title>
<link
rel="stylesheet"
href="styles.css">
</head>
<body>
<h1>Bienvenidos
a
mi
página</h1>
<p>Este
es
un
párrafo
de
prueba.</p>
</body>
</html>
2.
Crea
un
archivo
CSS
Ahora,
crea
otro
archivo
llamado
styles.css
y
escribe:
body
{
background-color:
#f0e68c;
/*
Fondo
amarillo
claro
*/
}
h1
{
color:
darkred;
/*
Rojo
oscuro
*/
text-align:
center;
/*
Centrado
*/
}
p
{
color:
darkblue;
/*
Azul
oscuro
*/
}
3.
Abre
el
archivo
en
el
navegador
Guarda
ambos
archivos
en
la
misma
carpeta
y
abre
index.html
en
tu
navegador.
Deberías
ver:
●
Un
fondo
amarillo
claro.
●
Un
título
rojo
oscuro
centrado.
●
Un
párrafo
con
texto
azul
oscuro.
Desafío:
Cambia
los
colores
y
experimenta
con
otros
valores.
CSS
es
creatividad.
Contactanos
Español
Sin
Fronteras
Gmail
espanolsinfronteras1@gmail.com
Español
Sin
Fronteras
-
Recursos
Educativos
Gratuitos
Instagram
@espanol_sin_fronteras_org