Definir el sentido de la escritura. Indica la dirección en la que se muestra el texto y su valor también lo utilizan otras propiedades CSS.

Sugerencia: utilice esta propiedad junto con la propiedad unicode-bidi para establecer o devolver si el texto debe reemplazarse para admitir varios idiomas en el mismo documento.

Sintaxis: direction: ltr | rtl | initial | inherit;

Valores de propiedad:

• ltr - La dirección de escritura es de izquierda a derecha. Esto es el predeterminado.
• rtl - La dirección de escritura es de derecha a izquierda.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Es la forma comprimida en la cual podemos definir todos los valores de las fuentes de una sola vez. Esta propiedad se aplica a todos los elementos.

Sintaxis: selector { font : valor1 valor2 valor_n }

Nota: debemos dejar un espacio en blanco entre los valores.

Existen tres opciones diferentes para establecer el valor o valores de esta propiedad:

1. Opcionalmente, uno, dos o tres de los siguientes valores y en cualquier orden: font-style | font-variant | font-weight
2. Obligatoriamente seguido por: font-size | line-height | font-family
3. Uno y sólo uno de los siguientes valores: caption | icon | menu | message-box | small-caption | status-bar

Los dos únicos valores que se deben incluir obligatoriamente al utilizar la propiedad font son el tamaño y el tipo de letra.

font: 1.5em Arial, Helvetica, sans-serif;

Si se omite el tamaño o el tipo de letra o si se intercambia su posición, la declaración de la propiedad font es incorrecta y se ignora su valor:

font: 1.5em;             // Incorrecto: falta el tipo de letra
font: sans-serif;        // Incorrecto: falta el tamaño de letra
font: sans-serif 1.5em;  // Incorrecto: primero se indica el tamaño

La propiedad font también permite indicar de forma opcional el interlineado (propiedad line-height) justo después del tamaño de letra y separado por una barra inclinada ( / ):

font: 1.5em/2 Arial, Helvetica, sans-serif;
font: 13pt/1.5em Arial, Helvetica, sans-serif;

El resto de propiedades tipográficas también son opcionales y se pueden indicar alguna o todas a la vez y en cualquier orden, pero siempre antes que el tamaño de letra:

font: italic 1.5em sans-serif;
font: small-caps 1.5em sans-serif;
font: bold 1.5em sans-serif;
font: 700 small-caps 1.5em sans-serif;
font: small-caps oblique bolder 1.5em sans-serif;
font: oblique 200 1.5em sans-serif;
font: normal italic 1.5em sans-serif;

Establece la fuente o tipo de letra. Es recomendable usar un tipo de fuente común, que todos los navegadores reconozcan (ej.:Arial, Verdana, Helvetica, sans serif, etc.).

La propiedad font-family establece la fuente o tipo de letra con la que se muestra el texto. Cuando no se establece de forma explícita el tipo de letra, los navegadores muestran el texto con un tipo de letra por defecto. Aunque la fuente por defecto depende de cada navegador, la mayoría utilizan Times New Roman o la fuente disponible que más se parezca.

Si el nombre de la fuente incluye espacios en blanco, comas, barras, paréntesis y otros caracteres potencialmente problemáticos, el estándar de CSS 2.1 indica que se debe encerrar su nombre entre comillas simples o dobles.

Nota: debemos utilizar comas entre los valores.

Hay dos tipos de nombres de familia de fuentes:

• Family-name - El nombre de una familia de fuentes, como "times", "courier", "arial", etc.
• Generic-family - El nombre de una familia genérica, como "serif", "sans-serif", "cursive", "fantasía", "monospace".

Comience con la fuente que desea, y siempre termina con una familia genérica, para que el navegador escoga una fuente similar en la familia genérica, si no hay otras fuentes disponibles.

Sintaxis: font-family :  family-name | generic-family | initial | inherit;

La propiedad font-size permite establecer el tamaño de letra del texto. Además de todas las unidades de medida absolutas y relativas conocidas (em, ex, px, %, in, cm, mm, pt, pc) también se pueden utilizar palabras clave que hacen referencia a tamaños de letra absolutos y relativos.

Los tamaños de letra absolutos se establecen mediante las palabras clave xx-small, x-small, small, medium, large, x-large, xx-large. Aunque depende de cada navegador decidir el tamaño de las palabras clave, normalmente coinciden con los tamaños de los títulos de sección <h1> a <h6>.

Además de los tamaños absolutos, la propiedad font-size permite establecer el tamaño del texto de forma relativa mediante las palabras clave larger y smaller. La referencia que se toma para calcular un tamaño más grande (larger) o más pequeño (smaller) es el tamaño de letra del elemento contenedor.

Sintaxis: font-size : medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | longitud | initial | inherit;

Valores de propiedad:

• medium - Establece el tamaño de fuente a un tamaño medio. Esto es el predeterminado.
• xx-small - Establece el tamaño de fuente a un xx tamaño pequeño.
• x-small - Establece el tamaño de fuente a un tamaño extra pequeño.
• small - Establece el tamaño de fuente a un tamaño pequeño.
• large - Establece el tamaño de fuente a un tamaño grande.
• x-large - Establece el tamaño de fuente a un tamaño extra grande.
• xx-large - Establece el tamaño de fuente a un xx tamaño grande
• smaller - Establece el tamaño de fuente a un tamaño menor que el elemento principal.
• larger - Establece el tamaño de fuente a un tamaño mayor que el elemento primario.
• longitud - Establece el tamaño de fuente a un tamaño fijo en px, cm, etc.
• % - Establece el tamaño de fuente a un porcentaje del tamaño de fuente del elemento principal.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Establece el estilo del tipo de letra. Uno y sólo uno de los siguientes valores: normal, oblicuo o italic.

Sintaxis: font-style: normal | italic | oblique | initial | inherit;

Valores de propiedad

• normal - El navegador muestra un estilo de fuente normal. Esto es el predeterminado.
• italic - El navegador muestra un estilo de fuente en cursiva.
• oblique - El navegador muestra un estilo de fuente oblicuo.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Una variación que se le puede dar a las fuentes es el de usar pequeñas mayúsculas. La variante versalita (small-caps) muestra el texto con letras mayúsculas de un tamaño similar a las letras minúsculas.

Sintaxis: selector { font-variant : valor }

Posibles valores: normal | small-caps | inherit

• normal - El navegador muestra una fuente normal. Esto es el predeterminado.
• small-caps - El navegador muestra una fuente de caracteres pequeños.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Una característica muy útil es el control de la intensidad de las fuentes.

La propiedad font-weight es una de las propiedades más infrautilizadas de CSS. Las limitaciones de los navegadores y de las fuentes que utilizan los usuarios normales, impiden un correcto funcionamiento más allá de los valores normal y bold.

Sintaxis: selector { font-weight : valor }

Posibles valores: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit;

• normal - Define los caracteres normales. Esto es el predeterminado.
• bold - Define los caracteres gruesos.
• bolder - Define caracteres más gruesos.
• lighter - Define los caracteres más claros.
• 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 - Define los caracteres delgados a gruesos. 400 es la misma que la normal, y 700 es la misma que negrita.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Aumenta o reduce el espacio entre los caracteres de un texto.

El valor normal indica que el navegador se encarga de determinar la separación óptima entre las letras del texto. Esta separación se hace más evidente cuando se justifica el texto con la propiedad text-align.

Si se indica una medida, se considera que es el espaciado adicional que se añade a la separación normal de cada letra.

Si se utilizan medidas, también es posible indicar valores negativos, de forma que la separación entre letras sea inferior a la normal.

La propiedad letter-spacing se aplica normalmente en los titulares de sección o en zonas cortas de texto para conseguir efectos gráficos avanzados.

Para controlar la separación entre palabras, CSS 2.1 dispone de la propiedad word-spacing.

Sintaxis: letter-spacing: normal | longitud | initial | inherit;

Valores de propiedad:

• normal - No hay espacio extra entre los caracteres. Esto es el predeterminado.
• longitud - Define un espacio extra entre los caracteres (se permiten valores negativos).
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Declare una separación entre líneas o interlineado. Especifica la altura de la línea.

Nota: No se permiten valores negativos.

Si se utilizan porcentajes, hace referencia al tamaño de letra del propio elemento.

Si el valor de line-height es mayor que el tamaño de letra del texto, los navegadores añaden un espacio de separación del mismo tamaño por encima y por debajo del texto. En los elementos de bloque, la propiedad line-height indica la altura mínima de sus contenidos de texto. En los elementos en línea, line-height indica directamente la altura de la caja que forma ese elemento (salvo las imágenes, cuya altura se determina mediante la propiedad height).

Sintaxis: line-height: normal | número | longitud | initial | inherit;

Posibles valores:

• normal - Una altura de línea normal. Esto es el predeterminado.
• número - Un número que se multiplicará con el tamaño de fuente actual para establecer la altura de la línea.
• longitud - Una altura de línea fija en px, pt, cm, etc.
• % - Una altura de línea en porcentaje del tamaño de fuente actual.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Especifica si el navegador puede o no romper líneas dentro de palabras para evitar el desbordamiento (cuando una cadena es demasiado larga para encajar su cuadro de contenido).

Posibles valores:

• normal - Indica que las líneas sólo pueden romperse en puntos de ruptura de palabras normales.
• break-word - Indica que las palabras normalmente irrompibles pueden romperse en puntos arbitrarios si no hay puntos de interrupción aceptables en la línea.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Especifica la alineación horizontal del texto en un elemento. Se utiliza para alinear un texto a la derecha, izquierda o centro del bloque que lo contiene.

Sintaxis: Selector { text-align : valor }

Valores de propiedad:

• left - Alinea el texto a la izquierda.
• right - Alinea el texto a la derecha.
• center - Centra el texto.
• justify - Estira las líneas para que cada línea tenga el mismo ancho (como en periódicos y revistas).
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

La propiedad text-align-last especifica cómo alinear la última línea de un texto.

La propiedad text-align-last sólo funcionará para elementos con la propiedad text-align definida como "justify".

Sintaxis: text-align-last: auto | left | right | center | justify | start | end | initial | inherit;

Valores de propiedad:

• auto - Valor por defecto. La última línea está justificada y alineada a la izquierda.
• left - La última línea está alineada a la izquierda.
• right - La última línea está alineada a la derecha.
• center - La última línea está alineada en el centro.
• justify - La última línea se justifica como el resto de las líneas.
• start - La última línea está alineada al principio de la línea (izquierda si la dirección del texto es de izquierda a derecha y derecha si la dirección del texto es de derecha a izquierda).
• end - La última línea está alineada al final de la línea (a la derecha si la dirección del texto es de izquierda a derecha y a la izquierda si la dirección del texto es de derecha a izquierda).
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Se utiliza para subrayar, tachar, remarcar con una línea superior o parpadear un texto.

Especifica la apariencia de líneas decorativas utilizadas en el texto. Es una forma rápida para establecer uno o más valores text-decoration individuales en una sola declaración, que incluyen , y .text-decoration text-decoration-line text-decoration-color text-decoration-style

Sintaxis: text-decoration: none | underline | overline | line-through | initial | inherit;

Valores de propiedad:

• none - Define un texto normal. Esto es el predeterminado.
• underline - Define una línea debajo del texto.
• overline - Define una línea sobre el texto.
• line-through - Define una línea a través del texto.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

La propiedad text-decoration-color especifica el color de text-decoration (subrayados, overlines, linethroughs).

Nota: La propiedad text-decoration-color sólo tendrá un efecto en los elementos con una decoración de texto visible.

Sintaxis: text-decoration-color: color | initial | inherit;

Valores de propiedad:

• color - Especifica el color de la decoración de texto.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

La propiedad text-decoration-line especifica qué tipo de línea, si existe, tendrá la decoración.

Nota: También puede combinar más de un valor, como subrayado y superposición para mostrar líneas tanto debajo como sobre el texto.

Sintaxis: text-decoration-line: none | underline | overline | line-through | initial | inherit;

Valores de propiedad:

• none - Valor por defecto. Especifica ninguna línea para la decoración de texto.
• underline - Especifica que se mostrará una línea bajo el texto.
• overline - Especifica que se mostrará una línea sobre el texto.
• line-through - Especifica que se mostrará una línea a través del texto.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

La propiedad text-decoration-style especifica cómo se mostrará la línea, si la hay.

Sintaxis: text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

Valores de propiedad:

• solid - Valor por defecto. La línea se mostrará como una sola línea.
• double - La línea se mostrará como una línea doble.
• dotted - La línea se mostrará como una línea punteada.
• dashed - La línea se mostrará como una línea discontinua.
• wavy - La línea se mostrará como una línea ondulada.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Especifica la sangría de la primera línea en un bloque de texto. Se permiten valores negativos, la primera línea se sangrará a la izquierda si el valor es negativo.

Sintaxis: text-indent: longitud | initial | inherit;

Valores de propiedad:

• longitud - Define una sangría fija en px, pt, cm, em, etc. El valor predeterminado es 0.
• % - Define la sangría en % del ancho del elemento primario.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

La propiedad text-shadow agrega sombra al texto.

Esta propiedad acepta una lista separada por comas de sombras que se aplicarán al texto.

Sintaxis: text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;

Valores de propiedad:

• h-shadow - Necesario. La posición de la sombra horizontal. Se permiten valores negativos.
• v-shadow - Necesario. La posición de la sombra vertical. Se permiten valores negativos.
• blur-radius - Opcional. El radio de desenfoque. El valor predeterminado es 0.
• color - Opcional. El color de la sombra. Consulte los valores de color CSS para obtener una lista completa de posibles valores de color.
• none - Valor por defecto. Sin sombra.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Se utiliza para convertir un texto a mayúsculas o minúsculas.

Sintaxis: text-transform: none | capitalize | uppercase | lowercase | initial | inherit;

Valores de propiedad:

• none - Sin mayúsculas. El texto se vuelve como está. Esto es el predeterminado.
• capitalize - Transforma el primer carácter de cada palabra en mayúscula.
• uppercase - Transforma todos los caracteres en mayúsculas.
• lowercase - Transforma todos los caracteres en minúsculas.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Especifica si se puede seleccionar el texto de un elemento.

Si hace doble clic en algún texto, será seleccionado / resaltado. Esta propiedad se puede utilizar para evitar esto.

Sintaxis: user-select: auto | none | text | all;

Valores de propiedad:

• auto - Defecto. El texto se puede seleccionar si el navegador lo permite.
• none - Evitar la selección de texto.
• text - El texto puede ser seleccionado por el usuario.
• all - La selección de texto se realiza con un solo clic en lugar de un doble clic.

Aumenta o disminuye el espacio entre palabras en un texto. Se permiten valores negativos.

Si el texto está justificado, el navegador puede ignorar o aplicar parcialmente el valor establecido en la propiedad word-spacing. El aspecto del texto varía en cada navegador.

Sintaxis: word-spacing: normal | longitud | initial | inherit;

Valores de propiedad:

• normal - Define el espacio normal entre las palabras (0.25em). Esto es el predeterminado.
• longitud - Define un espacio adicional entre las palabras (en px, pt, cm, em, etc). Se permiten valores negativos.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Permite que las palabras largas puedan romperse y envolverse en la siguiente línea.

Sintaxis: word-wrap: normal | break-word | initial | inherit;

Valores de propiedad:

• normal - Romper palabras sólo en los puntos de interrupción permitidos.
• break-word - Permite romper las palabras irrompibles.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.