bearstips

CSS desde cero

CSS (Cascading Style Sheets) es el lenguaje que permite dar estilo y diseño a las páginas web creadas con HTML. Si HTML es la estructura de una casa, CSS es la pintura, la decoración y el diseño visual. Aprender CSS es fundamental para convertirte en desarrollador web front-end y crear sitios modernos, atractivos y profesionales.

Ejemplo de estilos CSS aplicados a HTML

¿Qué es CSS y por qué es tan importante?

CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada). Su función principal es controlar la apariencia visual de una página web. Con CSS puedes:

  • Cambiar colores de texto y fondos.
  • Modificar tamaños y tipos de letra.
  • Controlar márgenes, espacios y alineación.
  • Crear diseños responsivos para móviles y tablets.
  • Agregar animaciones y efectos visuales.

Sin CSS, las páginas web serían simples bloques de texto sin diseño ni atractivo visual.

Requisitos para aprender CSS

Antes de empezar con CSS, necesitas:

  • Conocimientos básicos de HTML.
  • Un editor de código como Visual Studio Code.
  • Un navegador web moderno (Chrome, Firefox, Edge o Safari).
  • Ganas de practicar y experimentar.

Formas de agregar CSS a HTML

Existen tres maneras principales de usar CSS en HTML:

1. CSS en línea (Inline CSS)

Se escribe directamente dentro de la etiqueta HTML usando el atributo style.

<p style="color: blue; font-size: 20px;">Texto azul</p>

Este método no es recomendado para proyectos grandes, pero es útil para pruebas rápidas.

2. CSS interno (Internal CSS)

Se coloca dentro de la etiqueta <style> en la sección <head>.

<head>  <style>    p {      color: red;      font-size: 18px;    }  </style></head>

3. CSS externo (Recomendado)

Se crea un archivo separado con extensión .css y se enlaza al HTML.

Archivo styles.css:

body {  background-color: #f4f4f4;  font-family: Arial, sans-serif;}

En tu archivo HTML:

<link rel="stylesheet" href="styles.css">

Este método es el más profesional y organizado.

Sintaxis básica de CSS

La estructura básica de CSS es:

selector {  propiedad: valor;}

Ejemplo:

h1 {  color: green;  text-align: center;}

Selectores en CSS

Los selectores permiten elegir qué elementos HTML quieres modificar.

Selector por etiqueta

p {  color: blue;}

Selector por clase

En HTML:

<p class="destacado">Texto importante</p>

En CSS:

.destacado {  color: orange;  font-weight: bold;}

Selector por ID

En HTML:

<h1 id="titulo">Bienvenido</h1>

En CSS:

#titulo {  color: purple;}

Propiedades CSS más importantes

  • color: cambia el color del texto.
  • background-color: color de fondo.
  • font-size: tamaño de letra.
  • font-family: tipo de fuente.
  • margin: espacio exterior.
  • padding: espacio interior.
  • border: bordes.
  • width / height: tamaño de elementos.

Modelo de caja (Box Model)

Todos los elementos HTML se representan como cajas rectangulares. El modelo de caja incluye:

  • Contenido (content)
  • Relleno (padding)
  • Borde (border)
  • Margen (margin)
div {  width: 300px;  padding: 20px;  border: 5px solid black;  margin: 10px;}

Diseño con Flexbox

Flexbox es una herramienta moderna para crear diseños flexibles.

.contenedor {  display: flex;  justify-content: center;  align-items: center;}

Propiedades importantes:

  • justify-content
  • align-items
  • flex-direction

Diseño con CSS Grid

CSS Grid permite crear diseños complejos en dos dimensiones.

.grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 10px;}

Responsive Design (Diseño Responsivo)

Permite que tu web se adapte a diferentes tamaños de pantalla.

@media (max-width: 768px) {  body {    background-color: lightblue;  }}

Animaciones y transiciones en CSS

button {  transition: background-color 0.3s ease;}button:hover {  background-color: green;}

Buenas prácticas al usar CSS

  • Usa archivos CSS externos.
  • Mantén tu código organizado y comentado.
  • Evita usar muchos estilos en línea.
  • Utiliza nombres de clases descriptivos.
  • Optimiza tu CSS para mejorar el rendimiento.

Proyecto práctico: Página simple con HTML y CSS

Crea un archivo index.html y un archivo styles.css.

HTML:

<!DOCTYPE html><html lang="es"><head>  <meta charset="UTF-8">  <title>Mi página con CSS</title>  <link rel="stylesheet" href="styles.css"></head><body>  <h1>Bienvenido a mi web</h1>  <p class="descripcion">Esta página tiene estilos CSS.</p>  <button>Haz clic</button></body></html>

CSS:

body {  font-family: Arial, sans-serif;  text-align: center;  background-color: #f0f0f0;}h1 {  color: #333;}.descripcion {  color: #555;  font-size: 18px;}button {  padding: 10px 20px;  border: none;  background-color: #007BFF;  color: white;  cursor: pointer;}button:hover {  background-color: #0056b3;}

Recursos para seguir aprendiendo CSS

  • Documentación oficial en MDN Web Docs.
  • W3Schools CSS Tutorial.
  • Practicar creando proyectos personales.

Conclusión

Aprender CSS es esencial para convertirte en desarrollador web. Te permite transformar páginas simples en sitios modernos, atractivos y responsivos. La clave del éxito es practicar constantemente y combinar CSS con HTML y JavaScript para crear proyectos completos y profesionales.