Introducción a CSS: dando estilo a nuestra autobiografía
En la clase anterior trabajamos la maquetación HTML, construyendo únicamente la estructura de una página web mediante una autobiografía personal.
Este ejercicio nos permitió entender cómo se organiza el contenido usando etiquetas como encabezados, párrafos, secciones e imágenes.
En esta clase daremos el siguiente paso: hacer que esa estructura se vea bien.
¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje que nos permite definir el estilo visual de una página web.
Mientras que HTML se encarga de la estructura, CSS se encarga de la presentación.
Con CSS podemos modificar:
- Colores
- Tipografías
- Tamaños de texto
- Espaciados
- Fondos
- Bordes
- Distribución de los elementos en pantalla
📌 Idea clave:
HTML dice qué es cada cosa, CSS dice cómo se ve.
Separación entre estructura y diseño
Una buena práctica en desarrollo web es separar responsabilidades:
- HTML → contenido y estructura
- CSS → diseño y apariencia
Esto permite que el código sea:
- Más ordenado
- Más fácil de mantener
- Más profesional
¿Cómo se aplica CSS a un documento HTML?
Existen tres formas de usar CSS, pero para trabajar con nuestra autobiografía usaremos la más recomendada.
CSS en línea (inline)
Se escribe directamente dentro de una etiqueta HTML:
<p style="color: blue;">Este texto es azul</p>⚠️ No es recomendable para proyectos grandes, ya que mezcla estructura y diseño.
CSS interno
Se coloca dentro del usando la etiqueta <style>:
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>Es útil para pruebas rápidas, pero no es la mejor práctica.
CSS externo (forma recomendada)
Se crea un archivo independiente, por ejemplo style.css, y se enlaza al HTML:
<link rel="stylesheet" href="style.css">Ventajas:
- Mantiene el código limpio
- Permite reutilizar estilos
- Facilita el mantenimiento
👉 Esta es la forma que usaremos en clase.
Estructura básica de una regla CSS
Una regla CSS tiene tres partes:
selector {
propiedad: valor;
}Ejemplo:
h1 {
color: green;
}Esto indica que:
- El selector apunta a los elementos HTML
- La propiedad define qué se va a cambiar
- El valor define el resultado visual
Propiedades CSS básicas para comenzar
| Propiedad | Función |
|---|---|
color | Cambia el color del texto |
background-color | Cambia el fondo |
font-size | Tamaño de letra |
font-family | Tipo de fuente |
text-align | Alineación del texto |
margin | Espacio exterior |
padding | Espacio interior |
Aplicando CSS a la autobiografía
Ejemplo de un archivo style.css básico:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
}
section {
background-color: white;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
}Este CSS mejora la legibilidad y la presentación general del sitio.
Actividad de la clase
- Crear un archivo llamado style.css.
- Enlazarlo correctamente en el archivo HTML de la autobiografía.
- Aplicar estilos a:
- El fondo de la página
- Los encabezados
- Los párrafos
- Las secciones
- Comparar la versión sin CSS y con CSS.
Conclusión
CSS es una parte fundamental del desarrollo web. Gracias a él, una página pasa de ser solo texto estructurado a una experiencia visual atractiva.
A partir de este punto, todo lo que diseñemos tendrá dos capas:
- HTML para estructurar
- CSS para diseñar