Color de texto
La propiedad color se usa para establecer el color del texto, los valores se pueden especificar mediante:
- Un nombre de color reconocido por CSS (red, blue, tomato, etc).
- Un valor Hexadecimal (#FF0000).
- Un valor RGB como rgb(255,0,0).
Input:
h2 {
text-align: center;
text-transform: uppercase;
color: salmon;
background-color: lightblue;
}
p {
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
a {
text-decoration: none;
color: salmon;
}
Output:
formato de texto
Este texto tiene estilo con algunas de las propiedades de formato de texto. El encabezado utiliza las propiedades text-align, text-transform, color y background-color. El párrafo tiene sangría y alineación, y se especifica el espacio entre caracteres. Se ha eliminado el subrayado de este vínculo "Pruébelo usted mismo" en color.
Text align
La propiedad text-align establece la alineación de un texto puede estar alineado a la izquierda, a la derecha, al centro o ser justificado.
Input:
p {
text-align: center;
}
p {
text-align: right;
}
p {
text-align: left;
}
p {
text-align: justify;
border: 1px solid gray;
}
Output:
Texto alineado al centro
Texto alineado a la derecha
Texto alineado al izquierda
Soy un texto que se encuentra justificado, cada línea se estira para que ocupe el mismo ancho y así poder alcanzar los márgenes del contenedor.
text-align-last
Esta propiedad especifica cómo alinear la útlima línea de un texto.
Input:
.p1 {
text-align-last: right;
}
.p2 {
text-align-last: center;
}
.p3 {
text-align-last: justify;
}
Output:
text-align-last: right
Los meta-datos contenidos dentro de atributos pueden ser inspeccionados con Reflection APIs. Puedes pensar en los Atributos de PHP como un lenguaje de configuración incrustado directamente en el código.
text-align-last: center
Los meta-datos contenidos dentro de atributos pueden ser inspeccionados con Reflection APIs. Puedes pensar en los Atributos de PHP como un lenguaje de configuración incrustado directamente en el código.
text-align-last: justify
Los meta-datos contenidos dentro de atributos pueden ser inspeccionados con Reflection APIs. Puedes pensar en los Atributos de PHP como un lenguaje de configuración incrustado directamente en el código.
text-direction
Para cambiar la dirección del texto de un elemento, podemos usar las propiedades direction y unicode-bidi.
Input:
.p1 {
direction: rtl;
unicode-bidi: bidi-override;
}
Output:
Este es un texto con una dirección por defecto.
Esta es una dirección de texto de derecha a izquierda.
vertical-align
La propiedad vertical-align establece la alineación vertical de un elemento HTML.
Input:
.img1 {
vertical-align: baseline;
}
.img2 {
vertical-align: text-top;
}
.img3 {
vertical-align: text-bottom;
}
.img4 {
vertical-align: sub;
}
.img5 {
vertical-align: super;
}
Output:
vertical-align: baseline
Una 
imagen con una alineación predeterminada.
vertical-align: text-top
Una imagen con una alineación de texto en la parte superior.
vertical-align: text-bottom
Una imagen con una alineación de texto en la parte inferior.
vertical-align: sub
Una imagen con una sub-alineación.
vertical-align: super
Una imagen con una super alineación.
text-decoration
La propiedad text-decoration-line agrega una línea de decoración al texto. Puede realiza una serie de combinaciones con los valores de dicha propiedad.
Nota: No se recomienda subrayar texto que no sea un enlace, ya que esto suele confundir al lector.
Input:
h3 {
text-decoration: overline;
}
p {
text-decoration: line-through;
}
p {
text-decoration: underline;
}
p {
text-decoration: overline underline;
}
Output:
Decoración de texto con líneas superpuestas
Decoración de texto trazado.
Decoración de texto subrayado
Decoración de texto subrayado y superpuesto.
text-decoration-color
La propiedad text-decoration-color es usado para establecer el color de línea.
Input:
h3 {
text-decoration-color: pink;
text-decoration: overline;
}
.p1 {
text-decoration-color: tomato;
text-decoration: line-through;
}
.p2 {
text-decoration-color: lightblue;
text-decoration: underline;
}
.p3 {
text-decoration-color: tomato;
text-decoration: overline underline;
}
Output:
Decoración de texto con líneas superpuestas
Decoración de texto trazado.
Decoración de texto subrayado
Decoración de texto subrayado y superpuesto.
text-decoration-style
La propiedad text-decoration-style se usa para establecer el estilo de la línea de decoración.
Input:
h3.style1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h3.style2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3.style3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
h3.style4 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
h3.style5 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
h3.style6 {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: tomato;
}
Output:
Primer encabezado
Segundo encabezado
Tercer encabezado
Cuarto encabezado
Quinto encabezado
Sexto encabezado
text-decoration-thickness
La propiedad text-decoration-thickness se usa para establecer el grosor de la línea decorativa.
Input:
p.style1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
p.style2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
p.style3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p.style4 {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
Output:
Texto con línea decorativa por defecto
Texto con línea decorativa de 5px de grosor.
Texto con línea decorativa de 25% de grosor.
Texto con línea decorativa de 5px de grosor y estilo doble.
text-decoration shorthand
text-decoration es una propiedad abreviada que encapsula los siguientes atributos:
text-decoration-line(requerido)text-decoration-color(opcional)text-decoration-style(opcional)text-decoration-thickness(opcional)
Input:
h3.style1 {
text-decoration: underline;
}
h3.style2 {
text-decoration: underline tomato;
}
p.text1 {
text-decoration: underline tomato double;
}
p.text2 {
text-decoration: overline tomato dashed 5px;
}
Output:
Primer Título
Segundo Título
Primer párrafo.
Segundo párrafo.
text-transform
La propiedad text-transform especifica el formato de letras en mayúsuculas, minúsculas o colocar mayúsculas en la primera letra de cada palabra. Para realizar estos cambios se usa las siguientes valores:
uppercase(letras mayúsculas).lowercase(letras minúsculas).capitalize(uso de mayúsculas solo en la primera letra de cada palabra).
Input:
p.style1 {
text-transform: uppercase;
}
p.style2 {
text-transform: lowercase;
}
p.style3 {
text-transform: capitalize;
}
Output:
Este texto está transformado en mayúscula.
Este texto está transformado en minúscula.
Este texto está transformado en capitalize.
text-indent
Esta propiedad se usa para dar sangría o identados a la primera línea de un texto.
Input:
p {
text-indent: 50px;
}
Output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam reprehenderit quisquam omnis hic nihil, ut iure nam architecto, ducimus dolorum earum doloremque, minus et aperiam corrupti ea cumque obcaecati tempora.
letter-spacing
La propiedad letter-spacing realiza el espacio entre los caracteres de un texto.
Input:
p.style1 {
letter-spacing: 5px;
}
p.style1 {
letter-spacing: -2px;
}
Output:
Texto con espacio de letra de 5px.
Texto con espacio de letra de -2px.
line-height
La propiedad line-height es usado para especificar espacios entre líneas.
Input:
p.style1 {
line-height: 0.7;
}
p.style2 {
line-height: 1.8;
}
Output:
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius consequuntur natus inventore delectus ut maiores suscipit alias, accusamus cupiditate. Facere debitis accusantium dolores nemo similique ipsam nihil, doloremque unde? Voluptas.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia itaque dolorem repellendus laborum est cumque facilis recusandae dolores autem in beatae ad voluptas maxime eligendi expedita ea esse, laboriosam et!
word-spacing
La propiedad word-spacing especifica el espacio entre las palabras de un texto.
Input:
p.style1 {
word-spacing: 20px;
color: tomato;
}
p.style2 {
word-spacing: -4px;
color: green;
}
Este es un párrafo con espaciado entre palabras normal.
Este es un párrafo con un espacio entre palabras más grande.
Este es un párrafo con un espacio entre palabras pequeño.
white-space
La propiedad white-space maneja los espacios en blanco dentro de un elemento.
Input:
p {
white-space: nowrap;
}
Output:
Este texto no se ajusta al contenedor, es lo que hace la propiedad white-space.
text-shadow
text-shadow permite agregar sombra al texto. Se debe especificar la sombra horizontal y la sombra vertical y la unidad puede ser en cm, px, etc.
Input:
h3.style1 {
text-shadow: 2px 2px;
}
h3.style2 {
text-shadow: 2px 2px lightblue;
}
h3.style3 {
text-shadow: 2px 2px;
}
h3.style4 {
text-shadow: 2px 2px 5px lightblue;
}
Output:
Texto sombreado - 2px horizontal y 2px vertical
Texto sombreado - 2px horizontal y 2px vertical y de color celeste
Texto sombreado - 2px horizontal y vertical; con un blur de 5px y de color celeste
Input:
p.style1 {
color: white;
text-shadow: 2px 2px 4px black;
}
p.style2 {
color: pink;
text-shadow: 0 0 3px lightblue;
}
p.style3 {
color: pink;
text-shadow: 0 0 3px pink, 0 0 5px lightblue;
}
p.style3 {
color: lightblue;
text-shadow: 1px 1px 2px black,
0 0 25px lightblue,
0 0 5px pink;
}
Otros efectos:
Texto con efecto sombra!!
Texto con efecto neón con sombras!
¡Sombra de texto con brillo neón rosado y celeste!
Texto con efecto sombra!!
Ejercicio
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quas repudiandae sit sint nam aliquam, eius necessitatibus adipisci culpa. Mollitia in deleniti suscipit adipisci quia rerum voluptatibus dicta velit est?
Resultado:
CSS
Historia
El CSS fue creado para trabajar en conjunto con el HTML. Y debido al concepto que utiliza (la separación de presentación y contenido), la tecnología CSS tiene un estándar muy amplio, con especificaciones, beneficios y posibilidades muy grandes.
A pesar de que las Hojas de Estilo en Cascada no son imprescindibles, son importantes para darle forma y apariencia a tu página web. Si solo usas HTML tu página se verá desnuda y no destacará entre la competencia.
Esta especificación es un lenguaje de diseño gráfico que se escribe dentro del código HTML del sitio web y, permite crear páginas de una manera más exacta y aplicarles estilos (colores, márgenes, formas, tipos de letras, etc.) por lo que se tiene mayor control de los resultados finales.