01
¿Qué es CSS?
CSS significa Cascading Style Sheets, o Hojas de Estilo en Cascada.
Es el lenguaje que utilizamos para controlar la apariencia visual de los elementos HTML.
Con CSS podemos cambiar colores, tipografías, tamaños, espacios, fondos, bordes y la distribución de los elementos dentro de una página.
02
HTML y CSS trabajan juntos.
Imagina que tenemos este título en HTML:
Sin CSS, el navegador utilizará sus estilos predeterminados.
Podemos utilizar CSS para modificarlo:
font-size: 48px;
text-align: center;
}
El contenido sigue siendo el mismo. Lo que cambia es su presentación.
03
Cómo se escribe una regla CSS.
Una regla CSS básica contiene un selector, una propiedad y un valor.
font-size: 18px;
}
Selector
p indica qué elemento HTML queremos modificar.
Propiedad
font-size indica qué característica queremos cambiar.
Valor
18px indica el valor que queremos aplicar.
04
Crea tu archivo styles.css.
Vuelve a la carpeta que creaste en la lección anterior:
Ya debería contener:
Ahora crea un segundo archivo llamado:
Tu proyecto tendrá ahora dos archivos:
├── index.html
└── styles.css
05
Conecta CSS con HTML.
Crear `styles.css` no es suficiente. Tenemos que decirle al documento HTML que utilice ese archivo.
Dentro de <head> de `index.html`, añade:
El inicio de tu documento quedará parecido a esto:
<meta charset="UTF-8">
<title>Mi primera web</title>
<link rel="stylesheet" href="styles.css">
</head>
06
Cambia la tipografía y el tamaño del texto.
Abre `styles.css` y escribe:
font-family: Arial, sans-serif;
}
h1 {
font-size: 48px;
}
p {
font-size: 18px;
line-height: 1.7;
}
Guarda el archivo y actualiza la página en el navegador.
Ya deberías notar un cambio en la apariencia.
07
Añade colores.
CSS también permite controlar los colores.
background: #f7f5f0;
color: #222222;
}
En este ejemplo:
background cambia el fondo de la página.
color cambia el color del texto.
08
Entiende margin y padding.
Los espacios son una parte fundamental del diseño web.
MARGIN
Espacio exterior.
Crea espacio alrededor de un elemento, separándolo de otros elementos.
PADDING
Espacio interior.
Crea espacio entre el contenido y los bordes del propio elemento.
Por ejemplo:
margin: 40px 0;
padding: 60px 30px;
}
09
Diseña tu primera página.
Vamos a aplicar varios estilos juntos.
En `styles.css`, prueba:
margin: 0;
padding: 60px 30px;
font-family: Arial, sans-serif;
background: #f7f5f0;
color: #222222;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
h2 {
font-size: 30px;
margin-top: 50px;
}
p {
max-width: 650px;
font-size: 18px;
line-height: 1.7;
}
Guarda el archivo y vuelve a cargar `index.html`.
La misma estructura HTML que creaste en la lección anterior debería tener ahora una apariencia mucho más cuidada.
10
CSS no cambia el significado del contenido.
Este concepto es importante.
Si un elemento es un título principal, seguirá siendo un h1 independientemente de que CSS lo haga grande, pequeño, negro o de cualquier otro color.
Primero debemos construir una estructura HTML correcta. Después utilizamos CSS para presentarla visualmente.
RESUMEN
Lo que has aprendido.
- CSS controla la apariencia de los elementos HTML.
- Una regla CSS contiene selector, propiedad y valor.
- Los estilos pueden guardarse en `styles.css`.
- HTML y CSS se conectan mediante la etiqueta link.
- CSS permite modificar tipografías y tamaños.
- También permite controlar colores y fondos.
- Margin crea espacio exterior.
- Padding crea espacio interior.
- HTML define la estructura y CSS su presentación.
PONLO EN PRÁCTICA
Da estilo a tu primera web.
Abre el proyecto que empezaste en la lección anterior y realiza estos cambios:
- Crea `styles.css`.
- Conéctalo con `index.html`.
- Cambia la tipografía de la página.
- Cambia el color del fondo.
- Cambia el tamaño del h1.
- Aumenta el interlineado de los párrafos.
- Añade padding al body.
Después experimenta cambiando algunos valores. La mejor forma de empezar a entender CSS es observar qué ocurre cuando modificas cada propiedad.