CSS (Cascading Style Sheets)

CSS es el lenguaje utilizado para describir la presentación y el diseño visual de documentos HTML. Permite separar el contenido de la presentación.

¿Qué es CSS?

Imagina que HTML es como la estructura de una casa, entonces CSS es el pintor y decorador que decide los colores, el estilo y cómo se ve todo.

CSS (Cascading Style Sheets) es un lenguaje de programación que controla la apariencia visual de las páginas web. Mientras HTML estructura el contenido (títulos, párrafos, enlaces), CSS define cómo se presenta ese contenido al usuario.

CSS controla específicamente:

• Colores y fondos - Qué colores usar para textos y elementos
• Tipografía - Tamaño, tipo y peso de las letras
• Espaciado - Distancias entre elementos y márgenes
• Posicionamiento - Dónde aparece cada elemento en la página
• Efectos visuales - Sombras, bordes, animaciones y transiciones

CSS funciona aplicando "reglas de estilo" a elementos HTML específicos. Por ejemplo, puedes decir "todos los títulos principales deben ser azules y grandes" o "este botón debe tener un fondo rojo cuando alguien pase el mouse sobre él".

La separación entre HTML (contenido) y CSS (presentación) permite que los desarrolladores cambien completamente el diseño de un sitio web sin tocar el contenido, y viceversa.

Sintaxis Básica

selector {
  propiedad: valor;
  otra-propiedad: otro-valor;
}

Selectores Principales

• Elemento: p { color: blue; }
• Clase: .mi-clase { font-size: 16px; }
• ID: #mi-id { background: red; }
• Atributo: [type="text"] { border: 1px solid gray; }

Modelo de Caja

Todo elemento HTML tiene:

• Content (contenido)
• Padding (relleno interno)
• Border (borde)
• Margin (margen externo)

Relacionado

• HTML - Estructura que CSS estiliza
• JavaScript - Interactividad
• Responsive Design - Diseño adaptable
• Sass - Preprocesador CSS