¿Qué es CSS?

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo que se utiliza para describir la presentación visual de documentos HTML. Es el responsable de hacer que las páginas web se vean atractivas, controlando colores, fuentes, espaciado, diseño y animaciones.

¿Para qué sirve CSS?

CSS es esencial para el desarrollo web moderno. Te permite:

• Controlar la apariencia visual de elementos HTML (colores, fuentes, tamaños).
• Crear layouts responsivos que se adapten a diferentes dispositivos.
• Añadir animaciones y transiciones para mejorar la experiencia del usuario.
• Separar el contenido (HTML) de la presentación (CSS).
• Mantener consistencia visual en todo el sitio web.

¿Cómo funciona?

Imagina CSS como el diseñador de interiores de tu casa web. Mientras HTML construye la estructura (paredes, habitaciones), CSS se encarga de decorar: pinta las paredes, elige los muebles, ajusta la iluminación y organiza todo para que se vea hermoso y funcional.

Ejemplo: Estilos básicos de CSS

CSS utiliza selectores para dirigirse a elementos HTML y aplicarles estilos:

/* Selector de elemento */
h1 {
  color: #2c3e50;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Selector de clase */
.button {
  background-color: #3498db;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Pseudo-clase para efectos hover */
.button:hover {
  background-color: #2980b9;
}

---

Este ejemplo muestra cómo dar estilo a un título y crear un botón interactivo con efectos de hover.

Conceptos clave de CSS

• Selectores: Identifican qué elementos HTML reciben los estilos.
• Propiedades: Aspectos visuales que se pueden modificar (color, tamaño, etc.).
• Valores: Los ajustes específicos para cada propiedad.
• Cascada: El orden de prioridad cuando múltiples reglas afectan el mismo elemento.
• Box Model: Cómo CSS estructura el espacio de cada elemento (contenido, padding, border, margin).

¿Dónde encuentras CSS?

• En archivos .css externos vinculados al HTML.
• Dentro de etiquetas <style> en el HTML.
• Como atributos style directamente en elementos HTML.
• En frameworks como Bootstrap, Tailwind CSS, o Material UI.
• En preprocesadores como Sass, Less, o Stylus.

Conclusión

CSS es el lenguaje que da vida visual a la web. Sin él, todas las páginas serían texto plano sin formato. Dominar CSS te permite crear interfaces hermosas, responsivas y funcionales que mejoran significativamente la experiencia del usuario.

Aquí puedes ver una Cheatsheet completa de CSS

---