TEXTO CSS

Color

La propiedad de color describe el color de primer plano del contenido de texto de un elemento.

[Sintaxis]

color: color keywords | color values

Ejemplo

El siguiente ejemplo especifica el mismo color:

[style.css]

p#key{ color: red; }
p#val{ color: #ff0000; }

[index.html] 

<p id="key">This is a paragraph(red)</p>
<p id="val">This is a paragraph(#ff0000)</p>

 

 

text-align

Esta propiedad describe cómo los contenidos en línea de un bloque están alineados horizontalmente.

[Sintaxis]

text-align: left | right | center | justify 

[style.css] 

p#le{ text-align: left; }
p#ri{ text-align: right; }
p#ce{ text-align: center; }
p#ju{ text-align: justify; }

[index.html] 

<p id="le">This is a paragraph(left)</p>
<p id="ri">This is a paragraph(right)</p>
<p id="ce">This is a paragraph(center)</p>
<p id="ju">This is a paragraph(justify)</p>

 

text-decoration

Esta propiedad describe decoraciones de líneas que se agregan al contenido de un elemento.

[Sintaxis]

text-decoration: none | underline | overline | line-through | blink

Ejemplo

[style.css]

p#no{ text-decoration: none; }
p#un{ text-decoration: underline; }
p#ov{ text-decoration: overline; }
p#th{ text-decoration: line-through; }
p#bl{ text-decoration: blink; }

[index.html] 

<p id="no">This is a paragraph(none)</p>
<p id="un">This is a paragraph(underline)</p>
<p id="ov">This is a paragraph(overline)</p>
<p id="th">This is a paragraph(line-through)</p>
<p id="bl">This is a paragraph(blink)</p>

 

text-indent

La propiedad de sangría de texto especifica la sangría aplicada a la primera línea de contenido en línea en un bloque.

[Sintaxis]

text-indent: length;

Ejemplo

[style.css]

p#ind{
  text-indent: 2em;
}

[index.html] 

<p>This is a paragraph(normal)</p>
<p id="ind">This is a paragraph(indent)</p>

 

Ver tambien  16 Text.

Reto

1. Establece el color del texto por defecto. A menudo se establece en "# 333333". Debido a que el carácter de negro azabache es difícil de leer en un fondo blanco en el monitor. "# 333333" significa el gris oscuro.

[style.css]

body{
  color: #333333;
}

2. Justifique la fecha en que las noticias se actualizaron a la derecha y cambie el color.

[style.css]

#main .date{
  color: #666666;
  text-align: right;
}

 

3. Justifica los derechos de autor del centro.

[style.css]

footer{
  text-align: center;
}

 

 Fuente: www.w3.org