Tecnicatura Universitaria en Desarrollo de Software

Programación 2
Módulo 2: Frontend
Tema 3: CSS
2.3. CSS
2.3.1. Introduccion

2.3.2. Adjuntar estilos

2.3.3. Selectores

2.3.3.1. Selectores básicos

2.3.3.2. Combinadores

2.3.3.3. Pseudo Classes

2.3.4. Sintaxis

2.3.5 Propiedades

2.3.6. Box Model

2.3.7. Flexbox

2.3.8. Grid

2.3.9. Animaciones

2.3.10. Diseño Responsivo

2.3.1. Introducción

CSS es un lenguaje de estilo utilizado para darle diseño y apariencia visual a las páginas
web creadas con HTML. Es una parte esencial del desarrollo frontend, ya que permite
controlar la presentación de los elementos HTML.

Figura 2.15

Con CSS, podemos definir reglas que determinan cómo se ven los elementos HTML en
términos de colores, fuentes, márgenes, tamaños, diseños y más. Estas reglas se aplican
selectivamente a los elementos a través de selectores, lo que te permite tener un control
preciso sobre el estilo de cada elemento en tu página.
En este módulo aprenderemos a utilizar CSS para aplicar estilos a nuestras páginas web y
lograr el aspecto deseado. Con HTML y CSS como nuestras herramientas principales,
podremos crear interfaces atractivas y personalizadas para los usuarios.

CSS (Hojas de estilo en cascada) se usa para diseñar páginas web, por ejemplo, para alterar
la fuente, el color, el tamaño y el espaciado de su contenido, dividir en múltiples columnas
o agregar animaciones y otras características decorativas.

2.3.2. Adjuntar estilos

CSS se puede utilizar de las siguientes maneras, aplicando los estilos en líneas, pero es poco
práctico y el código sería poco legible.

Otra forma es haciendo uso de la etiqueta <style> donde en el interior empezamos a estilar
la página, pero al igual que la anterior forma, es poco práctico y poco reutilizable.

Por lo tanto, la mejor forma de aplicar estilos a nuestra página, es con un archivo externo.
Para hacer esto haremos uso de la etiqueta <link>, esta etiqueta va siempre dentro del
elemento head (donde se encuentran los datos para el navegador) y no tiene etiqueta de
cierre.

<link rel="stylesheet" href="./estilos/estilos.css">

Como podemos ver, <link> tiene dos atributos importantes:

• El atributo rel describe la relación entre dos documentos, el documento HTML

actual y otro que queramos enlazar. Por ejemplo, “rel=icon” importa un icono
relacionado en la página. En el caso de un archivo css es “stylesheet”. El valor
viene por defecto apenas creamos la etiqueta, en algunos IDEs.

• El atributo href especifica la ubicación del archivo.

2.3.3. Selectores

CSS funciona “seleccionando” elementos o etiquetas y aplicándoles los estilos. Pero hay
múltiples formas de “seleccionar” estos elementos.
2.3.3.1. Selectores básicos
• Selector de tipo: selecciona todos los elementos que coinciden con el nombre del
elemento especificado. Solo hará falta nombrar al elemento que queremos
modificar, por ejemplo:
input{

En el ejemplo se selecciona a todos los elementos de tipo input.

• Selector de clase: selecciona los elementos teniendo en cuenta el nombre de las

clases. En HTML hay un atributo que poseen todos los elementos y ese es el atributo
“class”, sirve para ponerle un “nombre” al o los elementos.

<p class="subTitle">Lorem ipsum dolor sit amet</p>

El valor que le pongamos al atributo sirve para identificar el o los elementos y para que
posteriormente nos sea más fácil seleccionar el elemento para aplicarle los estilos. Los
selectores de clase se escriben de la siguiente manera:

.subTitle{

Se pone un punto y luego el nombre de la clase del elemento el cual queremos seleccionar.
Las clases se pueden aplicar a uno o varios elementos para modificar varios a la vez.

• Selector de id: es muy similar al selector de clase, también es un atributo que se le

coloca al elemento, pero con la diferencia de que el id solo se puede aplicar a un
elemento y no a varios de ellos.
<p id="subTitle1" >Lorem ipsum dolor sit amet</p>

<p id="subTitle2" >Lorem ipsum dolor sit amet</p>

La forma de seleccionar un elemento por id en css es de la siguiente manera:

#subTitle1{

• Selector universal: selecciona todos los elementos. Opcionalmente, puede estar

restringido a un espacio de nombre específico o a todos los espacios de nombres.
*{

/*Propiedades*/

}
2.3.3.2. Combinadores
• Combinador general de hermanos: el combinador “~” selecciona hermanos. Esto
quiere decir que el segundo elemento sigue al primero (no necesariamente de forma
inmediata) y ambos comparten el mismo elemento padre, por ejemplo:
p ~ span {

font-size:20px;

En el ejemplo vemos que el elemento afectado será <span>, que está después de un
elemento <p> y que ambos son hijos de un mismo elemento, <div>, por ejemplo:

<div>

<span>Este span no será afectado porque no está presidido por un elem

nto p</span>

<p>Esto es un párrafo</p>

<span>Este span si será afectado porque es hermano y está presidido d

un elemento p y son hijos de un mismo elemento.</span>

</div>

• Combinador de hijo: el combinador “>” selecciona los elementos que son hijos
directos del primer elemento, por ejemplo:
.contenedor>p{

En el ejemplo se selecciona a todos los hijos de elementos con la clase “contenedor”.

2.3.3.3. Pseudo Classes

Una pseudo clase CSS es una palabra clave que se añade a los selectores y que especifica
un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo cuando
el usuario mueva el cursor sobre el elemento especificado por el selector.

Sintaxis

selector:pseudoclase {

propiedad: valor;

}
Como podemos ver en el ejemplo, primero va el selector y luego la pseudo clase separada
por dos puntos “:”.

Tabla con todas las pseudoclases de css con su descripción:

Pseudo-Clase Descripción
:active Se aplica cuando el elemento está siendo activado por el
usuario.
:checked Se aplica a elementos de entrada (input) cuando están
seleccionados o marcados.
:disabled Se aplica a elementos desactivados.
:empty Se aplica a elementos que no contienen ningún hijo o texto.
:enabled Se aplica a elementos habilitados.
:first-child Se aplica al primer hijo de un elemento padre.
:first-of-type Se aplica al primer elemento de un tipo específico dentro de un
elemento padre.
:focus Se aplica cuando el elemento tiene el enfoque.
:hover Se aplica cuando el cursor del ratón se encuentra sobre el
elemento.
:last-child Se aplica al último hijo de un elemento padre.
:last-of-type Se aplica al último elemento de un tipo específico dentro de un
elemento padre.
:not(selector) Se aplica a elementos que no coinciden con el selector
especificado.
:nth-child(n) Se aplica a elementos que son el enésimo hijo de su padre.
:nth-last- Se aplica a elementos que son el enésimo hijo contando desde el
child(n)
final de su padre.
:nth-last-of- Se aplica a elementos que son el enésimo elemento de un tipo
type(n)
específico contando desde el final de su padre.
:nth-of-type(n) Se aplica a elementos que son el enésimo elemento de un tipo
específico dentro de su padre.
:only-child Se aplica a elementos que son el único hijo de su padre.
:only-of-type Se aplica a elementos que son el único elemento de un tipo
específico dentro de su padre.
 Pseudo-Clase Descripción
:placeholder- Se aplica a elementos de entrada (input) cuando su texto de
shown
marcador (placeholder) está visible.
:read-only Se aplica a elementos de entrada (input) que tienen el atributo
“readonly” especificado.
:read-write Se aplica a elementos de entrada (input) que no tienen el
atributo “readonly” especificado.
:required Se aplica a elementos de entrada (input) que tienen el atributo
“required” especificado.
:target Se aplica cuando el elemento es el destino de una URL en la
barra de direcciones.
:valid Se aplica a elementos de entrada (input) que contienen datos
válidos.
:visited Se aplica a enlaces visitados.

2.3.4. Sintaxis

Un archivo CSS está formado por distintas reglas. Las reglas están formadas por un selector
y contienen la definición de distintos estilos. Cada estilo se define mediante una propiedad
y un valor.

La sintaxis de CSS está conformada por:

● Selectores: Los selectores se utilizan para seleccionar los elementos HTML a los
que se aplicarán los estilos. Pueden ser elementos específicos (por ejemplo, “p”
para párrafos), clases (por ejemplo, “.clase” para elementos con una clase
específica) o identificadores (por ejemplo, “#id” para elementos con un ID
específico).

• Propiedades: Las propiedades son los atributos que definen cómo se verá un
elemento seleccionado. Pueden incluir propiedades como “color”, “font-size”,
“background-color”, entre muchas otras. Cada propiedad tiene un valor
asociado que determina cómo se aplicará la propiedad al elemento seleccionado.

• Valores: Los valores son los posibles ajustes que se pueden aplicar a una
propiedad. Por ejemplo, para la propiedad “color”, los valores pueden ser
 nombres de colores (como “red” o “blue”), códigos hexadecimales de colores
(como “#FF0000” para rojo) o valores de color RGB (como “rgb(255, 0, 0)”).

• Reglas: Una regla CSS está compuesta por un selector y un conjunto de

declaraciones rodeadas por llaves. El selector selecciona los elementos HTML a
los que se aplicarán las declaraciones. Las declaraciones están formadas por
propiedades y valores, y definen cómo se verán los elementos seleccionados.

• Comentarios: Los comentarios en CSS se escriben entre /* y */ y se utilizan para

añadir notas o explicaciones en el código. Los comentarios no se mostrarán en la
página web y solo son visibles para los desarrolladores.

Por ejemplo:

.contenedor {

background-color: gray; /*Este es un comentario*/

Como podemos ver en el ejemplo anterior primero seleccionamos el elemento a través de

su clase, luego abrimos llaves y dentro ponemos primero la propiedad y su valor separado
por dos puntos, finalmente, el punto y coma que indica que cerramos esa propiedad.
Podemos poner múltiples propiedades a un mismo elemento. Es importante saber que las
propiedades y los valores están siempre en inglés.

2.3.5. Propiedades

En CSS las propiedades son los atributos que se utilizan para definir cómo se verá un
elemento HTML en una página web. Estas propiedades permiten controlar aspectos como el
color, tamaño, posición, fuente, espaciado y otros detalles visuales y de diseño.

Cada propiedad en CSS tiene un nombre y un valor asociado. El nombre de la propiedad

especifica qué característica del elemento se modificará, y el valor define cómo se aplicará
esa modificación.

Existen numerosas propiedades en CSS que cubren una amplia gama de características y
estilos visuales. Algunas de las propiedades más comunes incluyen:
 Propiedad Descripción

color Establece el color del texto.

font-size Define el tamaño de la fuente del texto.

font-family Especifica la fuente utilizada para el texto.

background-color Establece el color de fondo de un elemento.

width Define el ancho de un elemento.

height Establece la altura de un elemento.

margin Controla los márgenes externos de un elemento.

padding Define el relleno interno de un elemento.

border Establece el estilo, el ancho y el color del borde de un elemento.

display Define cómo se muestra un elemento en el flujo del documento.

position Controla la posición de un elemento en relación con su contenedor.

float Permite que un elemento flote hacia la izquierda o la derecha.

text-align Alinea el contenido de texto dentro de un elemento.

text-decoration Agrega decoración al texto, como subrayado o tachado.

box-shadow Agrega una sombra alrededor de un elemento.

Estas propiedades se utilizan en conjunto con los selectores CSS para aplicar estilos y
personalizar la apariencia de los elementos HTML en una página web.

2.3.6. Box Model

En el modelo de caja, cada elemento HTML se representa como una caja rectangular que
consta de cuatro componentes principales:
 Figura 2.16

• Contenido (Content): Es el área del contenido real del elemento, como texto,
imágenes u otros elementos HTML. El tamaño del contenido se define mediante
las propiedades de ancho (width) y alto (height).

• Relleno (Padding): El relleno es un espacio transparente que rodea el contenido

y se encuentra entre el contenido y el borde del elemento. El tamaño del relleno
se define mediante las propiedades de relleno (padding-top, padding-right,
padding-bottom, padding-left). Afecta al tamaño total del elemento, pero no se
muestra como parte del contenido.

• Borde (Border): El borde es una línea que rodea el contenido y el relleno del
elemento. El tamaño y el estilo del borde se definen mediante las propiedades
de borde (border-width, border-style, border-color). El borde puede tener
diferentes estilos, como sólido, punteado o en relieve. Por defecto, tiene tamaño
0.

• Margen (Margin): El margen es un espacio transparente que se encuentra fuera

del borde y separa un elemento de otros elementos adyacentes. El tamaño del
margen se define mediante las propiedades de margen (margin-top, margin-
right, margin-bottom, margin-left). El margen no tiene fondo y se utiliza para
controlar el espacio entre elementos.

En resumen, el modelo de caja de CSS permite controlar el tamaño total de un elemento al

considerar su contenido, relleno, borde y margen. Estos componentes se pueden modificar
utilizando propiedades como width, height, padding, border y margin para lograr el diseño y
la presentación deseados en una página web.
Para modificar la “caja” haremos uso de las propiedades de css: - box-sizing: Controla cómo
se calcula el tamaño total de un elemento (contenido, relleno y borde). Por ejemplo:

.box {

box-sizing: border-box;

width: 200px;

padding: 20px;

border: 1px solid black;

En el ejemplo anterior, al establecer box-sizing: border-box, el tamaño total del elemento

.box incluirá el relleno y el borde, y el contenido se ajustará automáticamente.

● padding: Define el tamaño del relleno alrededor del contenido de un elemento. Por
ejemplo:
.box {

padding: 10px 20px 15px 5px;

En este ejemplo, el elemento .box tendrá un relleno de 10 píxeles en la parte superior, 20

píxeles a la derecha, 15 píxeles en la parte inferior y 5 píxeles a la izquierda.

● border: Permite personalizar el tamaño, estilo y color del borde de un elemento. Por
ejemplo:
.box {

border: 2px dashed red;

En este caso, el elemento .box tendrá un borde de 2 píxeles de ancho, con un estilo de línea
punteada y un color rojo.

● margin: Establece el tamaño de los márgenes alrededor de un elemento. Por

ejemplo:

.box {

margin: 10px 20px;

}
En este ejemplo, el elemento .box tendrá un margen de 10 píxeles en la parte superior e
inferior, y un margen de 20 píxeles en los lados derecho e izquierdo.

Estos ejemplos muestran cómo utilizar las propiedades de CSS para modificar el modelo de
caja y ajustar el tamaño, relleno, borde y margen de los elementos en una página web. Como
dato extra, hay otra manera de modificar cada dirección de la caja con propiedades
específicas por ejemplo:

.box{
padding-top: 10px;

padding-right: 20px;

padding-bottom: 15px;

padding-left: 5px;

De esta manera le causamos el mismo efecto que lo mostrado en el ejemplo de padding,

nada más que hacemos uso de más líneas. También se puede hacer lo mismo con la
propiedad margin.

2.3.7. Flexbox

Flexbox es un modelo de diseño en CSS que permite crear diseños flexibles y fluidos para
organizar y alinear elementos en un contenedor. Con Flexbox, puedes controlar la
distribución, el tamaño y el orden de los elementos de manera más eficiente.

El contenedor principal, al que se le aplica la propiedad display: flex, se convierte en un

contenedor flexible y establece un contexto para los elementos hijos que contiene.
Propiedades más importantes para trabajar con Flexbox:

Propiedad Descripción

flex-direction Define la dirección en la que los elementos se colocan dentro del

contenedor flexible. Puede ser row (izquierda a derecha), column
(arriba hacia abajo), row-reverse o column-reverse.

justify-content Controla la alineación de los elementos en el eje principal

(horizontalmente si flex-direction es row, verticalmente si es
column). Puede ser flex-start, flex-end, center, space-
between, space-around o space-evenly.
 Propiedad Descripción

align-items Determina la alineación de los elementos en el eje secundario

(verticalmente si flex-direction es row, horizontalmente si es
column). Puede ser flex-start, flex-end, center, baseline o
stretch.

flex-wrap Controla si los elementos deben envolverse o no dentro del

contenedor flexible cuando no hay suficiente espacio. Puede ser
nowrap o wrap.

align-content Se utiliza para controlar el espaciado entre las líneas de elementos en

el eje secundario cuando hay múltiples líneas de elementos.
Relevante cuando se usa flex-wrap: wrap.

flex Propiedad abreviada que combina flex-grow, flex-shrink y flex-

basis en una sola declaración. Controla el crecimiento,
encogimiento y tamaño inicial de los elementos flexibles.

Estas propiedades son solo algunas de las que se pueden utilizar con Flexbox. Con Flexbox,
es posible crear diseños complejos y responsivos con facilidad, permitiendo un control
preciso sobre el flujo y la organización de los elementos. Es una herramienta muy poderosa
para crear diseños flexibles y adaptativos en CSS.

2.3.8. Grid

CSS Grid es un sistema de diseño en CSS que permite crear diseños de página flexibles y
complejos de una manera más fácil y eficiente. Con CSS Grid, puedes organizar elementos
HTML en filas y columnas, creando así una cuadrícula en la que puedes ubicar y controlar la
posición de cada elemento de forma precisa.

La cuadrícula en CSS Grid se compone de dos elementos principales: el contenedor de la

cuadrícula (grid container) y los elementos dentro de la cuadrícula (grid items). El
contenedor de la cuadrícula define el contexto en el que se colocan los elementos, mientras
que los elementos de la cuadrícula se colocan dentro del contenedor.

La forma más común de crear una cuadrícula en CSS Grid es mediante la propiedad
display: grid aplicada al contenedor. Una vez que el contenedor se ha convertido en una
cuadrícula, puedes utilizar una variedad de propiedades relacionadas con la cuadrícula para
controlar el diseño y la posición de los elementos. Algunas de las propiedades clave
incluyen:
 • grid-template-columns y grid-template-rows: Estas propiedades te
permiten definir el tamaño y la estructura de las columnas y filas de la
cuadrícula. Puedes especificar tamaños fijos (píxeles, porcentajes, etc.) o utilizar
unidades flexibles como fr (fracciones) para crear columnas y filas que se
ajusten automáticamente al espacio disponible.

• grid-gap o gap: Estas propiedades establecen el espacio entre las celdas de la

cuadrícula, tanto horizontal como verticalmente. Puedes especificar un valor
único para establecer el espacio entre todas las celdas, o utilizar grid-column-
gap y grid-row-gap para controlar el espacio en columnas y filas por separado.

• grid-template-areas: Esta propiedad te permite asignar nombres a áreas

específicas de la cuadrícula y luego colocar los elementos en esas áreas
utilizando la propiedad grid-area en los elementos individuales. Esto
proporciona un enfoque más visual para definir el diseño de la cuadrícula.

• grid-column y grid-row: Estas propiedades te permiten controlar la ubicación

y el tamaño de los elementos dentro de la cuadrícula, especificando en qué
columnas y filas deben colocarse. Puedes utilizar números para indicar el inicio
y el final de las columnas o filas, o utilizar nombres de áreas definidos
previamente.

Estas son solo algunas de las propiedades principales que ofrece CSS Grid. Con ellas,
podemos crear diseños complejos y adaptativos, controlar el orden de los elementos, crear
diseños responsivos etc. CSS Grid es una herramienta poderosa que ha simplificado
significativamente la forma en que diseñamos y estructuramos las páginas web con CSS.

Haciendo uso del siguiente código html:

<div class="grid-container">

<div class="item">Elemento 1</div>

<div class="item">Elemento 2</div>

<div class="item">Elemento 3</div>

</div>
Se le aplicara grid:

.grid-container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-gap: 10px;

.item {

background-color: lightblue;

padding: 20px;

Una vez seleccionado el elemento con la clase “grid-container” le aplicamos display grid y
con el grid-template-columns le decimos que queremos crear 3 columnas iguales y que
entre cada columna haya una separación de 10 píxeles.

Otra forma de escribir grid-template-columns: 1fr 1fr 1fr; seria grid-template-columns:

repeat(3 ,1fr); ambas retornan los mismos resultados, en caso de querer más columnas se
debe modificar el número 3 por la cantidad de columnas que quisiéramos.

2.3.9. Animaciones

Las animaciones CSS permiten agregar efectos de movimiento y transición a los elementos
de la página web. Podemos crear animaciones utilizando las propiedades y los selectores de
CSS, lo que te permite controlar diferentes aspectos de la animación, como la duración, el
retraso, el tipo de interpolación y mucho más.

Para crear una animación en CSS, necesitas definir una regla @keyframes que describe los
diferentes estados o etapas de la animación. Cada etapa se define utilizando un porcentaje
del tiempo total de la animación (0% al 100%). Dentro de cada etapa, puedes especificar
las propiedades que deseas animar y los valores a los que se deben animar.

Usando este HTML:

<div class="box"></div>

Le aplicaremos una animación:

.box {

width: 100px;

height: 100px;

background-color: red;

animation-name: move;

animation-duration: 2s;

animation-delay: 1s;

animation-fill-mode: forwards;

@keyframes move {

0% {

transform: translateX(0);

50% {

transform: translateX(200px);

background-color: blue;

100% {

transform: translateX(0);

background-color: green;

}
}

• Primero, creamos un elemento <div> con la clase “box”, que será el elemento que
se animara.
• Luego, en el CSS, definimos las propiedades iniciales del elemento .box, como su
tamaño y color de fondo.
• A continuación, especificamos animation-name y le asignamos el nombre “move“
(puede llevar el nombre que queramos), que se corresponde con nuestra regla
@keyframes definida posteriormente.
 • Utilizamos animation-duration para establecer la duración de la animación en 2
segundos.
• Con animation-delay, añadimos un retraso de 1 segundo antes de que comience la
animación.
• La propiedad animation-fill-mode se establece en forwards, lo que hace que el
elemento mantenga el último estado de la animación una vez que se completa.
• Definimos nuestra regla @keyframes llamada move, que especifica los diferentes
estados de la animación.
• En 0%, el elemento no se mueve (translateX(0)) y tiene un color de fondo rojo.
• En 50%, el elemento se mueve horizontalmente 200 píxeles a la derecha
(translateX(200px)) y cambia su color de fondo a azul.
• En 100%, el elemento vuelve a su posición original (translateX(0)) y su color de
fondo cambia a verde.

2.3.10. Diseño responsivo

El diseño responsivo es una técnica de diseño web que permite que un sitio web se adapte y
se vea bien en diferentes dispositivos y tamaños de pantalla, desde computadoras de
escritorio hasta dispositivos móviles. Utilizando CSS, puedes aplicar reglas específicas para
adaptar el diseño y la apariencia de tu sitio web según el tamaño de la pantalla del
dispositivo en el que se visualiza.

El objetivo del diseño responsivo es proporcionar una experiencia de usuario óptima,

independientemente del dispositivo que se esté utilizando. Esto implica ajustar el diseño, el
tamaño y la disposición de los elementos de la página de manera fluida, para que el
contenido sea legible y accesible en todos los dispositivos.

Para crear un diseño responsivo usaremos los Media Queries. Las Media Queries son una
característica de CSS que permiten aplicar estilos específicos a un dispositivo o rango de
tamaños de pantalla. Con las Media Queries, puedes adaptar el diseño y la apariencia de tu
sitio web según las características del dispositivo en el que se está visualizando, como el
ancho de la pantalla, la altura, la resolución, la orientación etc.

Las Media Queries funcionan mediante la definición de reglas de estilo condicionales. Estas
reglas se aplican solo cuando se cumple una condición específica. Para utilizar Media
Queries, debes utilizar la sintaxis @media en tu archivo CSS.

/* Estilos aplicados a pantallas más pequeñas */

@media (max-width: 600px) {

 body {

font-size: 14px;

.container {

width: 90%;

/* Estilos aplicados a pantallas más grandes */

@media (min-width: 1200px) {

body {

font-size: 16px;

.container {

width: 1200px;

• La primera Media Query se aplica cuando el ancho de la pantalla es como

máximo de 600 píxeles. Dentro de esta Media Query, se especifican estilos para
el tamaño de fuente del body y el ancho de .container.

• La segunda Media Query se aplica cuando el ancho de la pantalla es como

mínimo de 1200 píxeles. Dentro de esta Media Query, se especifican estilos para
el tamaño de fuente del body y el ancho de .container.

Cuando el navegador encuentra una Media Query, evalúa si se cumple la condición

especificada. Si la condición se cumple, los estilos dentro de la Media Query se aplicarán.
Si la condición no se cumple, los estilos dentro de la Media Query se ignorarán y se aplicarán
los estilos por defecto.

Las Media Queries ofrecen una gran flexibilidad para adaptar el diseño de tu sitio web a
diferentes dispositivos y tamaños de pantalla. Podemos combinar múltiples Media Queries
y utilizar diferentes propiedades CSS dentro de ellas para personalizar aún más la apariencia
de los sitios en diferentes contextos.
Bibliografia.

https://developer.mozilla.org/es/
https://www.w3schools.com/css/default.asp