# data[].attributes.body
CSS significa Cascading Style Sheets (Hoja de Estilos en Cascada).

El lenguaje CSS describe cómo se mostrarán los elementos HTML en la pantalla.

El lenguaje CSS ahorra mucho trabajo, ya que permite controlar el diseño de varias páginas web a la vez.

Todas las hojas de estilo externas se almacenan en archivos CSS.

¿Por qué usar CSS?
El lenguaje CSS se utiliza para definir los estilos de tus páginas web, incluyendo el diseño, la disposición y las variaciones en la imagen para los diferentes dispositivos y tamaños de pantalla .

Tres formas de insertar CSS

Hay tres maneras de insertar una hoja de estilo:

Hoja de estilos externa

Hoja de estilos interna

Estilo en línea

# data[].attributes.body
Selector

Declaración

Propiedades

Valor de la propiedad

Nota las otras partes importantes de la sintaxis:

Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves ({}).

Dentro de cada declaración, debes usar los dos puntos (:) para separar la propiedad de su valor.

Dentro de cada regla, debes usar el punto y coma (;) para separar una declaración de la siguiente.

# data[].attributes.body
Si bien es posible que no haya un tamaño de pantalla ideal para diseñar tamaños de páginas web, algunas resoluciones aparecen con más frecuencia que otras. Debes prestar especial atención a los rangos de resolución cuando diseñes porque puedes garantizar que los usarás en muchos dispositivos. Estas son algunas de las opciones de resolución de pantalla más comunes:

Monitores de sobremesa, desde 1024x768 hasta 1920x1080
Las pantallas de los teléfonos varían de 360 ​​× 640 a 414 × 896
Las pantallas de las tabletas varían de 601x962 a 1280x800
Este es un desglose básico de los tamaños de página web estándar por dispositivo. En términos de resolución de pantalla de computadora de escritorio o portátil, un análisis de casi medio millón de usuarios a principios de 2021 muestra lo siguiente:

1920x1080 es la resolución más popular con 19.53% del total
1366x768 quedó en segundo lugar con 15.01%
1440x900 ocupó el tercer lugar, representando el 9,65%
1536x864 es cuarto con 7.26%

# data[].attributes.body
Los siguientes elementos HTML especifican información de fuentes. Aunque no todos están desaprobados, se desaconseja su uso en favor de las hojas de estilo.

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
La representación de elementos de estilo de fuente depende del agente de usuario. Lo que sigue es solamente una descripción informativa.

TT: Representa como texto de teletipo o ancho fijo.

I: Representa como estilo de texto itálica.

B: Representa como estilo de texto negrita.

BIG: Representa el texto con una fuente "grande".

SMALL: Representa el texto con una fuente "pequeña".

STRIKE y S: Desaprobados. Representan texto de estilo tachado.

U: Desaprobado. Representa texto subrayado.

# data[].attributes.body
Es posible alinear elementos en bloque (tablas, imágenes, objetos, párrafos, etc.) en el lienzo con el atributo align. Aunque este atributo se puede establecer en muchos elementos HTML, su rango de valores posibles difiere en ocasiones de unos elementos a otros. Aquí sólo se considera el significado del atributo align para texto.

Definiciones de atributos

align = left|center|right|justify [CI]

Desaprobado. Este atributo especifica la alineación horizontal de su elemento con respecto al contexto circundante. Valores posibles:

left: las líneas de texto se representan con los bordes izquierdos alineados.

center: las líneas de texto son centradas.

right: las líneas de texto se representan con los bordes derechos alineados.

justify: las líneas de texto se justifican en ambos márgenes.

El valor por defecto depende de la dirección base del texto. Para un texto de izquierda a derecha el valor por defecto es align=left, mientras que para un texto de derecha a izquierda el valor por defecto es align=right.

# data[].attributes.body
CSS permite crear varios tipos de bordes en elementos de la página. El borde más habitual es el de una línea lisa, pero también hay otros tipos de bordes que podemos implementar como una línea de puntos, bordes redondeados, etc. En este artículo de DesarrolloWeb.com veremos las distintas posibilidades de creación de bordes en CSS.

Lo cierto es que en DesarrolloWeb.com ya hemos hablado varias veces de bordes con CSS, sobre todo para explicar modos de hacer los bordes redondeados, que suelen quedar muy atractivos en las páginas web. De todos modos, vamos a ver cómo se especifica un borde con CSS.

DIV {
border: 1px solid #d0d0d0;
}

Así conseguiremos que todas las etiquetas DIV de la página tengan un borde de 1 píxel, sólido (de una línea sólida) y con color grisáceo (#d0d0d0).

Lo que vamos a ver en este artículo es los distintos estilos de borde, aparte del solid que ya conocemos. Para ilustrar el ejercicio, he creado una página con los distintos ejemplos de bordes. Pero ya que estamos hablando de bordes, sobre su declaración en CSS, cabe decir que podríamos utilizar otra notación distinta, en la que especificamos por separado los tres atributos del borde, como sigue:

.bordesolido{
border-color: #aaaaaa;
border-width: 1px;
border-style: solid;
}

También podemos especificar los bordes por separado de cada uno de los lados del elemento, de esta manera:

.bordeporlados{
border-top: 1px solid #ff9999;
border-right: 2px dotted #99ff99;
border-bottom: 2px dashed #9999ff;
border-left: 4px double #666666;
}

Todos estas indicaciones para la construcción de bordes las hemos visto en anteriores artículos de CSS de desarrollo web .com, como el manual de css o el taller de css.

Estilos de borde

Con el atributo border-style podemos definir varios estilos de borde, entre una gama relativamente amplia de posibilidades. No obstante, tenemos que admitir que muchos de los estilos hacen bordes un poco feos, que deberíamos utilizar con bastante cuidado.

Los posibles estilos de borde son:

solid

dotted

double

dashed

groove

ridge

inset

outset

Podemos ver todos estos estilos de borde en una página aparte.

Ahora vamos a comentar estos distintos estilos y poner ejemplos de cada uno.

Borde solid:
Este borde es de una línea sólida.

.bordesolido{
border:-color: #aaaaaa;
border-width: 1px;
border-style: solid;
}

Borde dotted (punteado):
Este borde está compuesto a base de una línea de puntos.

.bordepunteado{
border: 1px dotted #ff8833;
}

Borde double (Doble):
El borde double está compuesto por una doble línea sólida. Hay que saber que para que este borde se vea como una doble línea, tenemos que especificar un ancho de al menos 3 pixel. Así se vería un borde con dos líneas de un píxel más un espacio de separáción del borde de otro pixel. A medida que especificamos una anchura mayor del borde doble, las líneas van aumentando de grosor, así como el espacio que las separa.

.bordedoble{
border: 9px double #990000;
}

Borde dashed (línea discontinuada):
El borde dashed es muy similar al borde punteado, pero en lugar de puntos, lo que tenemos es una línea partida.

.bordedashed{
border: 1px dashed #660000;
}

Borde groove (ranura):
Es un borde especial, con una especie de relieve difícil de describir, creado con la combinación de colores claros y oscuros de borde.

.bordegroove{
border: 5px groove #66cc66;
}

Borde ridge (cresta):
Este borde también es un poco raro. Parecido al groove, pero con los colores oscuros y claros invertidos.

div.borderidge{
border: 10px ridge #6666cc;
}

Borde inset (relieve hacia dentro):
Crea un borde con una imitación de biselado, como si estuviera hundido. El efecto de este borde se ve mejor si el elemento que está bordeando tiene un color de fondo parecido al color de borde.

div.bordeinset{
border: 10px inset #3333ff;
background-color: #0000ff;
}

Borde outset (con relieve hacia fuera):
Este último estilo de borde imita un biselado, como si fuera un botón que está levantado. Es igual que el estilo de borde inset, pero con los colores claros y oscuros invertidos. Veremos también este efecto mejor si el elemento tiene un color de fondo.

div.bordeoutset{
border: 10px outset #cccccc;
background-color: #cccccc;
}

De nuevo, pongo el enlace al ejemplo donde aparecen todos estos estilos de borde.

# data[].attributes.body
La cascada comprende varios temas importantes a la hora de resolver dichos conflictos:

Importancia: Los estilos pueden tener una importancia concreta, eso le da mayor o menor prioridad.

Origen: Existen varios orígenes de CSS, cada uno con una prioridad específica.

Orden de aparición: El orden en el que se procesa el CSS influye a la hora de resolver conflictos.

Especificidad: Cuanto más específicos sean los estilos CSS, mayor prioridad.

Capas: Los estilos CSS se pueden aislar en capas fusionables.