Objetivos

El formato de texto con CSS se aplica a muchos tipos de texto. Los estilos de los caracteres permiten personalizar las fuentes tipográficas y su tamaño; los estilos para el texto aplican, entre otras cosas, colores y decoraciones, y, por último, los estilos para los contenedores se aplican directamente, por ejemplo, a las listas, las citas o los formularios.

Los estilos para los caracteres

1. Las fuentes genéricas

Antes de elegir una fuente específica, conviene plantearse la siguiente pregunta: «¿Está esta fuente instalada en el ordenador del visitante del sitio?». Si existe la más mínima duda, entonces debe utilizarse una fuente «genérica» cuya presencia esté prácticamente asegurada en todos los ordenadores del mundo.

Existen tres familias genéricas comunes que se instalan en la mayoría de las plataformas:

La familia de fuentes de ancho fijo, con las fuentes Courier New en Windows, Courier en macOS y Monospace en Linux.
La familia de fuentes con serifas, con las fuentes Times en Windows, Times New Roman en macOS y Serif en Linux.
La familia de fuentes sin serifas, con las fuentes Arial en Windows, Helvetica en macOS y sans-serif en Linux.

Además de estas tres familias históricas, existen dos tipos de letra especialmente creados para la Web: Verdana (sin serifas) y Gorgia (con serifas).

Para declarar una fuente genérica, se debe usar la propiedad font-family en una regla CSS. He aquí un ejemplo sencillo:

<!doctype html>   
<html lang="es">   
<head>   
<meta charset="UTF-8">   
<title>Título de la página</title>   
<style>   
  p.sin-serifa {   
    font-family: verdana, arial, helvetica, sans-serif;   
  }   
  p.con-serifa {   
    font-family: georgia, times, "times new roman", serif;   
  }   
  p.ancho-fijo {   
    font-family: "courier new", courier, monospace;   
  }   
</style>   
</head>   
<body>   
<p class="sin-serifa">Cum sociis natoque penatibus et magnis   
dis parturient montes, nascetur ridiculus mus.</p>   
<p class="con-serifa">Vivamus sagittis lacus vel augue laoreet   
rutrum faucibus dolor auctor.</p>   
<p class="ancho-fijo">Cras mattis consectetur purus sit amet...

Los estilos para el texto

Todas las propiedades que se describen a continuación pueden aplicarse tanto a elementos HTML en línea, como los enlaces <a>, las divisiones <span>… como a elementos de tipo bloque, como los párrafos <p>, los títulos <hx>, las citas <blockquote>… También se pueden aplicar a textos, tablas, formularios, etc.

1. Los colores

La propiedad color se utiliza para cambiar el color del texto. Puede consultar el capítulo Las hojas de estilo, en la sección Las notaciones de los colores, para revisar las notaciones que se pueden usar para los colores.

En este muy sencillo ejemplo, se aplican dos colores, con dos notaciones diferentes, a dos elementos <span>:

<!doctype html>    
<html lang="es">   
<head>   
<meta charset="UTF-8">   
<title>Título de la página</title>   
<style>   
  .azul {   
    color: blue;   
  }   
  .azul-oscuro {   
    color: rgb(10,21,252);   
  }   
</style>   
</head>   
<body>   
<p>Aenean lacinia <span class="azul">bibendum nulla</span> sed  
consectetur. Curabitur <span class="azul-oscuro">blandit tempus</span> 
porttitor.</p>   
</body>   
</html>

2. Las líneas decorativas

Las líneas decorativas permiten aplicar una línea por encima, por debajo o a través del texto, y es posible añadirles un color y un tipo. Estas son las tres propiedades que se deben utilizar:

text-decoration-line para establecer la posición de la línea. Los valores posibles son: none, underline, overline, line-through, underline overline y underline line-through.
text-decoration-color para elegir el color de la línea.
text-decoration-style para aplicar un tipo de línea (punteada, doble, etc.). Estos son los valores utilizables: solid, double, dotted, dashed y wavy.

Es posible utilizar la sintaxis abreviada: text-decoration. Los valores deben especificarse en este orden:...

Los estilos para las listas

1. Las enumeraciones

Las listas con viñetas se insertan con el elemento <ul> y las listas numeradas, con <ol>. Cada ítem de estas dos listas se agrega con un elemento <li>. Las listas de definiciones se utilizan con los elementos <dt> y <dd>. A todos estos elementos se les pueden aplicar perfectamente los estilos CSS de texto ya vistos.

El símbolo que aparece delante de cada ítem en una lista numerada o con viñetas puede definirse con la propiedad list-style-type.

Para las listas con viñetas, estos son los valores utilizables:

disc: círculo negro y sólido; es el valor predeterminado.
circle: círculo hueco, blanco en su centro.
square: cuadrado negro y sólido.

Para las listas numeradas, estos son los principales valores utilizables:

decimal: dígitos enteros; es el valor predeterminado.
decimal-leading-zero: dígitos enteros, pero con un 0 como prefijo.
lower-roman: números romanos en minúsculas.
upper-roman: números romanos en mayúsculas.
lower-alpha o lower-latin: letras minúsculas.
upper-alpha o upper-latin: letras mayúsculas.

He aquí un ejemplo sencillo:

<!doctype html>   
<html lang="es">   
<head>   
<meta charset="UTF-8">   
<title>Título de la página</title>   
<style>   
  .lista-circulo {   
    list-style-type: circle;   ...

Los estilos para las tablas

1. El borde de la tabla

Es posible aplicar bordes a las tablas y a las celdas de las tablas. En el siguiente ejemplo, el primer paso consiste en añadir un borde a la tabla. Este borde se colocará únicamente en el contorno exterior de la tabla.

He aquí el código HTML de la tabla utilizada:

<!doctype html>   
<html>   
<head>   
<meta charset="utf-8">   
<title>Mi página web</title>   
<style>   
  #resultados {   
    border: 1px solid #333;   
  }   
</style>   
</head>   
<body>   
<table id="resultados">   
  <caption>Resultados 2025</caption>   
  <tr>   
    <th>Enero</th>   
    <th>Febrero</th>   
    <th>Marzo</th>   
  </tr>   
  <tr>   
 ...

Los estilos para los formularios

1. Los estados activo e inactivo de los objetos

Debe recordarse que las pseudoclases :enabled, :disabled y :checked permiten especificar los estados de los objetos en los formularios. Se pueden usar en reglas CSS para dar formato a los objetos de formulario en función de su estado.

He aquí el formulario utilizado:

<form id="formulario" method="#" action="#">   
  <p>   
    <label for="nombre">Su nombre: </label>   
    <input type="text" id="nombre">   
  </p>   
  <p>   
    <label for="edad">Su edad: </label>   
    <input type="text" id="edad" disabled>   
  </p>   
  <p>   
    <input type="radio" name="sexo" id="hombre" value="hombre">   
    <label for="hombre">Hombre</label>   
    <br>   
    <input type="radio" name="sexo" id="mujer" value="mujer">   
    <label for="mujer">Mujer</label>   
  </p>   
  <p>   
    <input type="checkbox" id="conforme" />   
    <label for="conforme">Estoy de acuerdo con las normas</label>  
  </p>   
</form>

La estructura de este formulario es la siguiente:

Un campo de entrada Su nombre que está...

Los estilos para las columnas

1. Las columnas de texto

El módulo CSS Multi-column Layout Module Level 1 (https://www.w3.org/TR/css-multicol-1/) permite crear columnas de texto que hacen que el contenido fluya de una columna a otra en función del ancho disponible en pantalla. Se pueden aplicar columnas a cualquier tipo de contenedor: <body>, <div>, <article>...

2. La configuración de las columnas

En este ejemplo, se utiliza una caja simple <div> que contendrá dos columnas, un medianil y una línea vertical divisoria. En esta caja <div>, se incluirán dos párrafos de texto.

He aquí el código para este ejemplo:

<!doctype html>   
<html lang="es">   
 <head>   
  <meta charset="UTF-8">   
  <title>Mi página web</title>   
  <style>   
   .miCol {   
    column-count: 2;   
    column-gap: 1em;   
    column-rule: thin solid black;   
    border: thin solid black;   
   }   
   ...