HTML/CSS - JUEGA con el TÍTULO DE LAS ENTRADAS

¿Habéis visto que en el título de mi post hay palabras con diferente color y otras están en cursiva?
No recuerdo como fue, pero el otro día me vino la idea a la cabeza. Pensé, si todo se puede modificar con código, ¿por qué no se va a poder modificar el título de los posts de manera individual y personalizada y sin que afecte a todos los títulos? Me puse enseguida a probarlo y efectivamente, algo que nunca me había planteado pero que puede ser muy útil, porque puedes resaltar una parte del texto para darle más importancia a nivel visual. 

Se puede hacer prácticamente de todo, desde cambiar el color del título o de una sola palabra, cambiar la tipografía, ponerla en cursiva, agregarle un fondo de color o un borde sólido o de puntitos... Vamos que las posibilidades son casi infinitas y lo mejor es que sólo afectará al título de ese post, no a todos los demás.

Os explico como se hace:

Cuando vayáis a crear vuestro post, en el momento de añadir el título de post debéis añadir la etiqueta <span>. Por ejemplo, quiero que el título de mi post sea DELICIOSA TARTA DE CHOCOLATE y quiero que la palabra DELICIOSA sea de color rosa, que la preposición DE sea en cursiva y que CHOCOLATE aparezca de color marrón.

Lo escribiré como en el código de debajo para que aparezca así:

DELICIOSA TARTA de CHOCOLATE

<span style="color: #f5c5c5;">DELICIOSA</span> TARTA <span style="font-style: italic;">de</span> <span style="color: #72541f;">CHOCOLATE</span>

Otro ejemplo:

DELICIOSA TARTA de CHOCOLATE

<span style="background: #f5c5c5; padding: 10px;">DELICIOSA TARTA <span style="font-style: italic;">de</span> CHOCOLATE</span>

Si lo que quieres es añadir un borde deberás añadirle:

<span style="border: 1px solid #000000;">TU TEXTO AQUÍ</span>

Modifica el número de 1px para cambiar el grosor de la línea, cambia solid por dotted, dashed, double, etc... y cambia el color del borde por el color hexadecimal que quieras. Aquí puedes ver los diferentes estilos de bordes que hay.

También puedes modificar la tipografía, si instalas fuentes de google fonts será muy fácil saber cual es el código que debes añadir, por ejemplo si utilizas Times New Roman sería así:

<span style="font-family: 'Times New Roman', serif;">TU TEXTO AQUÍ</span>

Si quieres cambiar el tamaño de la fuente:

<span style="font-size: 10px;">TU TEXTO AQUÍ</span>

Modifica el valor para hacer que la tipografía sea más grande o más pequeña.

¿Qué os ha parecido el tutorial? ¿Os animáis a probarlo? Si tenéis dudas ya sabéis que podéis escribirme cuando queráis.

¡Que tengáis un buen Martes!