Como personalizar textos con CSS y HTML

Hoy os quiero hablar de diferentes estilos que podemos aplicar al texto de las entradas, son muy sencillos y puede que algunos de vosotros ya los conozcáis, aún así, como he recibido correos preguntando por el efecto de tachado y las tablas, he querido preparar una entrada para hablaros de ello.

Quiero empezar resumiendo la diferencia entre HTML y CSS:

El html es la estructura de nuestro blog/web, mientras que el CSS es el estilo personalizado de los diferentes elementos que la componen. Está muy resumido para que quienes no saben nada al respecto, no se líen, los que ya sepáis usarlo seguro que me echáis la bronca por esquematizarlo tanto.

Pasamos a algunos efectos básicos que podéis aplicar directamente a las entradas.

Efecto Tachado

HTML: las etiquetas usadas son <strike></strike>. Entre ellas situaremos las palabras que queramos que aparezca tachada, siempre en vista HTML.

Ejemplo: 

<strike> efecto texto tachado </strike>

En vista de redacción se vería así:

efecto texto tachado





CSS: son un conjunto de instrucciones de estilo que complementan al HTML de nuestra plantilla y nos dan muchas más posibilidades de personalización.

Las etiquetas usadas para crear un texto tachado son: <span style="text-decoration:line-through;"> </span>. Entre ellas situaremos las palabras que queramos tachar, siempre en vista HTML.

Ejemplo:

<span style="text-decoration:line-through;"> efecto texto tachado con CSS </span>

En vista de redacción se vería así:

efecto texto tachado con CSS

Efecto Subrayado

Blogger nos da la posibilidad de usar el subrayado normal desde el escritorio cuando creamos una nueva entrada. Pero con CSS podemos personalizar aún más nuestros subrayados.

Subrayado Superior (Overline):

Las etiquetas usadas son: <span style="text-decoration:overline;"> </span>.

Ejemplo:

Vista HTML: <span style="text-decoration:overline;"> Ejemplo de texto con subrayado superior </span>

En vista redacción se vería así:


Ejemplo de texto con subrayado superior


Subrayado Superior e Inferior:

Las etiquetas usadas son: <span style="text-decoration: underline overline;"></span>

Ejemplo:

Vista HTML: <span style="text-decoration: underline overline;"> Ejemplo de texto con doble subrayado </span>

En vista redacción se vería así:


Ejemplo de texto con doble subrayado



Subrayado Inferior punteado:

Las etiquetas usadas son: <span style="border-bottom: 2px dotted black;"></span>

Ejemplo: 

Vista HTML: <span style="border-bottom: 2px dotted black;"> Ejemplo de texto con subrayado inferior punteado</span>

En vista redacción se vería así:

Ejemplo texto con subrayado inferior punteado



-> Para modificar el color del subrayado, sólo tenemos que sustituir el "black" final por otros colores:

Rosa: pink

Ejemplo texto con subrayado inferior punteado rosa


Azul: blue

Ejemplo texto con subrayado inferior punteado azul


Amarillo: yellow


Ejemplo texto con subrayado inferior punteado amarillo


Verde: green


Ejemplo texto con subrayado inferior punteado verde


Rojo: red


Ejemplo texto con subrayado inferior punteado rojo


Violeta


Ejemplo texto con subrayado inferior punteado violeta

Sombras

CSS: podemos añadir sombras a nuestros textos y darles un efecto de relieve usando las siguientes etiquetas:
<span style="color: black; text-shadow: black 0.1em 0.1em 0.2em;"></span>

Ejemplo:

Vista HTML: <span style="color: black; text-shadow: black 0.1em 0.1em 0.2em;">Prueba</span>

En vista redacción se vería así:

Prueba

--> Podemos cambiar el color de la letra sustituyendo el "color: black" por "color: " + el color que queramos:

Rosa: color: pink

Prueba Rosa


Azul: color: blue


Prueba Azul


Verde: color: green


Prueba Verde


Y así con todos los colores que vimos en el apartado de subrayado punteado.


--> Podemos cambiar el color de la sombra sustituyendo el "black" que va después de "text-shadow" (sombra del texto) por cualquier otro color:

Naranja: orange


Prueba Sombra Naranja

Además, podemos cambiar ambos valores, por ejemplo la letra a color blanco y la sombra a color negro, con la siguiente etiqueta <span style="color: white; text-shadow: black 0.1em 0.1em 0.2em;">Prueba letra blanca y sombra negra</span>

En vista redacción se vería así:

Prueba letra blanca y sombra negra

Y con sombra rosa: <span style="color: white; text-shadow: pink 0.1em 0.1em 0.2em;">Prueba letra blanca y sombra rosa</span>

Prueba letra blanca y sombra rosa

Podemos aumentar el tamaño de la letra:


Prueba letra blanca y sombra rosa

Texto Móvil

HTML: Las etiquetas usadas son: <marquee>Texto móvil</marquee> en vista HTML.

Vista Redacción:

Prueba texto móvil

Descargar resumen en PDF de la entrada de hoy

En la próxima entrada sobre programación básica para Bloggers hablaremos de como hacer tablas sencillas y áreas de texto. Espero que el tema de hoy os haya sido útil, ya me contáis. ¿de acuerdo? Si no quieres perderte mi próxima entrada, puedes suscribirte a mis actualizaciones por email para recibir todas las novedades en tu correo.

Un fuerte abrazo,

Celia ♥

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥