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. Parece ser que Google considera "obsoletas" algunas etiquetas de HTML... así que nos centraremos en los estilos CSS.
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
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 ♥

AVISO IMPORTANTE
He dejado Feedburner ante la posibilidad de que termine desapareciendo como Google Reader, ahora mis actualizaciones se reciben semanalmente a través de MailChimp.
Si aún no te has apuntado para recibir mis novedades en tu correo electrónico, puedes hacerlo desde aquí: