¿Qué es CSS?

Las hojas de estilo en cascada (CSS) son un lenguaje de estilos utilizado para describir la presentación de un documento escrito en un lenguaje de marcado (HTML, XHTML, SVG, XML).

Funciones principales de CSS:

Separación de presentación y contenido: Permite cambiar la apariencia de una página web sin modificar su estructura.
Estilización de elementos: Control de colores, fuentes, tamaños, márgenes, bordes y otras propiedades visuales de los elementos.
Creación de diseños adaptativos: Con consultas de medios (Media Queries), se pueden aplicar estilos diferentes según las características del dispositivo del usuario (resolución de pantalla, orientación, etc.).
Animaciones y transiciones: Creación de efectos visuales para la interactividad y mejora de la experiencia del usuario.
Control del diseño: Posicionamiento de elementos en la página usando diversas técnicas (Flexbox, Grid, floats, etc.).

Estructura de una regla CSS:

/* Selector */
h1 {
  /* Declaraciones */
  color: blue; /* Propiedad: valor; */
  font-size: 24px;
}

Formas principales de enlazar CSS con un documento HTML:

Archivo externo (<link>): La forma más común y recomendada. Los estilos se almacenan en un archivo .css separado.
```
<link rel="stylesheet" href="styles.css">
```
Dentro de la etiqueta <style>: Los estilos se definen directamente en el documento HTML, generalmente en la sección <head>. Es adecuado para estilos pequeños o pruebas rápidas.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Estilos en línea (style atributo): Los estilos se aplican a un elemento HTML específico mediante el atributo style. Tiene alta prioridad, pero dificulta el mantenimiento y la escalabilidad.
```
<div style="border: 1px solid black;">
  Este div tiene un estilo en línea.
</div>
```

La cascada determina cómo el navegador aplica los estilos cuando hay varias reglas que compiten por un mismo elemento. Se consideran:

Prioridad de los selectores: Los selectores más específicos tienen mayor prioridad.
Orden de aparición: Las reglas declaradas más tarde sobrescriben a las anteriores con la misma prioridad.
Importancia (!important): La declaración con !important tiene la prioridad más alta (se debe usar con precaución).
Fuente de los estilos: Los estilos del autor tienen mayor prioridad que los estilos del usuario o los estilos predeterminados del navegador.