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 en HTML y en CSS con sus respectivos resultados.
<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>
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:
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:
<p> Párrafo con respaldos de tipografia, en caso no pueda cargar el preferido</p>
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:
<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>
p.peque {font-size: small;}
p.medio {font-size:medium;}
p.grande {font-size: large;}
p.mas-grande {font-size: x-large;}
Resultado:
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.
- Píxeles.- 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 píxeles 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:
<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>
/*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:
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.- texto en oblicua, es parecido a italic.
La etiqueta HTML <i> hace que el texto se muestre en cursiva. 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:
<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>
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: oblique;}
Resultado:
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 600 produce el mismo resultado que el valor bold.
Ejemplos de font-weight en CSS
<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>
p.ligero {font-weight: lighter;}
p.normal {font-weight: normal;}
p.negrita {font-weight: bold;}
p.pesado {font-weight: bolder;}
Resultado:
Como podemos observar, entre los valores ligero y normal, el resultado casi no muestra mucha diferencia y lo mismo ocurre entre bold y bolder.
En HTML también existe la etiqueta <strong> que visualmente produce el mismo resultado que el valor bold de CSS.
Ejemplo con de font-weight con valores numéricos.
<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>
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:
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.
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
<p class="normal"> Texto con variante normal </p> <p class="small"> Texto con variante small caps</p>
p.normal {font-variant: normal;}
p.small {font-variant: small-caps;}
Resultado:
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 valores 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.
Ejemplo de color de texto en CSS
<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>
p {font-weight:bold;}
p.red {color:red;}
p.blue {color:#0000ff;}
p.green {color: rgb(0, 128, 0);}
p.yellow {color:yellow;}
Resultado:
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 antecedido por rgb. Así: rgb(0, 128, 0)
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 líneas estiradas de principio a fin para que todos queden iguales.
Ejemplos de alineación de texto CSS
<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>
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:
Alinear el texto verticalmente en CSS
La propiedad vertical-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. 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
<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.
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.
Resulatdo:
Además de estos podemos emplear otros para alinear fragmentos de texto en una misma línea empleando otros valores y los conoceremos a continuación.
Valores para alinear elementos en línea pueden ser:
- baseline.- alinea el elemento padre con la línea 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
<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>
span.baseline {vertical-align: baseline;}
span.sub {vertical-align: sub;}
span.super {vertical-align: super;}
span.pix {vertical-align: -30px;}
Resultado:
Valores numéricos con unidades en px (píxeles), pt (puntos), cm (centímetros), % (porcentajes), también son válidos e incluso con valores negativos.
Ejemplo de alineación vertical de texto dentro de un con CSS
<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>
.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 (background-color: red), altura 200px y ancho 300px.
Resultado:
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
<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>
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-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 línea de un texto, de tal manera que a primera línea 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
<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>
p.indent {text-indent: 70px;}
Resultado:
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 de 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
<h3> Título de tercer nivel</h3>
h3 {text-shadow: 7px 4px 5px blue;}
Resultado:
Agregando más sombras de color a texto CSS
Es posible agregar más de una sombra, simplemente debemos separar las sombra con una coma, veamos el ejemplo en el que aplicamos tres sombras de distintos colores:
<h1> Título con tres sombras de colores </h1>
h1 {
text-shadow:
3px 3px 1px red,
5px 5px 2px yellow,
8px 8px 3px blue;
;
}
Resultado:
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.
Ejemplos en Text-transform
<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>
p.none {text-transform: none;}
p.capi {text-transform: capitalize;}
p.upp {text-transform: uppercase;}
p.low {text-transform: lowercase;}
Resultado:
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.
Ejemplos de Letter-spacing
<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>
p.normal {letter-spacing: normal;}
p.posit {letter-spacing: 4px;}
p.neg {letter-spacing: -2px;}
Resultado:
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:
Ejemplo de Word-spacing
<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>
p.normal {word-spacing: normal;}
p.posit {word-spacing: 8px;}
p.nega {word-spacing: -2px;}
Resultado:
letter-spacing para espaciado de letras y word-spacing para espaciado de palabras, funcionan casi de la misma manera.
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
- 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 línea. Por si no recuerdas.
Ejemplos de white-space
<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>
p.normal {white-space: normal;}
p.pre {white-space: pre;}
p.nowrap {white-space: nowrap;}
p.prewrap {white-space:pre-wrap;}
Resultado:
Para ver la diferencia hemos agregado líneas 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 línea automáticos como en los otros, nota que los textos continúan hasta que aparece la etiqueta de salto de línea <br>, pero en la parte inferior aparece una barra de desplazamiento que permite recorrer para visualizar el texto que se salió 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>