# data[].attributes.body
https://carontestudio.com/blog/listado-de-propiedades-css/

Puede definir propiedades de reglas CSS, como la fuente del texto, la imagen y el color de fondo, las propiedades de espaciado y diseño y el aspecto de los elementos de una lista.
Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de valores que esa propiedad admite

# data[].attributes.attachment_link.readable_text
align-content

Especifica la alineación predeterminada de los elementos dentro del contenedor flexible cuando dichos elementos ocupan más de una linea.

flexbox align-content: flex-start | flex-end | center | space-between | space-around | stretch;
grid align-content: start | end | center | space-between | space-around | stretch | space-evenly

align-items

Especifica la alineación predeterminada de los elementos dentro del contenedor flexible cuando dichos elementos ocupan una sola linea.

flexbox align-items: flex-start | flex-end | center | baseline | stretch;
grid align-items: start | end | center | baseline | stretch;

align-self

Especifica la alineación de los elementos seleccionados dentro del contenedor flexible.

flexbox align-self: flex-start | flex-end | center | baseline | stretch;
grid align-self: start | end | center | stretch

all | Establece el valor de todas las propiedades del elemento seleccionado. | initial | inherit | unset
animation | Especifica las animaciones basadas en keyframes. | nombre duración retardo número-de-iteraciones dirección estado-de-la-animación
animation-delay | Define el número de segundos (s) o milisegundos (ms) a esperar antes de que comience la animación | time | initial | inherit;
animation-direction | Define si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternos | normal | reverse | alternate | alternate-reverse | initial | inherit;
animation-duration | Especifica cuánto tiempo debe tomar una animación para completar un ciclo. | time | initial | inherit;
animation-fill-mode | Especifica un estilo para el elemento cuando la animación no se está reproduciendo. | none | forwards | backwards | both | initial | inherit;
animation-iteration-count | Indica el número de veces que se debe reproducir una animación. | number | infinite | initial | inherit;
animation-name | Especifica un nombre para la animación @keyframes. | nombrekeyframe | none | initial | inherit;
animation-play-state | Esta propiedad indica si la animación está en ejecución o en pausa. | paused | running | initial | inherit;
animation-timing-function | Especifica el TIEMPO que usa una animación para cambiar de un conjunto de estilos CSS a otro. | linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

backface-visibility

Define si la cara posterior de un elemento debe ser visible o no cuando mira al usuario.
Esta propiedad es útil cuando se gira un elemento. Te permite elegir si el usuario debe ver la cara posterior o no.

visible | hidden | initial | inherit;

background

Es una propiedad abreviada para:
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial | inherit;

background-attachment | Establece si una imagen de fondo se desplaza con el resto de la página o si es fija. | scroll | fixed | local | initial | inherit;
background-blend-mode | Define el modo de fusión de cada capa de fondo (color y/o imagen). | normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
background-clip | Indica hasta dónde debe extenderse el fondo (color o imagen) dentro de un elemento. | border-box | padding-box | content-box | initial | inherit;
background-color | Establece el color de fondo de un elemento. | color | transparent | initial | inherit;
background-image | Establece una o más imágenes de fondo para un elemento. | url | none | initial | inherit;
background-origin | Especifica la posición de origen (el área de posicionamiento de fondo) de una imagen de fondo. | padding-box | border-box | content-box | initial | inherit;

background-position

Establece la posición inicial de una imagen de fondo. El primer valor es la posición horizontal y el segundo la posición vertical.

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
etc.

background-repeat | Estable cómo o sí se repetirá una imagen de fondo. | repeat | repeat-x | repeat-y | no-repeat | initial | inherit;
background-size | Establece el tamaño de las imágenes de fondo. | auto | length | cover | contain | initial | inherit;

border

Es una abreviatura de las propiedades:
border-width
border-style (requerido)
border-color

border-width border-style border-color | initial | inherit;

border-bottom *

Es una abreviatura de las propiedades:
border-bottom-width
border-bottom-style
border-bottom-color

border-width border-style border-color | initial | inherit;

border-bottom-color * | Establece el color del borde inferior de un elemento. | color | transparent | initial | inherit;
border-bottom-left-radius * | Define el radio de la esquina inferior izquierda. | length | % [length|%] | initial | inherit;
border-bottom-right-radius * | Define el radio de la esquina inferior derecha. | length |% [length |%] | initial | inherit;
border-bottom-style * | Establece el estilo del borde inferior de un elemento | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
border-bottom-width * | Establece el ancho del borde inferior de un elemento. | medium | thin | thick | length | initial | inherit;

En las propiedades marcadas con un asterisco, bottom es sustituible por top, left y right.

top: Hace referencia al borde superior
left: Hace referencia al borde izquierdo
right: Hace referencia al borde derecho.

border-collapse | Establece si los bordes de la tabla deben contraerse en un solo borde o estar separados como en HTML estándar | separate | collapse | initial | inherit;
border-color | Establece el color de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores para especificar el color de los bordes superior, derecha, inferior e izquierda respectivamente. | color | transparent | initial | inherit;
border-image | Permite especificar una imagen para usarla como borde alrededor de un elemento | source slice width outset repeat | initial | inherit;
border-image-outset | Especifica la cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde. | length | number | initial | inherit;
border-image-repeat | Especifica si la imagen del borde debe repetirse, redondearse, espaciarse o estirarse | stretch | repeat | round | space | initial | inherit;
border-image-slice | Especifica cómo dividir la imagen indicada por border-image-source. La imagen siempre se divide en nueve secciones: cuatro esquinas, cuatro bordes y el medio. | number | % | fill | initial | inherit;
border-image-source | Especifica la ruta a la imagen que se usará como borde (en lugar del borde normal alrededor de un elemento). | none | image | initial | inherit;
border-image-width | Establece el ancho de la imagen del borde. | number | % | auto | initial | inherit;
border-radius | Define el radio de las esquinas del borde del elemento. | length | % / 1-4 length | % | initial | inherit;
border-spacing | Establece la distancia entre los bordes de las celdas adyacentes. | length | initial | inherit;
border-style | Establece el estilo de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
border-width | Establece el ancho de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores | medium | thin | thick | length | initial | inherit;
bottom | Afecta a la posición vertical de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados. | auto | length | initial | inherit;
box-decoration-break | Especifica como se aplican las propiedades background, padding, border, border-image, box-shadow, margin, y clip-path de un elemento cuando la caja de un elemento está fragmentada. | slice | clone | initial | inherit | unset;
box-shadow | Adjunta una o más sombras a un elemento. | none | h-offset v-offset blur spread color | inset | initial | inherit;
box-sizing | Define cómo se calculan el ancho y el alto de un elemento: si deben incluir relleno y bordes, o no. | content-box | border-box | initial | inherit;
break-after | Especifica si se debe producir o no un salto de página, un salto de columna o un salto de región después del elemento especificado. | auto | all | always | avoid | avoid-column | avoid-page | avoid-region | column | left | page | recto | region | right | verso | initial | inherit;
break-before | Especifica si se debe producir o no un salto de página, un salto de columna o un salto de región antes del elemento especificado. | auto | all | always | avoid | avoid-column | avoid-page | avoid-region | column | left | page | recto | region | right | verso | initial | inherit;
break-inside | Especifica si se debe producir o no un salto de página, un salto de columna o un salto de región dentro del elemento especificado. | auto | all | always | avoid | avoid-column | avoid-page | avoid-region | column | left | page | recto | region | right | verso | initial | inherit;
caption-side | Especifica la ubicación de un título de tabla | top | bottom | initial | inherit;
caret-color | Especifica el color del cursor (signo de intercalación) en entradas, áreas de texto o cualquier elemento que sea editable. | auto | color | initial | inherit;
@charset | La regla @charset especifica la codificación de caracteres utilizada en la hoja de estilo. | @charset «charset»;
clear | Controla el flujo junto a los elementos flotantes. | none | left | right | both | initial | inherit;

clip

Permite especificar un rectángulo para recortar un elemento absolutamente posicionado. El rectángulo se especifica como cuatro coordenadas, todas desde la esquina superior izquierda del elemento que se va a recortar.
No funciona con «overflow: visible».

auto | shape | initial | inherit;

clip-path | Permite recortar un elemento a una forma básica o a una fuente SVG. | clip-source | basic-shape | margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | none | initial | inherit;
color | Establece el color del texto. | color | initial | inherit;
column-count | Especifica el número de columnas en las que se debe dividir un elemento. | number | auto | initial | inherit;
column-fill | Especifica cómo llenar columnas, equilibradas o no. | balance | auto | initial | inherit;
column-gap | Establece el espacio entre las columnas. | length | normal | initial | inherit;
column-rule | Establece el ancho, el estilo y el color de la regla entre columnas. | column-rule-width column-rule-style column-rule-color | initial | inherit;
column-rule-color | Especifica el color de la regla entre columnas. | color | initial | inherit;
column-rule-style | Indica el estilo de la regla entre columnas. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
column-rule-width | Especifica el ancho de la regla entre columnas. | medium | thin | thick | length | initial | inherit;
column-span | Especifica cuántas columnas debe abarcar un elemento. | none | all | initial | inherit;
column-width | Establece el ancho de una columna. | auto | length | initial | inherit;

columns

Es una propiedad abreviada para:
column-width
column-count

auto | column-width column-count | initial | inherit;

content | Se utiliza con los pseudo-elementos ::before y ::after, para insertar contenido generado | normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;
counter-increment | Aumenta o disminuye el valor de uno o más contadores CSS. | none | id | initial | inherit;

counter-reset

Crea o restablece uno o más contadores CSS.
Generalmente se usa junto con las propiedades counter-increment y content.

none | name number | initial | inherit;

cursor | Especifica el cursor del ratón que se mostrará cuando se apunte sobre un elemento. | cursor: valor;
direction | Especifica la dirección del texto o la dirección de escritura dentro de un elemento a nivel de bloque. Más información aquí. | ltr | rtl | initial | inherit;
display | Establece el comportamiento de visualización (el tipo de cuadro de representación) de un elemento. | inline | block | contents | flex | grid | inline-block | inline-flex | inline-table | list-item | run-in Más información aquí.

empty-cells

Establece si mostrar o no los bordes en las celdas vacías de una tabla.

show | hide | initial | inherit;

filter | Define efectos visuales (como desenfoque y saturación) a un elemento (a menudo utilizado para imágenes). | none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

flex

Es una propiedad abreviada para:
flex-grow
flex-shrink
flex-basis
Establece la longitud flexible en elementos flexibles.

flex-grow flex-shrink flex-basis | auto | initial | inherit;

flex-basis | Especifica la longitud inicial de un elemento flexible. | number | auto | initial | inherit;
flex-direction | Esta propiedad indica la dirección de los elementos flexibles. | row | row-reverse | column | column-reverse | initial | inherit;

flex-flow

Es una abreviatura para las propiedades:
flex-direction
flex-wrap
Si los elementos no son elementos flexibles, la propiedad de flujo flexible no tiene efecto.

flex-direction flex-wrap | initial | inherit;

flex-grow | Especifica cuánto crecerá el elemento en relación con el resto de elementos flexibles dentro del mismo contenedor. | number | initial | inherit;
flex-shrink | Establece cómo se encogerá el elemento en relación con el resto de los elementos flexibles dentro del mismo contenedor. | number | initial | inherit;
flex-wrap | La propiedad especifica si los elementos flexibles deben ajustarse o no. | nowrap | wrap | wrap-reverse | initial | inherit;

float

Especifica si un elemento debe flotar a la izquierda, a la derecha o no flotar en absoluto.
Los elementos posicionados de manera absoluta ignoran la propiedad float. Los elementos junto a un elemento flotante fluirán a su alrededor. Para evitar esto, use la propiedad clear

none | left | right | initial | inherit;

font

Es una abreviatura para las propiedades:
font-style
font-variant
font-weight
font-size/line-height
font-family

font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;

@font-face

Se deben definir un nombre para la fuente (por ejemplo, miFuente), y luego apuntar al archivo de fuente.

@font-face {
font-properties
}

font-family | Especifica la fuente de texto para un elemento. Es posible especificar varios nombres de fuente como un sistema «alternativo». Si el navegador no admite la primera fuente, prueba con la siguiente fuente. | family-name | generic-family | initial | inherit;
font-feature-settings | Permite el control sobre características tipográficas avanzadas en fuentes OpenType. | normal | feature-value;
font-kerning | Controla el uso de la información de interletraje almacenada en una fuente. | auto | normal | none;
font-size | Establece el tamaño de una fuente. | medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;
font-size-adjust | Le brinda un mejor control del tamaño de la fuente cuando la primera fuente seleccionada no está disponible. Cuando una fuente no está disponible, el navegador usa la segunda fuente especificada. Esto podría resultar en un gran cambio para el tamaño de fuente. Para evitar esto, utilice la propiedad font-size-adjust. | number | none | initial | inherit;
font-stretch | Le permite hacer que el texto sea más angosto (condensado) o más ancho (expandido). | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit;
font-style | Especifica el estilo de fuente para un texto. | Normal | italic | oblique | initial | inherit;
font-variant | Especifica si un texto debe mostrarse o no en mayúsculas pequeñas. | normal | small-caps | initial | inherit;
font-variant-caps | Controla el uso de glifos alternativos para letras mayúsculas. | normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps | initial | inherit | unset;
font-weight | Establece qué tan gruesos o delgados deben mostrarse los caracteres del texto. | normal | bold | bolder | lighter | number | initial | inherit;
gap | Define el tamaño del espacio entre las filas y las columnas. | row-gap column-gap;

grid

Es una abreviatura para las propiedades:
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

none | grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit;

grid-area

Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades:
grid-row-start
grid-column-start
grid-row-end
grid-column-end

grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

grid-auto-columns | Establece un tamaño para las columnas en un contenedor grid. | auto | max-content | min-content | length;
grid-auto-flow | Controla cómo se insertan en la cuadrícula los elementos colocados automáticamente. | row | column | dense | row dense | column dense;
grid-auto-rows | Establece un tamaño para las filas en un contenedor de cuadrícula. | auto | max-content | min-content | length;

grid-column

Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades:
grid-column-start
grid-column-end

grid-column-start / grid-column-end;

grid-column-end | Define cuántas columnas abarcará un elemento, o en qué línea de columna terminará el elemento. | auto | span n | column-line;
grid-column-gap | Define el tamaño del espacio entre las columnas en un diseño de cuadrícula. | grid-column-gap: length;
grid-column-start | Define en qué línea de columna comenzará el elemento. | auto | span n | column-line;

grid-gap

Define el tamaño del espacio entre las filas y las columnas en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades:
grid-row-gap
grid-column-gap

grid-row-gap grid-column-gap;

grid-row

Especifica el tamaño y la ubicación de un elemento de cuadrícula en un elemento grid y es una propiedad abreviada para las siguientes propiedades:
grid-row-start
grid-row-end

grid-row-start / grid-row-end;

grid-row-end | Define cuántas filas abarcará un elemento, o en qué línea de fila terminará el elemento | auto | row-line | span n;
grid-row-gap | Define el tamaño del espacio entre las filas en un diseño de cuadrícula. | grid-row-gap: length;
grid-row-start | Define en qué línea de fila comenzará el elemento. | grid-row-start: auto|row-line;

grid-template

Es una propiedad abreviada para las siguientes propiedades:
grid-template-rows
grid-template-columns
grid-template-areas

none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit;

grid-template-areas | Especifica áreas dentro de un elemento grid. | none | itemnames;
grid-template-columns | Especifica el número (y el ancho) de las columnas en un diseño grid. | none | auto | max-content | min-content | length | initial | inherit;
grid-template-rows | Especifica el número (y las alturas) de las filas en un diseño de cuadrícula. | none | auto | max-content | min-content | length | initial | inherit;
hanging-punctuation | Especifica si se puede colocar un signo de puntuación fuera del cuadro de línea al principio o al final de una línea completa de texto. | none | first | last | allow-end | force-end | initial | inherit;
height | Establece la altura de un elemento. No incluye relleno, bordes o márgenes. | auto | length | initial | inherit;
hyphens | Define si se permite la separación silábica para crear más oportunidades de ajuste suave dentro de una línea de texto. | none | manual | auto | initial | inherit;
image-rendering | Especifica el tipo de algoritmo que se utilizará para escalar la imagen. | auto | smooth | high-quality | crisp-edges | pixelated | initial | inherit;
@import | Regla que le permite importar una hoja de estilo a otra hoja de estilo. | url | string list-of-mediaqueries;
isolation | Define si un elemento debe crear un nuevo contenido de apilamiento. | auto | isolate | initial | inherit;
justify-content | Alinea los elementos del contenedor flexible cuando los elementos no utilizan todo el espacio disponible en el eje principal (horizontalmente). | flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;
@keyframes | Regla que especifica el código de animación. | @keyframes name {keyframes-selector {css-styles;}}
left | Afecta la posición horizontal de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados. | auto | length | initial | inherit;
letter-spacing | Aumenta o disminuye el espacio entre caracteres en un texto. | normal | length | initial | inherit;
line-height | Especifica la altura de una línea. | normal | number | length | initial | inherit;

list-style

Es una abreviatura de las siguientes propiedades:
list-style-type
list-style-position
list-style-image

list-style-type list-style-position list-style-image | initial | inherit;

list-style-image | Reemplaza el marcador de elemento de lista con una imagen. | none | url | initial | inherit;
list-style-position | Especifica la posición de los marcadores de elementos de lista (viñetas). | inside | outside | initial | inherit;
list-style-type | Especifica el tipo de marcador de elemento de lista en una lista. | list-style-type: value;

margin

Establece los márgenes de un elemento y es una propiedad abreviada para las siguientes propiedades:
margin-top
margin-right
margin-bottom
margin-left

length | auto | initial | inherit;

margin-bottom | Establece el margen inferior de un elemento. | length | auto | initial | inherit;
margin-left | Establece el margen izquierdo de un elemento. | length | auto | initial | inherit;
margin-right | Establece el margen derecho de un elemento. | length | auto | initial | inherit;
margin-top | Establece el margen superior de un elemento. | length | auto | initial | inherit;
mask-image | Especifica una imagen que se utilizará como capa de máscara para un elemento. | none | image | url | initial | inherit;
mask-mode | Especifica si la imagen de la capa de máscara debe tratarse como una máscara de luminancia o como una máscara alfa. | match-source | luminance | alpha | initial | inherit;
mask-origin | Especifica la posición de origen (el área de posición de la máscara) de una imagen de capa de máscara. | border-box | content-box | padding-box | margin-box | fill-box | stroke-box | view-box | initial | inherit;
mask-position | Establece la posición inicial de una imagen de máscara (en relación con el área de posición de la máscara). | mask-position: value;
mask-repeat | Establece sí o cómo se repetirá una imagen de máscara. | repeat | repeat-x | repeat-y | space | round | no-repeat | initial | inherit;
mask-size | Especifica el tamaño de la imagen de la capa de máscara. | auto | size | contain | cover | initial | inherit;
max-height | Define la altura máxima de un elemento. | none | length | initial | inherit;
max-width | Define la anchura máxima de un elemento. | none | length | initial | inherit;

@media

La regla se usa para aplicar diferentes estilos para diferentes tipos de medios/dispositivos.

@media not | only type and (feature and | or | not mediafeature) {
CSS-Code;
}

min-height | Define la altura mínima de un elemento. | length | initial | inherit;
min-width | Define la anchura mínima de un elemento. | length | initial | inherit;
mix-blend-mode | Especifica cómo el contenido de un elemento debe combinarse con su fondo principal directo. | normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;
object-fit | Se utiliza para especificar cómo se debe cambiar el tamaño de un <img> o <video> para que se ajuste a su contenedor. | fill | contain | cover | scale-down | none | initial | inherit;
object-position | Se usa junto con object-fit para especificar cómo se debe colocar un <img> o <video> con las coordenadas x/y dentro de su «propio cuadro de contenido». | position | initial | inherit;
opacity | Establece el nivel de opacidad de un elemento. | number | initial | inherit;
order | Especifica el orden de un artículo flexible en relación con el resto de los artículos flexibles dentro del mismo contenedor. | number | initial | inherit;
orphans | Especifica el número mínimo de líneas que se deben dejar al final de una página o columna. | integer | initial | inherit;

outline

Es una propiedad abreviada para:
outline-width
outline-style (obligatoria)
outline-color

outline-width outline-style outline-color | initial | inherit;

outline-color | Especifica el color de un contorno | invert | color | initial | inherit;
outline-offset | Agrega espacio entre el contorno y el borde o borde de un elemento. | length | initial | inherit;
outline-style | Especifica el estilo de un outline. | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
outline-width | Especifica el ancho de un contorno. | medium | thin | thick | length | initial | inherit;
overflow | Especifica lo que debería suceder si el contenido desborda el cuadro de un elemento. | visible | hidden | scroll | auto | initial | inherit;
overflow-wrap | Especifica si el navegador puede o no dividir líneas con palabras largas, si desbordan el contenedor. | normal | anywhere | break-word | initial | inherit;
overflow-x | Especifica si se se agrega una barra de desplazamiento o se muestra el contenido de desbordamiento de un elemento de nivel de bloque, cuando se desborda en los ejes izquierdos y derechos. | visible | hidden | scroll | auto | initial | inherit;
overflow-y | Especifica si se se agrega una barra de desplazamiento o se muestra el contenido de desbordamiento de un elemento de nivel de bloque, cuando se desborda en los ejes inferiores y superiores. | visible | hidden | scroll | auto | initial | inherit;

padding

El padding de un elemento es el espacio entre su contenido y su borde. Es una propiedad abreviada para:
padding-top
padding-right
padding-bottom
padding-left

length | initial | inherit;

padding-bottom | Establece el padding inferior (espacio) de un elemento. | length | initial | inherit;
padding-left | Establece el padding inferior (espacio) de un elemento. | length | initial | inherit;
padding-right | Establece el padding inferior (espacio) de un elemento. | length | initial | inherit;
padding-top | Establece el padding inferior (espacio) de un elemento. | length | initial | inherit;
page-break-after | Agrega un salto de página después de un elemento especificado. | auto | always | avoid | left | right | initial | inherit;
page-break-before | Agrega un salto de página antes de un elemento especificado. | auto | always | avoid | left | right | initial | inherit;
page-break-inside | Establece si se debe evitar un salto de página dentro de un elemento específico. | auto | avoid | initial | inherit;
perspective | Se utiliza para dar cierta perspectiva a un elemento posicionado en 3D. | length | none;
perspective-origin | Define desde qué posición el usuario está mirando el elemento posicionado en 3D. | x-axis y-axis | initial | inherit;
pointer-events | Define si un elemento reacciona o no a los eventos de puntero. | auto | none;
position | Especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto, fijo o pegajoso). | static | absolute | fixed | relative | sticky | initial | inherit;
quotes | Establece el tipo de comillas para las citas. | none | string | initial | inherit;
resize | Define si (y cómo) el usuario puede cambiar el tamaño de un elemento. | none | both | horizontal | vertical | initial | inherit;
right | Afecta la posición horizontal de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados. | auto | length | initial | inherit;
row-gap | Especifica el espacio entre las filas de la cuadrícula. | length | normal | initial | inherit;
scroll-behavior | Especifica si animar suavemente la posición de desplazamiento, en lugar de un salto directo, cuando el usuario hace clic en un enlace dentro de un cuadro desplazable. | auto | smooth | initial | inherit;
tab-size | Especifica el ancho de un carácter de tabulación. | number | length | initial | inherit;
table-layout | Define el algoritmo utilizado para diseñar las celdas, filas y columnas de la tabla. | auto | fixed | initial | inherit;
text-align | Indica la alineación horizontal del texto en un elemento. | left | right | center | justify | initial | inherit;
text-align-last | Especifica cómo alinear la última línea de un texto | auto | left | right | center | justify | start | end | initial | inherit;

text-decoration

Especifica la decoración añadida al texto y es una propiedad abreviada para:
text-decoration-line (obligatorio)
text-decoration-color
text-decoration-style

text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

text-decoration-color | Especifica el color de la decoración del texto (subrayado, sobre-rayado, líneas continuas). | color | initial | inherit;
text-decoration-line | Establece el tipo de decoración de texto que se utilizará (como subrayado, sobre-rayado, traspaso). | none | underline | overline | line-through | initial | inherit;
text-decoration-style | Establece el estilo de la decoración del texto (como sólido, ondulado, punteado, discontinuo, doble). | solid | double | dotted | dashed | wavy | initial | inherit;
text-indent | Indica la sangría de la primera línea en un bloque de texto. | length | initial | inherit;
text-justify | Especifica el método de justificación del texto cuando text-align se establece en «justify». | auto | inter-word | inter-character | none | initial | inherit;
text-overflow | Especifica cómo se debe señalar al usuario el contenido desbordado que no se muestra. | clip | ellipsis | string | initial | inherit;
text-shadow | Agrega sombra al texto. | h-shadow v-shadow blur-radius color | none | initial | inherit;
text-transform | Controla las mayúsculas del texto | none | capitalize | uppercase | lowercase | initial | inherit;
top | Afecta a la posición vertical de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados. | auto | length | initial | inherit;
transform | Aplica una transformación 2D o 3D a un elemento. | none | transform-functions | initial | inherit;
transform-origin | Le permite cambiar la posición de los elementos transformados. | x-axis y-axis z-axis | initial | inherit;
transform-style | Especifica cómo se representan los elementos anidados en el espacio 3D. | flat | preserve-3d | initial | inherit;

transition

Es una propiedad abreviada para:
transition-property
transition-duration
transition-timing-function
transition-delay

property duration timing-function delay | initial | inherit;

transition-delay | Indica cuándo comenzará el efecto de transición. | time | initial | inherit;
transition-duration | Especifica cuántos segundos (s) o milisegundos (ms) tarda en completarse un efecto de transición. | time | initial | inherit;
transition-property | Indica el nombre de la propiedad CSS para el efecto de transición (el efecto de transición comenzará cuando cambie la propiedad CSS especificada). | none | all | property | initial | inherit;
transition-timing-function | Especifica la curva de velocidad del efecto de transición. | linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit;
unicode-bidi | Se usa junto con la propiedad direction para establecer o devolver si el texto debe anularse para admitir varios idiomas en el mismo documento. | normal | embed | bidi-override | initial | inherit;
user-select | Especifica si se puede seleccionar el texto de un elemento. | auto | none | text | all;
vertical-align | Establece la alineación vertical de un elemento. | baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;
visibility | Indica si un elemento es visible o no. | visible | hidden | collapse | initial | inherit;
white-space | Especifica cómo se maneja el espacio en blanco dentro de un elemento. | normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;
widows | Especifica el número mínimo de líneas que se deben dejar en la parte superior de una página o columna. | integer | initial | inherit;
width | Establece el ancho de un elemento. | auto | value | initial | inherit;
word-break | Especifica cómo deben dividirse las palabras al llegar al final de una línea. | normal | break-all | keep-all | break-word | initial | inherit;
word-spacing | Aumenta o disminuye el espacio en blanco entre las palabras | normal | length | initial | inherit;
word-wrap | Permite que las palabras largas se puedan dividir y pasar a la siguiente línea. | normal | break-word | initial | inherit;
writing-mode | Especifica si las líneas de texto se disponen horizontal o verticalmente. | horizontal-tb | vertical-rl|vertical-lr;
z-index | Especifica el orden de apilamiento de un elemento. Un elemento con mayor orden de apilamiento siempre está delante de un elemento con menor orden de apilamiento. | auto | number | initial | inherit;

# data[].attributes.body
Descrito por Brad Frost en su blog, el Atomic Web Design es una metodología de diseño web que toma nota de OOCSS e inspirada en la química, en la cual Frost replantea la estructuración por componentes reusables con clases semánticas a la cual la mayoría de los diseñadores estamos acostumbrados (e.j. .widget o .media que podamos definir en nuestros temas) y sugiere que partamos desde la unidad más pequeña e indivisible, o atómica, en nuestro diseño: inputs, labels, botones, otros HTML tags que vayamos a usar, incluso elementos más abstractos como paletas de colores, fonts y hasta animaciones.

Una vez que se hayan definido todos los “átomos” a usar, entonces se pasa a estructurar las moléculas o bien la creación de componentes sencillos, generalmente con un uso específico en nuestra página y posiblemente reutilizable. Por ejemplo, la unión de un “átomo” de label, un “átomo” de input, un “átomo” de button, un “átomo” de un color específico y un “átomo” de font, pueden unirse para crear una “molécula” de barra de búsqueda. Así es cómo, según lo explica Frost, podemos eventualmente definir organismos (regiones definidas de una página) y eventualmente, plantillas y páginas.

# data[].attributes.body
Grid y flexbox

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.
Hay una pregunta muy simple para decidir si utilizar grid o flexbox:

¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox

¿Necesito controlar el diseño por filas y por columnas? – usa grid

# data[].attributes.attachment_link.readable_text
CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta Grid junto con otras técnicas que ya se estén usando.

Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será Grid.

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.

Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.

En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.

También he configurado la propiedad wrap flex-wrap , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.

En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.

La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.

En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de 1fr. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.

Hay una pregunta muy simple para decidir si utilizar grid o flexbox:

¿Necesito controlar el diseño únicamente por filas o por columnas? - usa flexbox

¿Necesito controlar el diseño por filas y por columnas? - usa grid

Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible en esa línea.

Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.

Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.

La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.

Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada Box Alignment Level 3. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.

En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.

El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El min-height del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido align-items en flex-end para que los items se alineen al final del flex container. También he establecido la propiedad align-self en box1 para que anule el valor por defecto y se estire a la altura del contenedor, y en box2 para que se alinee con el inicio del contenedor flexible.

En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a start y a end en vez de a flex-start y flex-end. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.

Ya hemos visto que la unidad fr asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad frcombinada con la función minmax permite un comportamiento muy similar al que tienen las propiedades flex en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.

Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.

En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.

Auto-filling grid tracks

Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades auto-fill y auto-fit.

En el siguiente ejemplo he usado auto-fill en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.

.wrapper { display : grid; grid-template-columns : repeat (auto-fill, 200px) ; }

Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando auto-fill y la función minmax. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con minmax. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en 1fr. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de 1fr y repartirá el espacio restante entre los ítems.

Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.

Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.

Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad position: absolute a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.

En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene position: relative y así se convierte en el contexto de posicionamiento de este elemento.

Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades top y left. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.

Si eliminamos position: absolute de las reglas de .box3 podemos ver cómo se mostraría sin el posicionamiento.

Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos position: relative del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.

Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.

Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de .box3 de la cuadrícula.

He dado a .box3 position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area

Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y display: contents. El valor de contents en la propiedad display es un nuevo valor que se describe en Display specification de la siguiente manera:

"El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento"

Si configuras un ítem como display: contents la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como display: block.

Si ahora añado display: contents a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.

Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar display: contents de manera similar en flexbox para que los ítems anidados se conviertan en flex items.

Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.

# data[].attributes.attachment_link.title
Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS - CSS | MDN

# data[].attributes.attachment_link.description
CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta Grid junto con otras técnicas que ya se estén usando.

# data[].attributes.headline
DISPLAY MÁS USADOS: BLOCK,INLINE E INLINE-BLOCK

# data[].attributes.subject
DISPLAY MÁS USADOS: BLOCK,INLINE E INLINE-BLOCK

# data[].attributes.body
La propiedad display establece los tipos de visualización interna y externa de un elemento.
Además de los Diferentes Tipos de caja de Visualizacion, el valor de none permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza none, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.

Block : El elemento genera un cuadro de elemento de bloque.

Inline : El elemento genera uno o más cuadros de elemento en línea.

En comparación con display: inline, la principal diferencia es que display: inline-blockpermite establecer un ancho y alto en el elemento.

Además, con display: inline-block, se respetan los márgenes/rellenos superior e inferior, pero con display: inlineno.

En comparación con display: block, la principal diferencia es que display: inline-blockno agrega un salto de línea después del elemento, por lo que el elemento puede ubicarse junto a otros elementos.

# data[].attributes.attachment_link.readable_text
The display: inline-block Value

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

The following example shows the different behavior of display: inline, display: inline-block and display: block:

Example

Try it Yourself "

Using inline-block to Create Navigation Links

One common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates horizontal navigation links:

Example

Try it Yourself "

# data[].attributes.attachment_link.description
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

# data[].attributes.body
La forma en que se comporta la cascada es la clave para comprender el CSS.

Cascada

En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.

Especificidad

La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector:

Un selector de elemento es menos específico (selecciona todos los elementos de aquel tipo que aparecen en la página) por lo que presenta una puntuación más baja en especificidad.

Un selector de clase es más específico (selecciona solo los elementos de una página que tienen un valor de atributo class dado), y por tanto recibe una puntuación mayor.

# data[].attributes.body
Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima. Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.

Las pseudoclases son palabras clave que comienzan con dos puntos:

:pseudo-class-name

Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del documento que está en un estado determinado y se comportan como si se hubiera añadido una clase a su HTML.

:last-child

:only-child

:invalid

Algunas pseudoclases solo intervienen cuando el usuario interactúa con el documento de alguna manera. Estas pseudoclases de acción de usuario, que también reciben el nombre de pseudoclases dinámicas, actúan como si se añadiese una clase al elemento cuando el usuario interactúa con él. Algunos ejemplos son:

:hover: solo interviene si el usuario pasa el cursor sobre un elemento, normalmente un enlace.

:focus: solo interviene si el usuario selecciona el elemento con los controles del teclado.

# data[].attributes.body
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. En este artículo y sus subartículos veremos con detalle todos los tipos y el modo como funcionan.
Tipos de selectores:

Selector de tipo

Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
Ejemplo: input se aplicará a cualquier elemento <input>.

Selector de clase

Selecciona todos los elementos que tienen el atributo de class especificado.
Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".

Selector de ID

Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".

Selector universal

Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
Ejemplo: * se aplicará a todos los elementos del documento.

Selector de atributo

Selecciona elementos basándose en el valor de un determinado atributo.
Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).

# data[].attributes.body
Las media queries son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).

Se utilizan para:

Aplicar estilos condicionales con las reglas-at @media e @import de CSS.

Indicar medios específicos en los elementos <link>, <source> y otros elementos HTML.

Existen los siguientes tipos de medios:

Tipo de medioSignificadoscreen | Monitores o pantallas de ordenador. Es el más común.
print | Documentos de medios impresos o pantallas de previsualización de impresión.
speech | Lectores de texto para invidentes (Antes aural, el cuál ya está obsoleto).
all | Todos los dispositivos o medios. El que se utiliza por defecto.

Recordemos que con el siguiente fragmento de código HTML estamos indicando que el nuevo ancho de la pantalla es el ancho del dispositivo, por lo que el aspecto del viewport se va a adaptar consecuentemente:

<meta name="viewport" content="initial-scale=1, width=device-width">