Texto

Taller > CSS

CSS Text

La propiedad text en CSS se utiliza para establecer varios estilos de texto en un elemento HTML, como el color, la fuente, el tamaño, entre otros.
Puedes utilizar esta propiedad para aplicar estilos a todo el texto dentro de un elemento específico, o utilizar selectores más específicos para aplicar estilos solo a partes específicas del texto.
Algunos ejemplos de cómo utilizar la propiedad text incluyen:
color: blue; para cambiar el color del texto a azul font-size: 20px; para aumentar el tamaño del texto a 20 pixels text-align: center; para centrar el texto dentro del elemento

Aquí tienes un ejemplo de cómo utilizar la propiedad text en CSS junto con un código HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
font-family: Arial, sans-serif;
font-size: 16px;
text-align: center;
}
.highlight {
color: blue;
text-decoration: underline;
}
.uppercase {
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="container">
<p>Bienvenido a mi <span class="highlight">sitio web</span>.</p>
<p>Aquí encontrarás <span class="uppercase">información interesante</span> sobre mi trabajo.</p>
</div>
</body>
</html>

En este ejemplo, hemos definido varias clases en el CSS, que se aplican a diferentes elementos en el HTML.
Utilizamos la clase container para establecer la fuente como Arial, el tamaño de la fuente como 16 pixels y alinear el texto al centro.
Luego, utilizamos la clase highlight para resaltar el texto “sitio web” con un color azul y una línea debajo. Y la clase uppercase para convertir el texto “información interesante” a mayúsculas.
En este ejemplo se aplican estilos generales a todo el contenido dentro del contenedor y estilos específicos solo a partes específicas del texto.
Espero que este ejemplo te ayude a entender cómo utilizar la propiedad text en CSS junto con HTML de manera más completa.

Propiedades relacionadas
Existen varias propiedades relacionadas con la propiedad text en CSS que te permiten controlar diferentes aspectos de la presentación del texto en una página web. Algunas de las propiedades más comunes incluyen:
color: Establece el color del texto. Puedes usar cualquier valor de color válido, como nombres de colores, códigos de colores hexadecimales o RGB.
font-size: Establece el tamaño de la fuente. Puedes usar cualquier tamaño válido, como pixels, puntos o ems.
font-family: Establece la familia de fuentes. Puedes usar cualquier nombre de fuente válido, como “Arial”, “Times New Roman”, o “Helvetica”.
font-weight: Establece el grosor de la fuente. Puedes usar valores numéricos del 100 al 900 o los valores normal y bold.
font-style: Establece el estilo de la fuente. Puedes usar los valores normal, italic y oblique.
text-align: Establece la alineación del texto. Puedes usar los valores left, right, center, y justify.
text-decoration: Establece las decoraciones del texto. Puedes usar los valores none, underline, overline, line-through y underline overline.
letter-spacing: Establece el espaciado entre letras. Puedes usar cualquier valor numérico válido, como pixels o ems.
line-height: Establece la altura de línea. Puedes usar cualquier valor numérico válido, como pixels o ems.
text-transform: Establece la transformación del texto. Puedes usar los valores none, uppercase, lowercase y capitalize.
text-shadow: Establece la sombra del texto. Puedes usar cuatro valores: offset-x | offset-y | blur-radius | color
text-overflow: Establece cómo se maneja el texto que excede el tamaño del contenedor. Puedes usar los valores clip, ellipsis, y string.
white-space: Establece cómo se maneja el espacio en blanco. Puedes usar los valores normal, nowrap, pre, pre-line, y pre-wrap.
word-wrap: Establece cómo se maneja el texto que se divide en varias líneas. Puedes usar los valores normal y break-word.
word-spacing: Establece el espaciado entre palabras. Puedes usar cualquier valor numérico válido, como pixels o ems.
text-indent: Establece el sangrado del primer párrafo dentro de un elemento. Puedes usar cualquier valor numérico válido, como pixels o ems.
text-justify: Establece cómo se justifica el texto en caso de que la alineación sea ‘justify’
text-orientation: Establece la orientación del texto. Puedes usar los valores mixed, upright, sideways y sideways-right
text-rendering: Establece la calidad de renderizado del texto, puedes usar los valores auto, optimizeSpeed, optimizeLegibility y geometricPrecision
text-size-adjust: Establece el ajuste automático del tamaño del texto, puedes usar los valores auto y un valor numérico para establecer un porcentaje específico.
text-underline-position: Establece la posición de la línea de subrayado del texto, puedes usar los valores auto, under y left
word-break: Establece como se divide una palabra al llegar al final de una línea, puedes usar los valores normal y break-all
Estas son solo algunas de las propiedades relacionadas con text en CSS, pero hay muchas más opciones disponibles para controlar la presentación del texto en una página web.

Color de texto
La propiedad color en CSS se utiliza para establecer el color del texto en un elemento HTML. Puedes especificar el color utilizando varios formatos diferentes, como:
Nombres de colores: Puedes utilizar nombres de colores predefinidos, como “red”, “blue”, “green”, etc.
Códigos de colores hexadecimales: Puedes usar un código de seis dígitos que representa el valor de color en formato hexadecimal, como “#ff0000” para el rojo.
Códigos de colores RGB: Puedes usar una notación RGB para especificar el color, como “rgb(255, 0, 0)” para el rojo. Códigos de colores RGBA: Puedes usar una notación RGBA para especificar el color y la transparencia, como “rgba(255, 0, 0, 0.5)” para un rojo semitransparente. Valores HSL: Puedes usar una notación HSL para especificar el color, como “hsl(0, 100%, 50%)” para el rojo. Valores HSLA: Puedes usar una notación HSLA para especificar el color y la transparencia, como “hsla(0, 100%, 50%, 0.5)” para un rojo semitransparente.

Ejemplo:

p {
color: blue;
}

En este ejemplo se establece el color de texto de todos los elementos p como azul.
Es importante notar que también puedes establecer el color de texto utilizando clases o identificadores específicos en lugar de aplicarlo a todos los elementos de un tipo específico.

Ejemplos
Aquí tienes algunos ejemplos de cómo usar la propiedad color en CSS para establecer el color del texto en diferentes elementos HTML:
Para establecer el color del texto en todos los encabezados (h1-h6) en rojo:
h1, h2, h3, h4, h5, h6 {
color: red;
}

Para establecer el color del texto en un elemento con una clase específica en verde:
.mi-clase {
color: green;
}

Para establecer el color del texto en un elemento con un id específico en azul:
#mi-id {
color: blue;
}

Establecer el color del texto en un elemento con un código hexadecimal #f9a03f
p {
color: #f9a03f;
}

Establecer el color del texto en un elemento con un código RGB (255,0,0)
p {
color: rgb(255,0,0);
}

Establecer el color del texto en un elemento con un código RGBA (255,0,0,0.5)
p {
color: rgba(255,0,0,0.5);
}

Estos son solo algunos ejemplos básicos de cómo usar la propiedad color en CSS, pero hay muchas otras formas de usarla para controlar la presentación del texto en una página web. Por ejemplo, también puedes usar la propiedad color en conjunto con otras propiedades como :hover, :active, :visited, etc. para cambiar el color del texto cuando el usuario interactúa con un elemento de la página. Por ejemplo:

a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}

En este ejemplo, se establece el color del texto de los enlaces a como azul cuando se ha visitado por primera vez, morado cuando se ha visitado antes, rojo cuando el usuario los pasa el cursor encima y amarillo cuando se hace clic sobre ellos.

Alineación y dirección de texto

Alineación de texto
La propiedad text-align en CSS se utiliza para establecer la alineación del texto en un elemento HTML. Puedes especificar la alineación utilizando los siguientes valores:
left: El texto se alinea a la izquierda del elemento.
right: El texto se alinea a la derecha del elemento.
center: El texto se centra dentro del elemento.
justify: El texto se justifica dentro del elemento.

Ejemplo:

p {
text-align: center;
}

En este ejemplo, el texto dentro de todos los elementos p se centrará dentro del elemento.
Es importante notar que la propiedad text-align también puede aplicarse a elementos de bloque como div, header, footer, section, etc.

Ejemplo:

.mi-clase {
text-align: right;
}

En este ejemplo, el texto dentro de todos los elementos con la clase mi-clase se alineará a la derecha.
Si deseas aplicar una alineación de texto a un elemento específico, puedes utilizar una clase o un id para seleccionarlo y aplicar la propiedad text-align.
También es importante mencionar que esta propiedad afecta solo al texto dentro del elemento, no a las imágenes o cualquier otro tipo de contenido.

Alinear texto al final
La propiedad text-align-last en CSS se utiliza para establecer la alineación del último renglón de texto en un elemento HTML cuando el texto se justifica (text-align: justify). Puedes especificar la alineación utilizando los siguientes valores:
auto: El navegador decide cómo alinear el último renglón de texto. Este es el valor predeterminado.
left: El último renglón de texto se alinea a la izquierda.
right: El último renglón de texto se alinea a la derecha.
center: El último renglón de texto se centra.
justify: El último renglón de texto se justifica igual que el resto del texto.

Ejemplo:
Aquí hay algunos ejemplos adicionales de cómo usar la propiedad text-align-last:

Para alinear el último renglón de un párrafo justificado al centro:

p {
text-align: justify;
text-align-last: center;
}

Para alinear el último renglón de un párrafo justificado a la izquierda:

p {
text-align: justify;
text-align-last: left;
}

Para usar el valor predeterminado de text-align para determinar la alineación del último renglón:

p {
text-align: justify;
text-align-last: auto;
}

Para alinear el último renglón de una lista de puntos justificada a la derecha:

ul {
text-align: justify;
text-align-last: right;
}

Nota: Recuerda que text-align-last solo se aplica cuando el valor de text-align es “justify” y en algunos navegadores puede no ser soportado.

Dirección del texto
La propiedad CSS direction establece la dirección del texto en un elemento. Los valores posibles son “ltr” (izquierda a derecha) y “rtl” (derecha a izquierda).
El valor predeterminado es “ltr”. Esta propiedad afecta a todo el contenido del elemento, incluyendo las imágenes y las tablas.
La propiedad unicode-bidi se utiliza para controlar la dirección de caracteres específicos dentro de un elemento de texto. Los valores posibles son “normal” y “embed”. El valor predeterminado es “normal”.
normal se aplica la dirección establecida por la propiedad direction al elemento.
embed es utilizado para anidar contenido con una dirección diferente dentro de un elemento con una dirección establecida.

Ejemplo:
Aquí hay un ejemplo sencillo de cómo utilizar la propiedad direction y unicode-bidi en HTML:

<!DOCTYPE html>
<html>
<head>
<style>
/* Establece la dirección del texto en el elemento "p" como "rtl" (derecha a izquierda) */
p {
direction: rtl;
}
/* Establece la dirección del texto en el elemento "span" como "ltr" (izquierda a derecha) */
span {
unicode-bidi: embed;
direction: ltr;
}
</style>
</head>
<body>
<p>
<span>123</span>456
</p>
</body>
</html>

En este ejemplo, se establece la dirección del texto en el elemento “p” como “rtl” (derecha a izquierda) y se establece la dirección del texto dentro del elemento “span” como “ltr” (izquierda a derecha).
Con la propiedad “unicode-bidi” como “embed”, lo que significa que se mostrará el contenido dentro del elemento “span” en una dirección diferente a la del elemento padre “p”.
El resultado es: “654 321” donde el número 123 se mostrará de izquierda a derecha y el 456 se mostrará de derecha a izquierda.

Alineamiento vertical de texto
La propiedad CSS vertical-align es utilizada para alinear el contenido dentro de un elemento de manera vertical. Esta propiedad se aplica a elementos en línea y elementos tabulares.
El valor predeterminado es “baseline” (línea de base), que alinea el contenido al nivel de la línea de base del texto en el elemento.
Los valores posibles son:
baseline: alinea el contenido al nivel de la línea de base del texto en el elemento.
top: alinea el contenido al borde superior del elemento.
middle: alinea el contenido en el centro del elemento.
bottom: alinea el contenido al borde inferior del elemento.
text-top: alinea el contenido al nivel de la línea superior del texto en el elemento.
text-bottom: alinea el contenido al nivel de la línea inferior del texto en el elemento.
Valor numérico: puedes especificar un valor numérico para mover el contenido hacia arriba o hacia abajo en relación a la línea de base. Los valores negativos mueven el contenido hacia arriba y los valores positivos mueven el contenido hacia abajo.

Ejemplo:
Aquí hay algunos ejemplos de cómo utilizar los diferentes valores de la propiedad vertical-align en CSS:

example1 {
font-size: 20px;
vertical-align: baseline;
}
En este ejemplo, el contenido dentro del elemento con la clase “example1” se alineará al nivel de la línea de base del texto.

.example2 {
font-size: 20px;
vertical-align: top;
}
En este ejemplo, el contenido dentro del elemento con la clase “example2” se alineará al borde superior del elemento.

.example3 {
font-size: 20px;
vertical-align: middle;
}
En este ejemplo, el contenido dentro del elemento con la clase “example3” se alineará en el centro del elemento.

.example4 {
font-size: 20px;
vertical-align: bottom;
}
En este ejemplo, el contenido dentro del elemento con la clase “example4” se alineará al borde inferior del elemento.

.example5 {
font-size: 20px;
vertical-align: text-top;
}
En este ejemplo, el contenido dentro del elemento con la clase “example5” se alineará al nivel de la línea superior del texto en el elemento.

.example6 {
font-size: 20px;
vertical-align: text-bottom;
}
En este ejemplo, el contenido dentro del elemento con la clase “example6” se alineará al nivel de la línea inferior del texto en el elemento.

.example7 {
font-size: 20px;
vertical-align: -10px;
}
En este ejemplo, el contenido dentro del elemento con la clase “example7” se moverá 10px hacia arriba con relación a la línea de base del elemento.

Recuerda que estos son solo ejemplos y debes personalizar los valores según tus necesidades y diseño.

Decoración de texto
La propiedad CSS text-decoration se utiliza para decorar el texto de un elemento. Esta propiedad se utiliza para agregar decoraciones como subrayado, tachado, o sobrerayado al texto. El valor predeterminado es «none» (ninguno), lo que significa que no se aplica ninguna decoración al texto.

Los valores comunes incluyen:
none: no se aplica ninguna decoración al texto
underline: se aplica un subrayado debajo del texto
overline: se aplica una línea encima del texto
line-through: se aplica una línea que atraviesa el texto
blink: hace que el texto parpadee

También es posible especificar varios valores separados por un espacio para aplicar más de una decoración al texto, por ejemplo:
text-decoration: underline overline;

Propiedades relacionadas
Hay varias propiedades relacionadas con “text-decoration” en CSS que te permiten personalizar aún más la decoración del texto:
Aquí está una lista de las propiedades relacionadas con “text-decoration” en CSS:
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-skip
text-decoration-thickness
text-decoration-offset

Cada una de estas propiedades te permite personalizar la decoración del texto en diferentes aspectos como el color, el estilo, el grosor, la distancia entre la decoración y el texto, entre otros.

Ejemplos:
Algunos ejemplos de cómo utilizar las propiedades relacionadas con “text-decoration” en CSS con código HTML y CSS:
<p class="example1">Este es un ejemplo de text-decoration-color</p>
.example1 {
text-decoration: underline;
text-decoration-color: red;
}
En este ejemplo, se aplica un subrayado debajo del texto con el color rojo, utilizando la propiedad “text-decoration-color”.

<p class="example2">Este es un ejemplo de text-decoration-line</p> )
.example2 {
text-decoration-line: underline line-through;
}
En este ejemplo, se aplica un subrayado y una línea que atraviesa el texto, utilizando la propiedad “text-decoration-line”.

<p class="example3">Este es un ejemplo de text-decoration-style</p>
.example3 {
text-decoration: underline;
text-decoration-style: dotted;
}
En este ejemplo, se aplica un subrayado con un estilo punteado, utilizando la propiedad “text-decoration-style”.

<p class="example4">Este es un ejemplo de text-decoration-skip</p>
.example4 {
text-decoration: underline;
text-decoration-skip: spaces;
}
En este ejemplo, se subraya solo el primer carácter de cada palabra, utilizando la propiedad “text-decoration-skip”.

<p class="example5">Este es un ejemplo de text-decoration-thickness</p>
.example5 {
text-decoration: underline;
text-decoration-thickness: 3px;
}
En este ejemplo, se aplica un subrayado con un grosor de 3px, utilizando la propiedad “text-decoration-thickness”.

<p class="example6">Este es un ejemplo de text-decoration-offset</p>
.example6 {
text-decoration: underline;
text-decoration-offset: 5px;
}
En este ejemplo, se aplica un subrayado con una distancia de 5px entre el subrayado y el texto, utilizando la propiedad “text-decoration-offset”.

Es importante tener en cuenta que algunas de estas propiedades solo funcionan en navegadores específicos o solo están disponibles en versiones más recientes de los navegadores, por lo que es recomendable verificar la compatibilidad antes de utilizarlas en un proyecto.

Transformación de texto
La propiedad “text-transform” de CSS se utiliza para aplicar un formato específico al texto. Puede ser utilizado para convertir el texto en mayúsculas, minúsculas o capitalizar cada palabra. La sintaxis de esta propiedad es:
none es el valor predeterminado y no aplica ningún cambio al texto.
capitalize convierte la primera letra de cada palabra en mayúscula y el resto del texto en minúsculas.
uppercase convierte todo el texto en mayúsculas.
lowercase convierte todo el texto en minúsculas.

Ejemplos:
Aquí hay algunos ejemplos de cómo utilizar la propiedad “text-transform” en CSS con diferentes valores:
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}

Espaciado de texto
Hay varias propiedades en CSS que se pueden utilizar para controlar el espaciado de texto. Algunas de las más comunes son:
letter-spacing: Esta propiedad aumenta o disminuye el espacio entre las letras. Puede utilizar unidades como px, em, rem, etc.
p {
letter-spacing: 2px;
}
word-spacing: Esta propiedad aumenta o disminuye el espacio entre las palabras. Puede utilizar unidades como px, em, rem, etc.
p {
word-spacing: 10px;
}

line-height: Esta propiedad aumenta o disminuye el espacio entre las líneas de texto. Puede utilizar unidades como px, em, rem, etc. o una proporción (como «1.5»).
p {
line-height: 1.5;
}

text-indent: Esta propiedad aumenta o disminuye el espacio de sangría al comienzo de un párrafo. Puede utilizar unidades como px, em, rem, etc.

p {
text-indent: 20px;
}

white-space: Se utiliza para controlar cómo se manejan los espacios en blanco en un elemento de texto. Esta propiedad tiene diferentes valores que pueden ser utilizados para especificar cómo se deben manejar los espacios en blanco en un elemento de texto. Los valores comunes son:
normal: este es el valor predeterminado y significa que el navegador se encarga automáticamente del espaciado de texto, eliminando los saltos de línea y los espacios en blanco adicionales.
pre: mantiene los espacios en blanco y los saltos de línea tal y como se escriben en el código HTML. Es útil para mostrar código fuente o preformatear texto.
nowrap: previene que el texto se desborde a la siguiente línea, forzando todo el texto a permanecer en una sola línea.
pre-wrap: combina los efectos de “pre” y “normal”, manteniendo los saltos de línea y los espacios en blanco, pero también permitiendo que el texto se desborde a la siguiente línea cuando sea necesario.
pre-line: combina los efectos de “pre” y “normal”, eliminando los espacios adicionales y permitiendo que el texto se desborde a la siguiente línea cuando sea necesario, pero conservando los saltos de línea.

/*Este ejemplo mantiene los espacios en blanco y saltos de línea tal y como se escriben en el código HTML. Es útil para mostrar código fuente o preformatear texto.*/
.preformatted {
white-space: pre;
}
/*Este ejemplo previene que el texto se desborde a la siguiente línea, forzando todo el texto a permanecer en una sola línea.*/ .nowrap {
white-space: nowrap;
}
/*Este ejemplo combina los efectos de "pre" y "normal", manteniendo los saltos de línea y los espacios en blanco, pero también permitiendo que el texto se desborde a la siguiente línea cuando sea necesario.*/
.pre-wrap {
white-space: pre-wrap;
}
/*Este ejemplo elimina los saltos de línea y los espacios en blanco adicionales y permite que el navegador maneje el espacio en blanco de manera automática.*/
.normal {
white-space: normal;
}

La propiedad «white-space» es muy útil para controlar el formato de texto en una página web, especialmente cuando se trata de mostrar código fuente o preformatear texto.
Ten en cuenta que algunas de estas propiedades solo funcionan en navegadores específicos o solo están disponibles en versiones más recientes de los navegadores, por lo que es recomendable verificar la compatibilidad antes de utilizarlos en un proyecto.

Sombra de texto
La propiedad «text-shadow» de CSS se utiliza para añadir sombras a los textos. La sintaxis para esta propiedad es la siguiente:

text-shadow: h-shadow v-shadow blur color;

Donde:
“h-shadow” es la posición horizontal de la sombra en relación al texto (puede ser un valor negativo para mover la sombra hacia la izquierda).
“v-shadow” es la posición vertical de la sombra en relación al texto (puede ser un valor negativo para mover la sombra hacia arriba).
“blur” es la cantidad de desenfoque de la sombra.
“color” es el color de la sombra.

Ejemplo:
h1 {
text-shadow: 3px 2px 2px #ccc;
}

En este ejemplo, se establece una sombra horizontal de 3px, una sombra vertical de 2px, un desenfoque de 2px y un color de #ccc para el elemento h1.
También se pueden aplicar varias sombras con un solo valor de «text-shadow», separando cada sombra con una coma.
h1 { text-shadow: 3px 2px 2px #ccc, -1px -1px 2px #666; }

En este ejemplo, se establecen dos sombras, una con valores horizontales y verticales positivos y otra con valores negativos.

CSS Font

La propiedad “font” en CSS es una propiedad shorthand (atajo) que se utiliza para establecer varios estilos de fuente en un solo lugar. Esta propiedad es muy útil para ahorrar tiempo y simplificar el código al no tener que escribir varias propiedades separadas.
La propiedad “font” se utiliza para establecer la familia de fuentes, el tamaño, el estilo y el peso de la fuente. Los valores pueden ser especificados en una sola línea y en el orden que se desee.

La sintaxis de la propiedad “font” es la siguiente:
font: [font-style] [font-variant] [font-weight] font-size/line-height font-family; Lenguaje del código: texto plano (plaintext)
Ejemplo de uso
Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad “font” para establecer varios estilos de fuente en un párrafo:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font: italic small-caps bold 12px/1.5 Arial, sans-serif;
}
</style>
</head>
<body>
<p>Este es un ejemplo de párrafo con estilos de fuente establecidos mediante la propiedad "font" en CSS.</p>
</body>
</html>

En este ejemplo, se establece en el CSS que el elemento “p” tendrá una fuente Arial en negrita, en cursiva, con letras mayúsculas y minúsculas y tamaño 12px, con una línea de alto 1.5. Si Arial no está disponible en el sistema, se usará una fuente “sans-serif” como alternativa.
Es importante mencionar que para que el código anterior funcione, es necesario que la fuente Arial esté instalada en el sistema donde se esté visualizando la página.

Propiedades relacionadas
Existen varias propiedades relacionadas con la propiedad “font” en CSS que te permiten establecer estilos de fuente de manera más específica. Algunas de estas propiedades son:
font-style: Especifica el estilo de la fuente. Puede ser “normal”, “italic” o “oblique”.
font-variant: Especifica la variante de la fuente. Puede ser “normal” o “small-caps”.
font-weight: Especifica el grosor de la fuente. Puede ser “normal”, “bold” o un valor numérico entre 100 y 900.
font-size: Especifica el tamaño de la fuente. Puede ser un valor en píxeles o en unidades relativas como “em” o “rem”.
line-height: Especifica la altura de línea. Puede ser un valor numérico o una unidad de medida.
font-family: Especifica la familia de fuentes a utilizar. Puede ser una o varias familias de fuentes separadas por comas.

Estilo de fuente
La propiedad “font-style” en CSS se utiliza para establecer el estilo de la fuente. Los valores posibles son “normal”, “italic” y “oblique”.
El valor normal es el valor predeterminado y especifica una fuente sin cursiva.
El valor italic especifica una fuente en cursiva.
El valor oblique especifica una fuente inclinada, que se ve similar a una fuente en cursiva, pero no es necesariamente una fuente cursiva.
Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad “font-style” para establecer el estilo de un párrafo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<p>Este es un ejemplo de párrafo con estilo de fuente establecido mediante la propiedad "font-style" en CSS.</p>
</body>
</html>

En este ejemplo, se establece en el CSS que el elemento “p” tendrá una fuente en cursiva, el cual es especificado con font-style: italic.
Además de esto, también se puede utilizar font-style: oblique para inclinar la fuente, pero debes tener en cuenta que no todas las fuentes tienen una versión oblique, por lo que en ese caso, el navegador utilizará una versión simulada de la fuente inclinada.
Es importante mencionar que la propiedad “font-style” puede ser utilizada junto con la propiedad “font” para establecer varios estilos de fuente en un solo lugar.Propiedades relacionadas
Existen varias propiedades relacionadas con la propiedad “font” en CSS que te permiten establecer estilos de fuente de manera más específica. Algunas de estas propiedades son:
font-style: Especifica el estilo de la fuente. Puede ser “normal”, “italic” o “oblique”.
font-variant: Especifica la variante de la fuente. Puede ser “normal” o “small-caps”.
font-weight: Especifica el grosor de la fuente. Puede ser “normal”, “bold” o un valor numérico entre 100 y 900.
font-size: Especifica el tamaño de la fuente. Puede ser un valor en píxeles o en unidades relativas como “em” o “rem”.
line-height: Especifica la altura de línea. Puede ser un valor numérico o una unidad de medida.
font-family: Especifica la familia de fuentes a utilizar. Puede ser una o varias familias de fuentes separadas por comas.

Estilo de fuente
La propiedad “font-style” en CSS se utiliza para establecer el estilo de la fuente. Los valores posibles son “normal”, “italic” y “oblique”.
El valor normal es el valor predeterminado y especifica una fuente sin cursiva.
El valor italic especifica una fuente en cursiva.
El valor oblique especifica una fuente inclinada, que se ve similar a una fuente en cursiva, pero no es necesariamente una fuente cursiva.

Variante de fuente
La propiedad “font-variant” en CSS se utiliza para establecer la variante de la fuente. El valor posible es “small-caps” (pequeñas mayúsculas).
El valor small-caps especifica que las letras minúsculas de un texto deben ser mostradas en versión reducida de las mayúsculas (pequeñas mayúsculas).
Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad «Font-variant” para establecer la variante de un párrafo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-variant: small-caps;
}
</style>
</head>
<body>
<p>Este es un ejemplo de párrafo con variante de fuente establecida mediante la propiedad "font-variant" en CSS.</p>
</body>
</html>

En este ejemplo, se establece en el CSS que el elemento “p” tendrá las letras minúsculas en versión reducida de las mayúsculas (pequeñas mayúsculas), el cual es especificado con font-variant: small-caps.
Es importante mencionar que no todas las fuentes tienen una versión small-caps, por lo que en ese caso, el navegador utilizará una versión simulada de las pequeñas mayúsculas.
Al igual que en font-style, la propiedad “font-variant” puede ser utilizada junto con la propiedad “font” para establecer varios estilos de fuente en un solo lugar.
Por ejemplo:

p {
font: italic small-caps 16px Arial, sans-serif;
}

En este ejemplo se establece la propiedad “font” con valores para el estilo de la fuente (italic), variante de la fuente (small-caps), tamaño de la fuente (16px) y familia de la fuente (Arial, sans-serif)
Es importante mencionar que el uso de font-variant: small-caps es útil para aumentar la legibilidad y dar un aspecto más profesional a tu página web, pero su uso debe ser moderado porque un abuso de small-caps puede ser difícil de leer.

Grosor de la fuente
La propiedad “font-weight” en CSS se utiliza para establecer el grosor de la fuente. Los valores posibles son “normal”, “bold” y un rango de valores numéricos entre 100 y 900.
El valor normal es el valor predeterminado y especifica una fuente con grosor normal.
El valor bold especifica una fuente con grosor negrita.
Los valores numéricos entre 100 y 900 especifican diferentes niveles de grosor de la fuente, donde un valor más alto significa una fuente más gruesa.
Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad “font-weight” para establecer el grosor de un párrafo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-weight: bold;
}
</style>
</head>
<body>
<p>Este es un ejemplo de párrafo con grosor de fuente establecido mediante la propiedad "font-weight" en CSS.</p>
</body>
</html>

En este ejemplo se establece en el CSS que el elemento “p” tendrá una fuente con grosor negrita, el cual es especificado con font-weight: bold.
También se pueden utilizar valores numéricos para establecer el grosor de la fuente, por ejemplo:

p {
font-weight: 700;
}

En este caso se establece un grosor de 700, que se considera como negrita.
Es importante mencionar que no todas las fuentes tienen una versión con todos los niveles de grosor, por lo que en ese caso, el navegador utilizará una versión simulada del grosor de la fuente.
Al igual que en font-style y font-variant, la propiedad font-weight puede ser utilizada junto con la propiedad “font” para establecer varios estilos de fuente en un solo lugar.

Tamaño de la fuente
La propiedad “font-size” en CSS se utiliza para establecer el tamaño de la fuente en un elemento de HTML. Los valores pueden ser especificados en píxeles (px), puntos (pt), ems (em) o rems (rem).
Aquí te dejo un ejemplo de código HTML y CSS que utiliza la propiedad “font-size” para establecer el tamaño de un párrafo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 16px;
}
</style>
</head>
<body>
<p>Este es un ejemplo de párrafo con tamaño de fuente establecido mediante la propiedad "font-size" en CSS.</p> </body>
</html>

En este ejemplo se establece en el CSS que el elemento “p” tendrá un tamaño de fuente de 16px, el cual es especificado con font-size: 16px.
Por otro lado, también se pueden utilizar valores absolutos como “xx-small”, “x-small”, “small”, “medium”, “large”, “x-large” y “xx-large”, para establecer el tamaño de la fuente.

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: xx-large;
}
</style>
</head>
<body>
<p>Este es un ejemplo de párrafo con tamaño de fuente establecido mediante la propiedad "font-size" en CSS.</p>
</body>
</html>

En este caso, el tamaño de la fuente del elemento “p” será el tamaño más grande disponible.
También es posible utilizar porcentajes (%), para establecer el tamaño de la fuente en relación al tamaño de la fuente del elemento padre.

<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 150%;
}
</style>
</head>
<body>
<p>Este es un ejemplo de párrafo con tamaño de fuente establecido mediante la propiedad "font-size" en CSS.</p>
</body>
</html>

En este último ejemplo, el tamaño de la fuente del elemento “p” será el 150% del tamaño de la fuente del elemento padre.
Es importante mencionar que el uso de rem es recomendado, ya que es una unidad relativa al elemento raíz, lo que permite una mejor escalabilidad en la página.
Al igual que en font-style, font-variant, font-weight y font-size, la propiedad “font” puede ser utilizada para establecer varios estilos de fuente en un solo lugar.

Altura de la línea
La propiedad “line-height” en CSS se utiliza para establecer la altura de línea de un elemento de texto. Los valores pueden ser especificados en unidades absolutas (como píxeles, puntos), relativas (como ems, rems) o en forma de porcentaje.
Aquí te dejo algunos ejemplos de cómo se puede utilizar la propiedad “line-height” en CSS:

Establecer la altura de línea con un valor numérico:

p {
/* Establece una altura de línea de 1.5 veces la altura de la fuente */
line-height: 1.5;
}

Establecer la altura de línea con una unidad de medida:

p {
/* Establece una altura de línea de 20px */
line-height: 20px;
}

Establecer la altura de línea con un porcentaje:

p {
/* Establece una altura de línea del 150% de la altura de la fuente */
line-height: 150%;
}

Establecer la altura de línea con un valor relativo a la altura de la fuente:

p {
/* Establece una altura de línea de 1.2 veces la altura de la fuente */
line-height: 1.2em;
}

Familia tipográfica

La propiedad “font-family” en CSS se utiliza para establecer la familia de fuentes de un elemento de texto. Los valores pueden ser nombres de familias de fuentes específicas (como “Arial” o “Times New Roman”) o nombres genéricos (como “serif” o “sans-serif”).
Aquí te dejo algunos ejemplos de cómo se puede utilizar la propiedad “font-family” en CSS con comentarios dentro del código:

Establecer una familia de fuentes específica:

p {
/* Establece la familia de fuentes "Arial" */
font-family: Arial;
}

Establecer una familia de fuentes genérica:

p {
/* Establece una familia de fuentes "sans-serif" */
font-family: sans-serif;
}

Establecer varias familias de fuentes como una lista de preferencias:

p {
/* Establece una lista de preferencias de familias de fuentes: "Arial", "Helvetica", "sans-serif" */
font-family: Arial, Helvetica, sans-serif;
}

Establecer una familia de fuentes personalizada (si está disponible en el sistema del usuario):

p {
/* Establece una familia de fuentes personalizada "MiFuente" */
font-family: MiFuente;
}

Algunas familias de fuentes
Aquí te dejo una lista de algunas familias de fuentes comunes que se pueden utilizar en la propiedad “font-family” de CSS:
Serif: Times New Roman, Georgia, Palatino, Garamond
Sans-serif: Arial, Helvetica, Verdana, Tahoma
Monospace: Courier New, Lucida Console, Monaco
Display: Impact, Arial Black, Copperplate Gothic
Script: Brush Script MT, Lucida Handwriting, Freestyle Script
Handwriting: Bradley Hand, Lucida Handwriting, Comic Sans MS
Además de estas familias de fuentes comunes, también puedes utilizar familias de fuentes personalizadas si están disponibles en el sistema del usuario.
Ten en cuenta que el sistema del usuario debe tener las fuentes que se van a utilizar instaladas para que se puedan mostrar correctamente, si no es así se utilizará una fuente por defecto.

Fuentes seguras
Existen varias fuentes web seguras de hojas de estilo en cascada (CSS) que puedes utilizar en tus proyectos.
Aquí te dejo una lista de fuentes web seguras e importantes que debes tener en cuenta al momento de utilizarlas en tus proyectos de CSS:
Arial
Times New Roman
Verdana
Helvetica
Georgia
Trebuchet MS
Calibri
Arial Black
Impact
Lucida Sans Unicode

Estas fuentes son ampliamente utilizadas en el diseño web y son soportadas en la mayoría de los dispositivos y navegadores.
Al utilizar estas fuentes, puedes estar seguro de que tu diseño se verá consistente en la mayoría de los dispositivos y plataformas.
Sin embargo, es importante que siempre verifiques la licencia de la fuente antes de utilizarla en un proyecto y también es recomendable considerar utilizar algunas de las fuentes mencionadas en mi respuesta anterior para darle un toque distintivo a tu diseño.

Ejemplos:
Arial:
/* Establece Arial como la fuente principal del sitio */
body {
font-family: Arial, sans-serif;
}

Times New Roman:
/* Utiliza Times New Roman para los títulos */
h1, h2, h3 {
font-family: "Times New Roman", serif;
}

Verdana:
/* Utiliza Verdana para los textos de menú */
nav a {
font-family: Verdana, sans-serif;
}

Helvetica: /* Utiliza Helvetica para los botones */
.btn {
font-family: Helvetica, sans-serif;
}

Georgia:
/* Utiliza Georgia para los textos de bloque de citas */
blockquote {
font-family: Georgia, serif;
}

Trebuchet MS:
/* Utiliza Trebuchet MS para los textos de párrafo */
p {
font-family: "Trebuchet MS", sans-serif;
}

Calibri:
/* Utiliza Calibri para los textos de formulario */
input, textarea {
font-family: Calibri, sans-serif;
}

Arial Black:
/* Utiliza Arial Black para los títulos de sección */
section h2 {
font-family: "Arial Black", sans-serif;
}

Impact:
/* Utiliza Impact para los títulos de los avisos */
.notice h3 {
font-family: Impact, sans-serif;
}

Lucida Sans Unicode:
/* Utiliza Lucida Sans Unicode para los textos de pie de página */
footer {
font-family: "Lucida Sans Unicode", sans-serif;
}

Ten en cuenta que al especificar varias fuentes en el valor de font-family, el navegador utilizará la primera fuente disponible en el sistema del usuario, si no está disponible usará la siguiente y así sucesivamente.

Fuentes alternativas
En CSS, puedes especificar fuentes alternativas para que el navegador utilice una fuente diferente si la primera opción no está disponible en el sistema del usuario.
Puedes especificar varias opciones de fuentes alternativas separándolas por comas en el valor de la propiedad font-family.
Por ejemplo, si quieres utilizar la fuente “Open Sans” como la principal, pero quieres especificar “Arial” como una fuente alternativa, podrías escribir lo siguiente:

body {
font-family: 'Open Sans', Arial, sans-serif;
}

En este ejemplo, el navegador intentará utilizar “Open Sans” primero, pero si no está disponible en el sistema del usuario, usará “Arial” en su lugar.
Además, al final se especifica “sans-serif” para que en caso de no tener ninguna de las dos primeras opciones, utilice una fuente “sans-serif” genérica.
También puedes especificar múltiples opciones de fuentes alternativas para aumentar las posibilidades de que el texto se vea correctamente en todos los dispositivos.
Por ejemplo:

nav a {
font-family: 'Raleway', 'Arial', 'Helvetica', sans-serif;
}

En este caso, el navegador intentará utilizar “Raleway” primero, si no está disponible utilizará “Arial” y si tampoco está disponible “Helvetica” y si ninguna de las tres está disponible usará una fuente “sans-serif” genérica.

Fuentes de Google

Google Fonts es una biblioteca gratuita de fuentes web que puedes utilizar en tus proyectos CSS. Para utilizar una fuente de Google Fonts en tu sitio, primero debes seleccionar la fuente que deseas utilizar en la página de Google Fonts (https://fonts.google.com/) y luego seguir estos pasos:
Copia el enlace de la fuente o las fuentes que deseas utilizar, te lo proporciona Google Fonts una vez seleccionadas.
Incorpora el enlace en la sección <head> de tu archivo HTML:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

Utiliza la fuente en tu archivo CSS especificando la propiedad font-family:

body {
font-family: 'Open Sans', sans-serif;
}

Es importante mencionar que algunas de las fuentes de Google tienen distintos estilos, para utilizarlos debes especificarlos en el enlace que proporciona Google Fonts, por ejemplo:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">

Más ejemplos
Aquí te doy un ejemplo de cómo utilizar una fuente de Google Fonts en tu proyecto web:

<!DOCTYPE html>
<html>
<head>
<title>Mi sitio web</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style>
/* Utiliza la fuente Open Sans para el cuerpo del texto */
body {
font-family: 'Open Sans', sans-serif;
}
/* Utiliza la fuente Open Sans para los títulos */
h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un ejemplo de cómo utilizar una fuente de Google Fonts en tu proyecto.</p>
</body>
</html>

En este ejemplo, se utiliza la fuente “Open Sans” para el cuerpo del texto y los títulos. El enlace a la fuente se incluye en la sección <head> del archivo HTML y se especifica la propiedad font-family en la hoja de estilos CSS.
Ten en cuenta que debes seguir las políticas de uso de Google Fonts antes de utilizar las fuentes en un proyecto comercial.

CSS List

En CSS, las listas son elementos HTML que se utilizan para mostrar una serie de elementos relacionados. Los elementos de lista se pueden marcar con viñetas o números, y se pueden estilizar de diferentes maneras.
Existen dos tipos principales de listas en HTML: listas ordenadas (ol) y listas desordenadas (ul). Una lista ordenada utiliza números para marcar cada elemento de la lista, mientras que una lista desordenada utiliza viñetas.

La sintaxis para estilizar las listas en CSS es la siguiente:

elemento {
propiedad: valor;
}

Algunas propiedades comunes para estilizar listas son:
list-style-type para establecer el tipo de marcador (viñeta o número) para una lista.
list-style-image para establecer una imagen como marcador para una lista.
list-style-position para establecer la posición del marcador (dentro o fuera del contenido del elemento de lista).
«margin» y «padding» para establecer el espacio alrededor de los elementos de lista.

Tipos de marcador
La propiedad “list-style-type” en CSS se utiliza para establecer el tipo de marcador para los elementos de una lista. Es aplicable a los elementos “ul” (listas desordenadas) y “ol” (listas ordenadas).
Los valores posibles para «list-style-type» incluyen:
disc (marcador de disco, es el valor predeterminado para listas desordenadas)
circle (marcador de círculo)
square (marcador de cuadrado)
decimal (marcador numérico decimal, es el valor predeterminado para listas ordenadas)
decimal-leading-zero (marcador numérico con cero a la izquierda)
lower-roman (marcador numérico romano en minúsculas)
upper-roman (marcador numérico romano en mayúsculas)
lower-alpha (marcador alfanumérico en minúsculas)
upper-alpha (marcador alfanumérico en mayúsculas)
none (sin marcador)

Es importante tener en cuenta que algunos valores solo funcionan en navegadores específicos o solo están disponibles en versiones más recientes de los navegadores, por lo que es recomendable verificar la compatibilidad antes de utilizarlos en un proyecto.

Ejemplos

Aquí te dejo algunos ejemplos de la propiedad “list-style-type” en CSS con comentarios dentro del código:

/* Establecer marcador de disco para listas desordenadas */
ul {
list-style-type: disc;
}

/* Establecer marcador numérico decimal para listas ordenadas */
ol {
list-style-type: decimal;
}

/* Quitar marcador para todos los elementos de lista */
li {
list-style-type: none;
}

/* Establecer marcador de círculo para listas desordenadas */
ul {
list-style-type: circle;
}

/* Establecer marcador numérico con cero a la izquierda para listas ordenadas */
ol {
list-style-type: decimal-leading-zero;
}

/* Establecer marcador numérico romano en minúsculas para listas ordenadas */
ol {
list-style-type: lower-roman;
}

/* Establecer marcador alfanumérico en mayúsculas para listas ordenadas */
ol {
list-style-type: upper-alpha;
}

/* Establecer marcador de cuadrado para listas desordenadas */
ul {
list-style-type: square;
}

/* Establecer marcador numérico romano en mayúsculas para listas ordenadas */
ol {
list-style-type: upper-roman;
}

/* Establecer marcador alfanumérico en minúsculas para listas ordenadas */
ol {
list-style-type: lower-alpha;
}

/* Establecer marcador personalizado para listas desordenadas */
ul {
list-style-type: url(marcador-personalizado.svg);
}

En el último ejemplo se establece un marcador personalizado para las listas desordenadas usando una imagen en formato SVG.
Espero que estos ejemplos te ayuden a entender cómo utilizar la propiedad “list-style-type” en CSS.

Imagen como marcador
La propiedad “list-style-image” en CSS se utiliza para establecer una imagen personalizada como marcador para los elementos de una lista. Esta propiedad es aplicable a los elementos “ul” (listas desordenadas) y “ol” (listas ordenadas).
Aquí hay un ejemplo de cómo utilizar la propiedad “list-style-image” en CSS con una imagen local:

ul {
list-style-image: url('path/to/image.png');
}

En este ejemplo, se establece la imagen “image.png” como marcador para todas las listas desordenadas. La ruta especificada debe ser una ruta absoluta o relativa al archivo HTML donde se está usando.
Es importante tener en cuenta que algunos navegadores pueden tener problemas para mostrar imágenes como marcadores, especialmente si estas imágenes son grandes o están en un formato no soportado.
Si esto sucede, se recomienda utilizar un tamaño de imagen más pequeño o utilizar un formato de imagen soportado (como PNG o SVG). Además, también es importante asegurarse de que si se utiliza una imagen como marcador, esta se ha cargado antes de intentar utilizarla en el código CSS.
La propiedad “list-style-image” se puede utilizar junto con “list-style-type” para proporcionar un valor de fallback en caso de que no se pueda mostrar la imagen.

ul {
list-style-type: square;
list-style-image: url('path/to/image.png');
}

En este ejemplo, si el navegador no puede mostrar la imagen, se utilizará el tipo de marcador “square” como fallback.

Posición del marcador
La propiedad “list-style-position” en CSS se utiliza para especificar cómo se posiciona el marcador en relación con el contenido del elemento de lista. Esta propiedad es aplicable a los elementos “li” (elementos de lista).
Hay dos valores posibles para esta propiedad:
inside: el marcador se posiciona dentro del contenido del elemento de lista, lo que significa que el contenido se envuelve alrededor del marcador. Es decir, el marcador se encuentra dentro del área de contenido.
outside: el marcador se posiciona fuera del contenido del elemento de lista, lo que significa que el contenido se coloca después del marcador. Es decir, el marcador se encuentra fuera del área de contenido. Este es el valor predeterminado.

li {
list-style-position: inside;
}

En este ejemplo, se establece la posición del marcador dentro del contenido del elemento de lista para todos los elementos de lista.

li {
list-style-position: outside;
}

En este ejemplo, se establece la posición del marcador fuera del contenido del elemento de lista para todos los elementos de lista.
La propiedad “list-style-position” se puede utilizar junto con “list-style-type” y “list-style-image” para controlar la apariencia y posición de los marcadores de lista.

li {
list-style: square inside url('path/to/image.png');
}

En este ejemplo, se utiliza la propiedad abreviada “list-style” para establecer el tipo de marcador “square”, la posición “inside” y la imagen personalizada como marcador, todo en una sola línea de código.

Texto - SuperHispano

CSS Text

CSS Font

CSS Link

CSS List