Introducción a CSS — Qué es, cómo se usa y formas de aplicarlo
¿Qué es CSS?
CSS (Cascading Style Sheets, o Hojas de Estilo en Cascada) es el lenguaje que usamos para dar estilo a las páginas web creadas con HTML.
Con CSS podemos:
✔ Cambiar colores, tamaños y fuentes.
✔ Ajustar la disposición de los elementos.
✔ Hacer que las páginas sean responsivas, se adapten al tamaño de diferentes dispositivos.
✔ Agregar animaciones y transiciones.
Importante: HTML define la estructura, CSS define la apariencia.
Cómo funciona CSS
CSS se aplica seleccionando uno o varios elementos HTML y definiendo un conjunto de propiedades y valores.
Ejemplo:
p {
color: blue; /* Texto en azul */
font-size: 18px; /* Tamaño de letra */
}
En este caso:
p→ selector (aplica a todos los párrafos).coloryfont-size→ propiedades.bluey18px→ valores.
Formas de aplicar CSS
Existen tres formas de aplicar CSS a nuestros elementos HTML.
CSS en línea (inline CSS): Se agrega directamente en el atributo
stylede la etiqueta HTML.Puede ser útil y rápido para pruebas. Desventaja: difícil de mantener en proyectos grandes.
<p style="color: red; font-size: 20px;">Texto rojo y grande</p>CSS interno (internal CSS): Se coloca dentro de la etiqueta
<style>en el<head>del documento HTML. Útil para estilos que solo aplican a esa página.<head> <style> h1 { color: darkgreen; text-align: center; } </style> </head>CSS externo (external CSS) — Recomendado: Se guarda en un archivo
.cssseparado y se enlaza con<link>. Ideal para mantener el código organizado y reutilizable.index.html
<head> <link rel="stylesheet" href="styles.css"> </head>styles.css
body { font-family: Arial, sans-serif; background-color: #f9f9f9; }
Selectores básicos en CSS
| Selector | Ejemplo | Qué selecciona |
| Por etiqueta | p | Todos los párrafos |
| Por id | #intro | Elemento con id="intro" |
| Por clase | .destacado | Todos los elementos con class="destacado" |
| Combinado | div p | Todos los <p> dentro de <div> |
Buenas prácticas con CSS
✔ Usa CSS externo para proyectos medianos o grandes.
✔ Agrupa estilos similares para evitar repetición.
✔ Usa nombres de clases descriptivos (btn-primario, texto-secundario).
✔ Mantener consistencia en la indentación y formato del código.
✔ Aprende a usar herramientas como DevTools del navegador para inspeccionar estilos (podes abrir esta herramienta presionando la tecla F12).
Resumen
CSS es la herramienta que convierte un documento HTML simple en una página atractiva y adaptable.
En el próximo artículo, aprenderemos sobre la propiedad display y cómo influye en el flujo y disposición de los elementos.
