Propiedades relacionadas al texto en CSS
¿ Qué es HTML? Estructura interna Salto de línea Párrafo Títulos Enfasis Hipervínculo a otra página Hipervínculo a otro sitio WEB Imágenes en una página Hipervínculo en una imagen Apertura de un hipervínculo en otra instancia del navegador Enlace a un correo Anclas en la misma página Anclas en la otra página Lista ordenada Lista no ordenada Lista de definiciones Listas anidadas Tablas Tabla con encabezado Tabla con título Combinación de celdas Titulo de la pagina Contenido de la cabecera Comentarios en una página Caracteres especiales Formulario form Formulario input Formulario texarea Formulario checkbox Formulario radio Formulario Select 1 Formulario Select 2 Formulario Select 3 Formulario Button Formulario Button 2 Formulario type= Formulario - input type= Formulario - agrupamiento de controles Formulario - controles con valores iniciales Formulario - orden de foco de controles Formulario - Inhabilitar controles Formulario - Text/password y maxlength Formulario - text/password/textarea y readonly Formulario - Envío de datos mediante mail Formulario - label Frames Actualización de un frame Frames - Medidas Frames - propiedades Frames - Anidamiento iframes Declaración DOCTYPE HTML Transitional DOCTYPE. HTML Estricto DOCTYPE. para Frames Validación de enlaces Conceptos hojas de estilo Texto en CSS Elementos div y span Fuentes con CSS Elementos obsoletos de html

Propiedades relacionadas al texto en CSS

Además de las propiedades relativas a la tipografía del texto, CSS define numerosas propiedades que determinan la apariencia del texto en su conjunto. Estas propiedades adicionales permiten controlar al alineación del texto, el interlineado, la separación entre palabras, etc

Vimos en la introducción de CSS la propiedad color. Tenemos otras propiedades relacionadas al texto que paso a enunciarlas:

  • text-align Esta propiedad define el alineamiento del texto y puede tomar alguno de estos cuatro valores: left, right, center,justify 
  • text-decoration Esta propiedad nos permite entre otras cosas que aparezca subrayado el texto, tachado o una línea en la parte superior, los valores posibles de esta propiedad son: none, underline, overline, line-through
  • letter-spacing Esta propiedad permiten indicar el espacio que debe haber entre los caracteres.
  • word-spacing La propiedad word-spacing permiten indicar el espacio que debe haber entre las palabras.
  • text-indent La propiedad indenta la primera linea de un texto. A partir de la segunda línea, el texto aparece sin indentación. Podemos indicar un valor negativo con lo que la indentación es hacia la izquierda.
  • text-transform la propiedad puede inicializarse con alguno de los siguientes valores: none - capitalize - lowercase - uppercase.
    Cada uno de estos valores transforman el texto como sigue:
    capitalize: Dispone en mayúsculas el primer caracter de cada palabra.
    lowercase: Convierte a minúsculas todas las letras del texto.
    uppercase: Convierte a mayúsculas todas las letras del texto.
    none: No provoca cambios en el texto.

Texto capitalizado dispone en mayúsculas el primer caracter de cada palabra.

lowercase: Convierte a minúsculas todas las letras del texto.

uppercase: Convierte a mayúsculas todas las letras del texto.

Confeccionaremos el siguiente ejemplo:
Confeccionar una página que contenga un título de nivel 2 (h2) centrado y luego bloques donde muestre un nombre de una persona subrayado y un párrafo con un color de fondo y de las letras. Indentar la primer linea de cada párrafo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>título página</title>
</head>
<body>
<h2 style="color:#0000ff;text-align:center">Comentarios</h1>
<h3 style="text-decoration:underline">Luis Lopez</h3>
<p style="color:#888888;background-color:#ffffdd;text-indent:20px">
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
</p>
<h3 style="text-decoration:underline">Ana Rodriguez</h3>
<p style="color:#888888;background-color:#ffffdd;text-indent:20px">
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
</p>
</body>
</html>

El código anterior en el navegador se vera los siguiente:

El título general aparece centrado y de color azul:

<h2 style="color:#0000ff;text-align:center">Comentarios</h1>

El título donde se define el nombre:

<h3 style="text-decoration:underline">Luis Barrionuevo</h3>

aparece subrayado.

Por último los párrafos:

<p style="color:#888888;background-color:#ffffdd;text-indent:20px">

aparecen de color gris oscuro la letra sobre fondo amarillo claro y la primer línea tiene una indentación de 20 píxeles.