# data[].attributes.attachment_caption
HTML es el esqueleto, !CSS es el maquillaje!

# data[].attributes.body
CSS (Cascading Style Sheets) es el lenguaje que se usa para darle estilo a las páginas web.

# data[].attributes.attachment_caption
En CSS los selectores se utilizan para delimitar los elementos HTML de nuestra página web a los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite una gran precisión a la hora de seleccionar elementos a los que aplicar estilo

# data[].attributes.body
p → todos los párrafos

.clase → elementos con clase

#id → elemento con ID

# data[].attributes.attachment_caption
Son elementos que determinan cómo se visualiza y se comporta el contenido en una página web HTML. Desde el color y el tamaño hasta el diseño y la animación, estas propiedades son esenciales para dar estilo a elementos como imágenes y texto.

# data[].attributes.body
color, background-color

font-size, font-family

text-align, margin, padding

# data[].attributes.body
Flexbox es un módulo de diseño de CSS3 que permite crear diseños flexibles y responsivos en páginas web. Con Flexbox, se puede controlar la distribución y el posicionamiento de elementos de manera eficiente.

# data[].attributes.body
¿Qué es el modelo de caja en CSS (Box Model)?

El modelo de caja es una forma de entender cómo se construyen los elementos en una página. Cada elemento en CSS se comporta como una "caja" con 4 partes: contenido, padding (espacio interno), border (borde), y margin (espacio externo).

# data[].attributes.body
¿Qué es una hoja de estilo externa y por qué se usa?

Una hoja de estilo externa es un archivo .css separado del HTML que contiene todas las reglas de estilo. Se vincula al documento HTML con la etiqueta <link>, lo que permite mantener el diseño separado del contenido.

Esto facilita la organización del proyecto, ya que se pueden aplicar los mismos estilos a múltiples páginas solo con un archivo CSS. También ayuda a cargar más rápido las páginas y hace que el mantenimiento sea más sencillo.

# data[].attributes.body
Un selector es la parte del código CSS que indica a qué elementos HTML se le van a aplicar las reglas de estilo. Es como decirle al navegador: "Aplícale estos estilos a estos elementos".

Por ejemplo, si usamos p { color: red; }, el selector p indica que todos los párrafos (<p>) tendrán texto rojo. Los selectores son clave para aplicar estilos de manera precisa y organizada.

# data[].attributes.body
¿Cómo funciona el selector de clase (.)?

El selector de clase se usa para aplicar estilos a uno o varios elementos que tienen el mismo nombre de clase. Se escribe con un punto seguido del nombre, como .caja.

Esto permite reutilizar estilos sin repetir código. Por ejemplo, si tienes muchas cajas con el mismo diseño, solo necesitas poner la clase "caja" en el HTML y usar un solo bloque de CSS para todas ellas.

# data[].attributes.body
¿Qué hace el selector de ID (#)?

El selector de ID se usa para apuntar a un único elemento con un identificador único. Se escribe con # seguido del nombre del ID, como #header.

Este tipo de selector tiene más prioridad que uno de clase, por lo que se usa cuando necesitas un estilo único. Sin embargo, no es recomendable usar muchos id si puedes resolverlo con clases, ya que limita la reutilización del código.

# data[].attributes.headline
¿Qué son los selectores combinados en CSS?

# data[].attributes.subject
¿Qué son los selectores combinados en CSS?

# data[].attributes.body
Los selectores combinados permiten seleccionar elementos con más precisión. Por ejemplo, div p selecciona todos los párrafos que están dentro de un div. Otro ejemplo es ul > li, que selecciona solo los li hijos directos de una ul.

Estos combinadores ayudan a aplicar estilos según la estructura del HTML, lo que da más control al diseño sin necesidad de añadir más clases o IDs innecesarios.

# data[].attributes.headline
¿Cómo funcionan los pseudo-selectores como :hover?

# data[].attributes.subject
¿Cómo funcionan los pseudo-selectores como :hover?

# data[].attributes.body
Los pseudo-selectores permiten aplicar estilos en estados especiales de los elementos. Uno muy común es :hover, que aplica un estilo cuando el mouse pasa por encima de un elemento.

Por ejemplo,

button:hover { background-color: blue; }

cambia el color del botón solo cuando el usuario lo señala. Esto mejora la interactividad y hace que la experiencia web sea más dinámica y moderna.