Texto CSS

text-color

La propiedad text-color se utiliza para colorear texto.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
h2 {  
 color: rgb(53, 145, 53);    
} 
p {  
 color: blue;    
} 
</style> 
</head>
        
<body>
 <h2>Hola Mundo</h2>
 <p>Este texto tiene color azul </hp>
</body>
</html>
Resultado:

Hola Mundo

Este texto tiene color azul


text-align

La propiedad text-align se usa para alinear el texto en el centro, a la izquierda o a la derecha.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
h2 {  
 color: rgb(53, 145, 53);
 text-align: center;
    
} 
</style> 
</head>
        
<body>
 <h2>Hola Mundo</h2>
</body>
</html>
Resultado:

Hola Mundo


text-decoration

La propiedad text-decoration se usa para añadir decoración al texto.

También tiene la opción de eliminar la decoración de un texto usando la propiedad "text-decoration: none;"

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
h1 {  
 text-decoration: overline;    
} 
h2 {  
 text-decoration: line-through;    
} 
h3  {  
 text-decoration: underline;    
} 
</style> 
</head>
        
<body>
 <h1>Titulo 1</h1>
 <h2>Titulo 2</h2>
 <h3>Titulo 3</h3>
</body>
</html>
Resultado:

Titulo 1

Titulo 2

Titulo 3


text-transform

La propiedad text-transform se usa para añadir mayúscula, minúscula, o para ser un texto en mayúscula.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
h1 {  
 text-transform: uppercase;    
} 
h2 {  
 text-transform: lowercase;    
} 
h3  {  
 text-transform: capitalize;    
} 
</style> 
</head>
        
<body>
 <h1>Texto en mayúscula</h1>
 <h2>Texto en minúscula</h2>
 <h3>Texto mayúscula</h3>
</body>
</html>
Resultado:

Texto en mayúscula

Texto en minúscula

Texto mayúscula


letter-spacing

La propiedad letter-spacing se utiliza para aumentar o disminuir espacio entre las palabras.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
h3 {  
 letter-spacing: 4px;    
} 
p {  
 letter-spacing: -2px;    
} 
</style> 
</head>
        
<body>
 <h3>Aumente el espacio de las palabras en este titulo</h3>
 <p>Disminuyo el espacio de las palabras en este párrafo</p>
</body>
</html>
Resultado:

Aumente el espacio de las palabras en este titulo

Disminuyo el espacio de las palabras en este párrafo