Estilos CSS para textos

Anterior
Avanzar

En esta interesante lección, vas a aprender a poner estilo a los textos con CSS, me refiero a estilos como: el tipo de letra, tamaño de fuente, estilo, variante, peso, alineación, etc. Así es, hoy conoceremos todas las propiedades y valores CSS para tener el control total sobre la apariencia de los textos de nuestras páginas web.

Familia tipográfica en CSS

La propiedad font-family para la familia tipográfica

Gracias a la propiedad font-family podemos definir el tipo de letra o familia tipográfica para cualquier elemento de texto que tengamos, estos pueden ser por ejemplo: un párrafo, títulos, subtítulo, enlaces, etc.

Existen  dos tipos de nombres de familias de fuente:

  • Familia de fuentes: una familia especifica (como times new roman, courier o arial, etc.)
  • Familia genérica: un grupo de familia de fuentes con un aspecto similar (como serif, fantasy o monospace, etc.)

Ejemplo: A continuación observemos los ejemplos de código con sus respectivos resultados.

Código HTML

<p class="cursiv"> Este es un párrafo con tipo de letra cursive</p>

<p class="georgia"> Este es un párrafo con tipo de letra georgia</p>

<p class="fant"> Este es un párrafo con tipo de letra fantasy</p>

<p class="new"> Este es un párrafo con tipo de letra new times roman</p>

<p class="monos"> Este es un párrafo con tipo de letra monospace</p>

Código CSS

p.cursiv {font-family: cursive;}

p.geor {font-family: georgia;}

p.fant {font-family: fantasy;}

p.new {font-family: new times roman;}

p.monos {font-family: monospace;}


Recordemos que el nombre de la clase puede ser cualquiera, en el ejemplo usamos solo para identificar y visualizar la diferencia.

Resultado:

tipo de letra css font-family ejemplos
Ejemplos de familias tipográficas en CSS

Es importante colocar más de una familia tipográfica dentro de los valores de la propiedad font-family, esto con el objetivo de asegurar un estilo específico; si por alguna razón el navegador web del usuario no puede cargar el primer estilo, entonces tratará de cargar el segundo, el tercero y hasta dar con la tipografía que puede cargar, aunque es muy poco común y casi no sucede, es mejor tenerlo bajo control.

Ejemplo:

Código HTML

<p> Párrafo con respaldos de tipografia, en caso no pueda cargar el preferido</p>

Código CSS

p {font-family: arial, helvetica, roboto, "new times roman", lato;}

Los nombres de tipos de letras CSS deben ir separadas con comas (,) y los tipos de letra con más de una palabra deben ir entre comillas, por ejemplo: “times new roman

Es recomendable utilizar fuentes de letra genéricas, de esta manera, el navegador empleará un tipo de letra similar en caso haya algún inconveniente con las fuentes.

Valores genéricos

La propiedad font-family puede tomar cualquier familia tipográfica, a continuación describimos algunas genéricas.

  • initial.- Señala que tipo de letra debe ser el establecido por defecto en el navegador.
  • inherit.- El tipo de letra debe ser heredado de su elemento padre.
  • serif.- Fuente genérica con serif como, por ejemplo, el tipo de fuente Times.
  • sans-serif.- Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial.
  • monospace.- estilo de fuente genérica Monospace, como por ejemplo Courier.
  • cursive.- Estilo de fuente genérica cursiva, como por ejemplo Script.

Tamaño de fuente CSS

Ahora nos toca aprender las propiedades y valores para definir el tamaño de letra de nuestros elementos de texto.

La propiedad font-size para establecer tamaño de fuente

La propiedad font-size indica el tamaño de fuente para nuestros elementos de texto. Podemos establecer el tamaño de letra con palabras clave o indicando una medida exacta con sus respectivas unidades. Se suele emplear palabra clave cuando no se desea que el usuario modifique el tamaño de letra.

Valores con palabra clave

Las palabras clave para indicar el tamaño de letra son:

  • small: pequeño
  • medium: mediano
  • large: grande
  • x-large: muy grande

Ejemplo de código para establecer tamaño de letra con palabra clave como valor:

Código HTML

<p class="peque">Texto con tamaño de letra pequeño</p>

<p class="medio"> Texto con tamaño de letra mediano </p>

<p class="grande"> Texto con tamaño de letra grande </p>

<p class="mas-grande"> Texto con tamaño de letra muy grande </p>

Código CSS

p.peque {font-size: small;}

p.medio {font-size:medium;}

p.grande {font-size: large;}

p.mas-grande {font-size: x-large;}

Resultado:

Tamaño de fuente en CSS con valor alfabético
Tamaño de letra en CSS con valores de palabra

Valores numéricos

Generalmente, para establecer el tamaño de letra se trabaja con valores numéricos y sus respectivas unidades de medida que pueden ser píxeles o ems.

  • Pixeles.- Los píxeles permiten establecer un tamaño exacto.
  • Ems.- Permite establecer un tamaño relativo, el texto puede ser redimensionado por los navegadores web.

Equivalencia entre pixeles y ems

1px equivale a 16em, por lo tanto podemos emplear la fórmula de conversión: em=px/16

Aplicando la conversión podemos afirmar que 32px equivalen a 2em, si empleamos cualquiera de ellos en los valores para la dimensión de letra, producirán el mismo resultado.

Por ejemplo:

Código HTML

<h1> Título de la página </h1>

<h2> Sutítulo de la página </h2>

<p class="och">Texto tamaño de letra 8</p>
<p class="diz">Texto tamaño de letra 10</p>
<p class="qui">Texto tamaño de letra 15</p>
<p class="vtr">Texto tamaño de letra 23</p>
<p class="cua">Texto tamaño de letra 40</p>

Código CSS

/*Tamaño en px*/
h1{font-size: 32px;}

/*Tamaño en ems*/
h2{font-size: 2em;}

p.och {font-size: 8px;}
p.diz {font-size: 10px;}
p.qui {font-size: 15px;}
p.vtr {font-size: 23px;}
p.cua {font-size: 40px;}

/*Ambios producirán el mismo tamaño de letra*/

Resultado:

propiedad font-size en CSS tamaño de fuente.
Tamaño de letra en CSS con valores numéricos

Estilo de fuentes CSS

La propiedad font-style nos permite establecer un texto en cursiva, los valores que puede tomar esta propiedad son:

Valores para font-style CSS

  • normal.- el texto se muestra normal, sin efectos.
  • italic.- el texto se muestra en cursiva.
  • oblique.- textoen oblicua, es parecido a italic.

Si recuerdas, la etiqueta HTML <i> hace que el texto se muestre en cursiva ¿Verdad? pues el valor italic para estilo de fuente lo hace en CSS.

A continuación veamos un ejemplo en el que además veremos las diferencias de resultados de cada uno de los distintos valores posibles:

Código HTML

<p class="normal">Este es un texto con es estilo de fuente normal</p>

<p class="italic"> Texto con estilo de fuente cursiva</p>

<p class="oblique"> Texto con estilo oblicuo, similar a italic </p>

<i> Texto con etiqueta i produce lo mismo que italic </i>

Código CSS

p.normal {font-style: normal;}

p.italic {font-style: italic;}

p.oblique {font-style: oblique;}



Resultado:

Te recomendamos leer:  La propiedad overflow en CSS
font-style en CSS
Estilo de texto en CSS

Como podemos observar, los valores italic y oblique producen resultados similares y además la etiqueta de HTML <i> también.

La propiedad font-style para texto en CSS generalmente se emplea para poner el texto en cursiva.

Propieda font-weight para peso de fuente

La propiedad font-weight para texto, nos permite establecer el ancho de un texto, podemos elegir entre textos con grosores desde muy delgados hasta muy anchos independientemente de otras propiedades.

Puede tomar valores con palabras clave o valores numéricos.

Valores de font-weight

  • ligther.- este valor produce un texto ligero o delgado.
  • normal.- Normal define el grosor de texto por defecto, sin modificar el grosor.
  • bold.- establece texto grueso o en negrita.
  • bolder.- produce un texto bastante grueso.

los valores numéricos pueden ir de 100 a 900, siendo 100 el texto más delgado y 900 el más grueso; también cabe mencionar que 400 produce el mismo resultado que el valor normal y 700 produce el mismo resultado que el valor bold.

Ejemplos de font-weight en CSS

Código HTML

<p class="ligero">Texto con peso lighter</p>

<p class="normal">Texto con peso normal</p>

<p class="negrita">Texto con peso bold</p>

<p class="pesado">Texto con peso en bolder</p>

Código CSS

p.ligero {font-weight: lighter;}

p.normal {font-weight: normal;}

p.negrita {font-weight: bold;}

p.pesado {font-weight: bolder;}

Resultado:

Peso de fuente en CSS  font-weight
Propieda font-weight para peso de fuente

Como podemos observar, entre los valores ligero y normal, el resultado casi no muestra mucha diferencia y lo mismo ocurre entre bold y bolder.

Recordemos que en HTML también existe la etiqueta <strong> que produce el mismo resultado que el valor bold de CSS.

Alex HM.

Ejemplo con de font-weight con valores numéricos

Código HTML

<p class="cien"> testo con peso 100</p>

<p class="trecien"> testo con peso 300</p>

<p class="quicien"> testo con peso 500</p>

<p class="sietcien"> testo con peso 700</p>

<p class="novcien"> testo con peso 900</p>

Código CSS

p.cien {font-weight: 100;}

p.trecien {font-weight: 500;}

p.quicien {font-weight: 900;}

p.sietcien {font-weight: 700;}

p.novcien {font-weight: 900;}

Resultado:

Peso de fuente con valores numéricos
Propieda font-weight con valores numéricos

Como se observa en los resultados, es curioso notar que la diferencia no se nota claramente en el ejemplo, sin embargo con la combinación de estilos, tamaños y otras propiedades de texto con el peso de fuente se pueden conseguir fantásticos diseños y textos muy atractivos que ni te imaginas, realmente hay universo de combinaciones y posibilidades que los iremos aprendiendo poco a poco.

Los valores numéricos para el establecer el peso de la fuente no lleva unidades ¿Lo notaste verdad?

Alex.

Propiedad font-variant para variantes de fuente

La propiedad font-variant sirve para cambiar el texto a mayúsculas pequeñas, es tan simple como eso, veamos lo valores que puede tomar.

Valores para font-variant CSS

  • normal.- no aplica ningún cambio.
  • small caps.- establece que las letras deben ser mayúsculas pequeñas.
  • inherit.- Hereda el estilo del elemento padre que lo contiene.

Ejemplo de propiedad font-variant

Código HTML

<p class="normal"> Texto con variante normal </p>

<p class="small"> Texto con variante small caps</p>

Código CSS

p.normal {font-variant: normal;}

p.small {font-variant: small-caps;}

Resultado

Propiedad small-caps CSS  ejemplo
Propiedad font-variant para variantes de fuente

Color de letra CSS

Poner color a un texto en CSS es tan simple como apuntar al elemento mediante un selector y establecer la propiedad color, dentro del valor podemos colocar el color que deseamos y existe más de una forma de hacerlo.

Valores de la propiedad color

  • Podemos establecer el valor del color utilizando palabras clave en ingles como: red (rojo), blue (azul), green (verde).
  • Otra forma de colocar el color es mediante valores hexadecimales, se trata de un # seguido de 6 o 3 valores alfanuméricos, por ejemplo el amarillo es: #FFFF00
  • La tercera forma es empleando valore RGB (Rojo, Verde, Azul)
Aquí tienes un selector de color que muestra los valores RGB:

Veamos los equivalentes a los colores rojo, verde y azul en Hexadecimales y RGB.

red

#ff0000

RGB: 255, 0, 0

CMYK: 0, 100, 100, 0

green

#008000

RGB: 0, 128, 0

CMYK: 100, 0, 100, 50

blue

#0000ff

RGB: 0, 0, 255

CMYK: 100, 100, 0, 0

Ejemplo de color de texto en CSS

Código HTML

<p class="red"> Texto de color rojo </p>

<p class="blue"> Texto de color azul </p>

<p class="green"> Texto de color verde </p>

<p class="yellow"> Texto de color amarillo </p>

Código CSS

p {font-weight:bold;}

p.red {color:red;}

p.blue {color:#0000ff;}

p.green {color: rgb(0, 128, 0);}

p.yellow {color:yellow;}

Resultado:

Ejemplo de color de texto en CSS
Ejemplo de color de letra CSS

En el ejemplo, empleamos negrita para todos los textos y luego apuntamos a cada párrafo mediante su identificador class para indicar su color.

Los colores pueden expresarse en palabra clave, hexadecimal o RGB y el resultado visual será el mismo. Cabe señalar que para expresar colores RGB debemos colocar los números entre paréntesis antecedida por rgb.

Propiedad tex-align para alinear el texto horizontalmente

La propiedad text-align es la que nos permite determinar la alineación de los elementos de texto con CSS, por defecto los textos están alineados a la izquierda en cualquier navegador web, sin embargo podemos modificar e indicar que sea a la derecha, al centro o justificado.

Valores para la propiedad de text-align

  • left.- indica que el texto debe ser alineado a la izquierda.
  • right.- indica que el texto debe ser alineado a la derecha.
  • center.- establece texto con alineación al centro.
  • justify.- hace que el texto se justifique, quedando las lineas estiradas de principio a fin para que todos queden iguales.

Ejemplos de alineación de texto CSS

Código HTML

<p class="left"> Este es un parrafor alineado a la izquierda, mediante la propiedad y text-align de CSS. </p>

<p class="right"> Este párrafo será alineado a la derecha y lo verás claramente por que es muy diferente al anterior. </p>

<p class="center"> Texto alineado al centro con CSS </p>

<p class="justify"> Este hermoso texto será justificado con CSS, de tal manera que todas las lineas de este párrafo se encuentre con margenes iguales. En ocasiones es necesario o quizá para darle un toque estético cautivador, un estilo que necesita varias lineas de texto para poder ser aprecidado en toda su plenitud; ahora que tenemos varias lienas de floro, puedes deleitar tus ojos con este justificado de texto. </p>

Código CSS

p.left {text-align: left;
  font-weight: bold;}

p.right {text-align: right;}

p.center {text-align: center;
font-weight: bold;}

p.justify {text-align: justify;}

Resultado:

Ejemplo de alineación horizontal de texto en CSS
Propiedad tex-aling para alinear el texto horizontalmente

Alinear el texto verticalmente en CSS

La propiedad vertica-align se emplea en general para establecer la alineación vertical de un elemento HTML dentro de otro; en este caso nos enfocaremos para texto y mencionaremos los aspectos más importantes..

Te recomendamos leer:  Posicionamiento en CSS

Es bastante útil por ejemplo cuando queremos alinear un texto al medio o en la parte inferior de un bloque, o quizá dentro de una tabla o cualquier otro contenedor como veremos en los ejemplos.

Valores para vertical-align

Por ejemplo los valores empleados para celdas de tablas son:

  • top.- Indica que el texto se ubica en la parte superior.
  • middle.- establece que el texto se ubica en al medio.
  • bottom.- Ubica al texto en la parte inferior.

Ejemplo de alineación vertical de texto en tabla con CSS

Código HTML

<table border="1" cellpadding="2" cellspacing="0" style="height:200px;">
  <tr>
     <td class="top">texto arriba</td>
     <td class="mid">texto al medio</td>
     <td class="bot">texto abajo</td>
  </tr>
</table>

Establecemos una tabla de 400px de altura con 1 fila y 3 columnas, cada columna identificada con un identificador class.

Código CSS

td.top {
   vertical-align: top;
}
td.mid {
   vertical-align: middle;
}
td.bot {
   vertical-align: bottom;
}

Apuntamos cada celda y definimos la alineación vertical con CSS.

Resultado:

Alineación vertical de textos CSS en tablas
Ejemplo Alinear el texto verticalmente en CSS en tablas

Además de estos podemos emplear otros para alinear fragmentos de texto en una misma linea empleando otros valores y los conoceremos a continuación.

Valores para alinear elementos en linea pueden ser:

  • baseline.- alinea el elemento padre con la linea del elemento hijo.
  • sub.- Alinea la línea base del elemento seleccionado con la línea subíndice del elemento padre.
  • super.- Alinea la línea base del elemento seleccionado con la línea superíndice del elemento padre.

Ejemplo de alineación de texto en linea con CSS

Código HTML

<p>1 Elemento <span class="baseline">en baseline</span> ejemplo</p>

<p>2 Elemento <span class="sub">en sub</span> ejemplo.</p>

<p>3 Elemento <span class="super">en super</span> ejemplo.</p>

<p>4 Elemento <span class="pix">con número -30px </span> ejemplo..</p>

Código CSS

span.baseline {vertical-align: baseline;}

span.sub {vertical-align: sub;}

span.super {vertical-align: super;}

span.pix {vertical-align: -30px;}

Resultado:

Alineación vertical de texto en linea CSS
Ejemplo de alineacion vertivcal de texto en linea

Valores numéricos con unidades en px (píxeles), pt (puntos), cm (centímetros), % (porcentajes), también son validos e incluso con valores negativos.

Ejemplo de alineación vertical de texto dentro de un <div> con CSS

Código HTML

<div class="bloque">
  
   <div class="tex">
este es un texto dentro de un contenedor div con nombre main y será alineado al medio verticamente   </div>
  
</div>

Código CSS

.bloque {
    height: 200px; 
    width: 300px;
    background-color: red;
    display: inline-table;
}
.tex {
    display: table-cell;
    vertical-align: middle;
}

El código HTML establece un contenedor <div> con un texto dentro de ella, para ver el resultado claramente pondremos color de fondo rojo, altura 200px y ancho 300px.

Resultado:

Alineación vertical de texto dentro de DIV
Ejemplo de alineación vertical de texto dentro de un

Cuando se trata de contenedores <div> es posible que necesitemos establecer algunos estilos previos para que el resultado pueda tomar forma.

Propiedad text-decoration

La propiedad text-decoration nos permite decorar nuestros elementos de texto, básicamente se trata de agregar una línea decorativa ya sea debajo, encima o al medio del texto en cuestión; mejor exploremos los posibles valores y los resultados que se obtienen.

Valores para text-decoration en CSS

  • none.- evita que se aplique algún estilo de decoración de texto.
  • inherit.- hereda el estilo del elemento padre que lo contiene.
  • overline.- decora con una línea horizontal encima del texto.
  • underline.- decora con una línea horizontal debajo del texto.
  • line-through.- este valor hace que se dibuje una línea horizontal atravesando al texto.

Es posible combinar los valores underline, overline, y line-through en una lista separada por espacios para añadir múltiples líneas decorativas.

Ejemplo de text-decoration

Código HTML

<p class="none">Este es un texto sin decoración.</p>

<p class="inherit">Texto con decoración heredado.</p>

<p class="overline">Texto con decoracion encimma.</p>

<p class="through">Texto con decoración al medio.</p>

<p class="underline">Texto con decoración debajo.</p>

Código CSS

p.none {text-decoration: none;}

p.inherit {text-decoration: inherit;}

p.overline {text-decoration: overline;}

p.through {text-decoration: line-through;}

p.underline {text-decoration: underline;}

Resultado:

Propiedad text-decoration CSS
Decoración de texto con CSS ejemplos

Propiedad text-indent CSS Indentando el texto

La propiedad de CSS text-indent sirve para establecer cuanto el espacio que se debe dejar horizontalmente para empezar con la primera linea de un texto, de tal manera que a primera linea se diferencia del resto.

Valores para text-indent

  • length.- longitud expresada numéricamente con su respectiva unidad de medida, px, pt, cm, em, %, etc. Se permiten valores positivos que desplazan el texto a la derecha y valores negativos que desplazan al texto a la izquierda.
  • inherit.- establece que debe heredar el estilo del elemento padre.

Ejemplo de text-indent CSS

Código HTML

<p class="indent"> Este es un texto en el que aplicaremos la propiedad text-indent que sirve para aplicar un espacio al principio de la primera linea de este párrafo. Notaras que la primera linea de este texto se encuentra a una distancia de 70px desde el borde y ello se debe a que el valor de esta propiedad es de 70px.</p>

Código CSS

p.indent {text-indent: 70px;}

Resultado:

text-indent CSS Indentando el texto
Propiedad text-indent CSS Indentando el texto

Poner sombra al texto CSS Text-shadow

Poner sombra a un texto es más simple de lo que imaginas, simplemente empleamos la propiedad text-shadow y en sus valores colocamos las medidas y color de sombra deseado, te explico mejor en pasos y con ejemplo.

Valores para text-shadow

La forma m’s simple colocar sombra a un texto con CSS consiste en establecer los siguientes valores para la propiedad de sombra;

  • Distancia horizontal.- Es el primero en ser definido, se expresa con un valor numérico y su unidad de medida. Establece cuánto será la sombra en dirección horizontal, si el valor es positivo la sombra se dirige a la derecha y si es negativo a la izquierda.
  • Distancia vertical.- Es el segundo valor que debemos definir y también con un valor numérico con unidades de medida. Establece cuánto será la sombra en dirección vertical, si el valor es positivo, la sombra se dirige hacia abajo y si es negativo hacia arriba.
  • desenfoque.- Determina el radio de desenfoque, este valor también es numérico y hará que la sombra tenga un aspecto borroso, de tal manera que aparente una sombra.
  • color de sombra.- definimos un color para la sombra.

Ejemplo de sombra para texto con text-shadow en CSS

Código HTML

<h3> Título de tercer nivel</h3>

Código CSS

h3 {text-shadow: 7px 4px 5px blue;}


Resultado:

propiedad  CSS Text-shadow
Poner sombra al texto CSS Text-shadow

Agregando más sombras de color a texto CSS

es posible agregar ,as de una sombra, simplemente debemos separa las sombra con una coma, veamos el ejemplo en el que aplicamos tres sombras de distintos colores:

Resultado:

múltiples sombras de texto en CSS
Text-shadow para poner varias sombras a un texto en CSS

La propiedad text-transform

La propiedad CSS text-transform sirve para transformar nuestros elementos de texto en varios formatos, ya sea a minúsculas, mayúsculas, sola las iniciales, etc. de acuerdo al valor que pueda tomar:

Valores para la propiedad text-transform

  • none.- es el valor por defecto y evita cualquier transformación.
  • capitalize.- Convierte en mayúscula solo a las primeras letras de cada palabra escrita.
  • uppercase.- Indica que todas las palabras del texto en cuestión sean transformadas a mayúsculas.
  • lowercase.- Este valor hará que todas las palabras se conviertan en minúsculas.

Text-transform ejemplos CSS

Código HTML

<p class="none"> texto sin transformación CSS</p>

<p class="capi"> texto con transformación capitalize en CSS</p>

<p class="upp"> texto con transformación uppercase en CSS</p>

<p class="low"> texto con transformación lowercase en CSS</p>

Código CSS

p.none {text-transform: none;}

p.capi {text-transform: capitalize;}

p.upp {text-transform: uppercase;}

p.low {text-transform: lowercase;}

Resultado:

Ejemplo de La propiedad text-transform
Como aplicar text-transform a textos con CSS

La propiedad Letter-spacing para textos

Letter-spacing Es la propiedad de CSS que nos permite controlar el espacio entre letras de un elemento de texto, pueden ser: normales, amplios, estrechos y además pueden ser expresados con valor numérico y su unidad de medida, conozcamos los valores:

Valores para letter-spacing CSS

  • normal.- Establece el estilo por defecto, sin modificar.
  • inherit.- Hereda el estilo de espaciado de un elemento padre.
  • length.- Indica el espaciado en números con su respectiva unidad como: px, pt, em, %, etc. y pueden ser valores positivos o negativos, los positivos amplían el espacio y los negativos los reducen e incluso los combina aparentemente.

Letter-spacing ejemplos de como usar

Código HTML

<p class="normal"> Texto con espaciado normal en CSS</p>

<p class="posit"> Texto con espaciado de 4px positivo </p>

<p class="neg"> Texto con espaciado de -2px negativo</p>

Código CSS

p.normal {letter-spacing: normal;}

p.posit {letter-spacing: 4px;}

p.neg  {letter-spacing: -2px;}


Resultado:

Ejemplo de letter-spacing en CSS

La diferencia es bastante notable, pues bien ¡SIGAMOS APRENDIENDO!

La propiedad Word-spacing

A diferencia del anterior, la propiedad word-spacing permite establecer el espacio entre palabras dentro de un texto, y los valores que puede tomar son los mismos: normal, inherit, length.

Bastante similar a la propiedad letter-spacin, solo que en este caso trabajamos con palabras y no con letras, veamos un ejemplo:

Word-spacing ejemplo CSS

HTML

<p class="normal"> Texto con espaciado de palabras normal </p>

<p class="posit"> texto con espaciado de palbras en 8px positivo </p>

<p class="nega"> texto con espaciado de palabras negativo con -2px </p>

CSS

p.normal {word-spacing: normal;}

p.posit {word-spacing: 8px;}

p.nega {word-spacing: -2px;}


Resultado de ejemplo:

Propiedad word-spacing para espacio entre palabras CSS
Ejemplo de word-spacing en CSS

letter-spacing para espaciado de letras y word-spacing para espaciado de palabras, funcionan casi de la misma manera ¡Es genial hacer estas cosas! ¿Verdad?

Alex.

La propiedad White-space

La propiedad CSS white-space sirve para determinar cómo funcionan los espacios en blanco dentro de un texto, en este caso; puede ser que se desee mantener los espacios en blanco tal cual o quizá colapsarlos en uno solo, veamos los valores.

White-space y sus valores en CSS

  • normal.- reduce los espacios en blanco en uno solo y si es necesario hace saltos de línea sin necesidad de <br>.
  • pre.- conserva los espacios en blanco y hace salto delinea cuando aparece <br>.
  • nowrap.- reduce los espacios pero es necesario un <br> para hacer salto de línea.
  • pre-wrap.- mantiene espacios en blanco y hace salto de línea cuando es necesario.
  • pre-line.- reduce los espacios, hace salto de línea cuando es necesario y cuando aparece un <br>.

<br> es la etiqueta de HTML para realizar saltos de linea. Por si no recuerdas.

white-space ejemplos

HTML

<p class="normal"> ESTILO NORMAL     Ejemplo de párrafo posee espacios como este        y otro      además  otro      para que veas la diferencia <br> y sabes, a este párrafo le colocaremos un estilo de espacios NORMAL con CSS y veamos que sucede en los resultados.</p><hr>
  
<p class="pre"> ESTILO PRE      Ejemplo de párrafo posee espacios como este        y otro      además  otro          para que veas la diferencia <br> y sabes, a este párrafo le colocaremos un estilo de espacios PRE con CSS y veamos que sucede en los resultados.</p><hr>

<p class="nowrap"> ESTILO NOWRAP     Ejemplo de párrafo posee espacios como este        y otro      además  otro          para que veas la diferencia <br> y sabes, a este párrafo le colocaremos un estilo de espacios NOWRAP con CSS y veamos que sucede en los resultados.</p><hr>
  
<p class="prewrap"> ESTILO PRE-WRAP     Ejemplo de párrafo posee espacios como este        y otro      además  otro          para que veas la diferencia <br> y sabes, a este párrafo le colocaremos un estilo de espacios PRE-WRAP con CSS y veamos que sucede en los resultados.</p>

CSS

p.normal {white-space: normal;}




p.pre {white-space: pre;}




p.nowrap {white-space: nowrap;}






p.prewrap {white-space:pre-wrap;}








Resultado del ejemplo:

Ejermplos de La propiedad White-space
Como funciona la propiedad de white-space

Para ver la diferencia hemos agregado lineas horizontales con la etiqueta <hr>.

Observa la diferencia de estilos para los espacios en blanco de los párrafos, en el primer y tercer párrafo los espacios en blanco han sido colapsados; en el segundo y cuarto se mantienen.

Por otro lado, el segundo y tercer párrafo no presentan saltos de linea automáticos como en los otros, nota que los textos continúan hasta que aparece la etiqueta de salto de linea <br>, pero en la parte inferior aparece una barra de desplazamiento que permite recorrer para visualizar el texto que se salio del contenedor.

CSS para títulos y subtítulos

Tanto los títulos como los subtítulos son elementos de texto, se pueden aplicar a ellos todas las propiedades y sus respectivos valores de CSS para títulos, desde tipografía, tamaño, color, decoración, y todo lo aprendido a lo largo de esta lección.

Veamos un ejemplo de CSS para H1

<style>
  h1.concss {
    font-size: 45px;
    font-family: Roboto;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 6px;
    color: #4416c4;
    background-color: #e3e3e3;
}

 
</style>

<h1 class="concss">Título de ejemplo con CSS</h1>

<h1 class="sincss">Título de ejemplo sin CSS</h1>


Estilos de texto CSS ejemplos

Para terminar, veamos más ejemplos adicionales a todos los que ya hemos visto, en esta ocasión trataremos de utilizar varias propiedades y valores aprendidos en esta lección, observa.

<style>
  
p.concss {
    font-size: 34px;
    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-family: monospace;
    text-transform: capitalize;
    letter-spacing: 4px;
    color: #b80935;
    text-align:center;
    word-spacing: 8px
}
 
</style>

<p class="concss">Texto de ejemplo final para demostracion con CSS</p>

<p class="sincss">Texto de ejemplo final para demostracion sin CSS</p>
Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos