# data[].attributes.body
Es un lenguaje de programación que sirve para determinar el diseño de los documentos electrónicos. Con la ayuda de unas sencillas instrucciones -presentadas en forma de código fuente claro-, los elementos del sitio web, como el diseño, el color y la tipografía, pueden adaptarse como se desee. Gracias a las hojas de estilo en cascada, la estructura semántica y el contenido del documento no se ven afectados. CSS surgió a mediados de la década de 1990 y ahora se considera el lenguaje de hojas de estilo estándar en Internet.

# data[].attributes.body
El éxito de un sitio web no depende solo del contenido, sino también de un buen diseño. Los usuarios pierden rápidamente el interés por las páginas web que no son fáciles de usar o no están bien estructuradas. En este caso, CSS ofrece una serie de opciones de diseño que no están disponibles en HTML puro.

Por ejemplo, CSS permite controlar algunas especificaciones de forma centralizada. Esto significa que elementos similares (como todos los hipervínculos o imágenes) dentro de un mismo documento pueden ser reconocidos y formateados mediante un único comando. Las instrucciones de diseño no tienen que estar en forma de hoja de estilo interna en el propio documento HTML.

# data[].attributes.body
Una instrucción CSS determina los valores o propiedades que deben tener los elementos de tu documento electrónico. En su estructura básica, la instrucción consiste en un selector y corchetes. Las declaraciones se enumeran dentro de los corchetes, separadas por punto y coma. Cada instrucción consta del nombre de la propiedad, dos puntos y un valor específico. Después de la instrucción final y antes del corchete de cierre, se puede añadir otro punto y coma, pero no es obligatorio. Por ejemplo, la instrucción CSS del siguiente ejemplo pide que el encabezado H1 se muestre en azul y con un tamaño de letra 12.

# data[].attributes.body
Es posible integrar CSS en un documento electrónico utilizando hojas de estilo internas y externas. Además, las propiedades pueden colocarse directamente en el código fuente HTML de un elemento utilizando el estilo inline.
A continuación, ofrecemos una visión general de los tres métodos para integrar CSS en HTML.

Hojas de estilo externas:

En las hojas de estilo externas, las instrucciones CSS se definen en archivos externos mediante la terminación “.css” y se integran en el archivo HTML mediante una etiqueta “link”.

Hojas de estilo internas:

Aquí es donde se añaden todas las instrucciones CSS en el archivo HTML. Ten en cuenta que estas solo se aplican al documento correspondiente.

Estilo inline:

Al igual que con la hoja de estilo interna, las instrucciones CSS están contenidas en el archivo HTML. Sin embargo, hay una diferencia importante: los atributos correspondientes se encuentran directamente en la etiqueta de inicio del elemento y no se aplican a ningún otro elemento.

# data[].attributes.body
Los ejemplos anteriores demuestran que CSS solo puede utilizarse junto con una estructura clásica de HTML. Dado que HTML estructura el contenido mediante párrafos, listas y tablas, y que CSS se encarga del diseño visual, ambos lenguajes web se complementan y están estrechamente relacionados entre sí. Editar Cascading Style Sheets suele girar en torno al diseño de “cajas”. La estructura de un documento HTML se basa en el principio de anidamiento, en el que los elementos individuales se superponen como cajas. Cada “caja” que ocupa espacio en un sitio web tiene las siguientes propiedades:

Padding: el espacio que rodea el contenido de un elemento

Border: la línea que se encuentra justo fuera del relleno

Margin: el espacio fuera del borde

# data[].attributes.body
Mayor esfuerzo: El CSS reset es un arma de doble filo: sólo nos ahorra tiempo en el caso en que no nos interese conservar los estilos por defecto.

Código «sucio»: Si se da el caso mencionado en el primer punto, la redefinición de estilos genera código CSS excesivo y difícil de comprender.

Problemas de usabilidad: Algunos estilos a los que habitualmente no prestamos atención deben conservarse. Por ejemplo, quienes navegan con teclado y sin mouse, usando la tecla Tab para desplazarse, necesitan la propiedad CSS que remarca el enlace sobre el que están situados.

Más peso: Agregar una hoja de estilos de reset agrega peso a la página, aumentando ligeramente su tiempo de carga.

# data[].attributes.body
Elimina las diferencias entre navegadores: Con un reseteo preciso y abarcador se elimina la mayoría de las diferencias de interpretación entre los browsers, ya que tamaños, márgenes, grosores, bordes y otros formatos son igualados a un estilo único y homogéneo. Ver: cross-browser testing.

Mayor libertad: El reseteo nos brinda una hoja en blanco sobre la que podemos construir nuestros propios estilos sin tener que luchar contra los estilos del browser, que muchas veces son difíciles de identificar (y, por lo tanto, de modificar).

Desarrollo más lógico: Una vez agregada la hoja de reset, el proceso final consistirá en agregar nuevos estilos en lugar de sobrescribirlos.