CSS prÃ¡ctico

Indentaciï¿½n de la primera lï¿½nea de un pï¿½rrafo. Es una propiedad que se aplica a elementos de tipo bloque, y acepta tanto un valor de longitud, como un porcentaje:

P {text-indent: 0.25in;}

Podemos conseguir una sangrï¿½a francesa, utilizando valores negativos para la indentaciï¿½n:

P {text-indent: -30px;}

Ejemplo 2. Indentaciï¿½n

<html>
  <head>
    <title>Propiedades del texto</title>
    <style>
      p.indentacion { text-indent: 0.25in; }
      p.indentacion_francesa { margin-left: 0.25in; text-indent: -0.25in; }

      p.indentacion:first-letter, p.indentacion_francesa:first-letter {
        font-size: 24pt;
        background-color: magenta;
        color: white;
        padding: 5px;
        border: 1px solid navy;
      }
    </style>
  </head>

  <body>
    <p class="indentacion">
      Texto de ejemplo sobre los valores de la indentaciï¿½n.
      Texto de ejemplo sobre los valores de la indentaciï¿½n.
    </p>

    <p class="indentacion_francesa">
      Texto de ejemplo sobre los valores de la indentaciï¿½n.
      Texto de ejemplo sobre los valores de la indentaciï¿½n.
    </p>
  </body>
</html>

ï¿½Alineaciï¿½n

Nos permite alinear los textos dentro de elementos de bloque de las siguientes formas:

Izquierda (left).
Centrado (center).
Derecha (right).
Justificado (justify), es decir, centrado a derecha e izquierda.

Podemos utilizar el valor de "text-align: center" para reemplazar al tag CENTER que ahora es DEPRECATED:

Ejemplo 3. Alineaciï¿½n

<html>
  <head>
    <title>Propiedades del texto</title>
    <style>
      h1 { text-align: left; }
      h2 { text-align: right; }
      h3 { text-align: center; }
    </style>
  </head>

  <body>
    <h1>Alineaciï¿½n izquierda</h1>
    <h2>Alineaciï¿½n derecha</h2>
    <h3>Alineaciï¿½n centrada</h3>
  </body>
</html>

ï¿½Espacios en blanco

Se define mediante la propiedad "white-space", la cual puede tomar los siguientes valores:

pre. Cuando queremos que se tome literalemente los escrito, incluyendo todos y cada uno de los espacios en blanco.
nowrap. Permite que se conserve todo el texto definido sin aplicar ningï¿½n salto de lï¿½nea forzado por algï¿½n elemento del documento. Es el sustituto del tï¿½pico <TD nowrap>.
normal. Valor por defecto para la definiciï¿½n de espacios en blanco, la cual no aplica ninguna consideraciï¿½n especial sobre el texto.

Ejemplo 4. Espacios en blanco

<html>
  <head>
    <title>Propiedades del texto</title>
    <style>
      p { width: 300px; }

      p.libre { white-space: pre; }
      p.sinsaltos { white-space: nowrap; }
      p.normal { white-space: normal; }
    </style>
  </head>

  <body>
    <p class="libre">
      Texto con distintas representacion de espacios
      en blanco para ver su comportamiento.
    </p>
    <p class="sinsaltos">
      Texto con distintas representacion de espacios
      en blanco para ver su comportamiento.
    </p>
    <p class="normal">
      Texto con distintas representacion de espacios
      en blanco para ver su comportamiento.
    </p>
  </body>
</html>

ï¿½Anchura de lï¿½neas

Define la distancia entre las lï¿½neas base de dos lï¿½neas de texto. En resumen, esta propiedad permite aumentar o disminuir la distancia vertical entre dos lï¿½neas de texto. Esta distancia pude expresarse con medidas relativa (em, ex), valores absolutos (cm, in, px) o porcentajes directamente.

<html>
  <head>
    <title>Propiedades del texto</title>
    <style>
      p { width: 300px; }

      p.normal { line-height: 14pt; }
      p.grande { line-height: 150%; }
      p.xgrande { line-height: 200%; }
    </style>
  </head>

  <body>
    <p class="normal">
      Texto con distintas medidas entre lï¿½neas para ver
      su comportamiento en pï¿½rrafos de texto.
    </p>
<p class="grande">
Texto con distintas medidas entre lï¿½neas para ver
su comportamiento en pï¿½rrafos de texto.
</p>
<p class="xgrande">
Texto con distintas medidas entre lï¿½neas para ver
su comportamiento en pï¿½rrafos de texto.
</p>
</body>
</html>