Personalizando encabezados con CSS

Cuando queramos modificar cualquier elemento de un blog dándole estilos con CSS lo que debemos hacer siempre es lo siguiente:

Una vez que sepamos de que tipo es el elemento que hemos seleccionado simplemente debemos aplicarle la CSS a dicho elemento.

Aunque esto ya es sabido por casi todos, al igual que la scrollbar, todavía hay gente que me pregunta como se hace, pues bien, para todos ellos y para mi como recordatorio y apunte, en este post hablaremos de ello, casualmente hoy mismo, Silvy, mi novia, me preguntaba como cambiar los iconos de los títulos de la sidebar, pues bien, en este caso son H2, así que dicho esto iré al grano.

Si quieres cambiar la apariencia de cualquier tipo de encabezado del H1 al H6 ambos inclusive, es muy sencillo, solo debes indicarlo en la CSS.

Hay 6 tipos de encabezados, los cuales se utilizan para darle mayor o menor importancia a un texto, siendo H1 el de mayor importancia y H6 el de menor.

Ahora veremos unos ejemplos:

Texto con formato H1

Texto con formato H2

Texto con formato H3

Texto con formato H4

Texto con formato H5

Texto con formato H6

¿Cómo lo he hecho?

 <h1>Texto con formato H1</h1>
 <h2>Texto con formato H2</h2>
 <h3>Texto con formato H3</h3>
 <h4>Texto con formato H4</h4>
 <h5>Texto con formato H5</h5>
 <h6>Texto con formato H6</h6>
 

Estos serían los encabezados por defecto, pero si lo que queremos es un cambio de estilos, lo haríamos de la siguiente manera, supongamos que queremos darle formato a todos los H2, empezaremos con un simple cambio de color.

Texto con formato H2 y coloreado con CSS

¿Cómo lo he hecho?

 <h2 style="color:#f00;">Texto con formato H2</h2>
 

Ahora le pondremos un background o fondo que realmente será el icono que lleva al lado, le pondremos una estrella, pero recuerda que cambiando la url puedes poner la imagen que se te antoje.

Texto con formato H2, coloreado con CSS y con un background

¿Cómo lo he hecho?

 <h2 style="color:#f00; background: url(http://www.lacoctelera.com/plantillas/i/gossipcity/SRH3.png) left no-repeat; padding-left: 20px;">Texto con formato H2</h2>
 

Aunque estos son los estilos CSS integrados en las mismas etiquetas, hay dos formas más limpias de hacerlo y sería así:

 <-- CODIGO HTML -->
 
 <h2>Texto con formato H2</h2>
 
 <-- CODIGO CSS-->
 
 h2 {
      color: #f00;
      background: url(http://www.lacoctelera.com/plantillas/i/gossipcity/SRH3.png) left no-repeat;
      padding-left: 20px;
 }
 

Explicación del código CSS:

1. Le damos color al texto
2. Le damos un background o fondo, fijaros que tiene la URL de la imagen y luego un left no-repeat, pues bien, el left posiciona el fondo a la izquierda y el no-repeat le está indicando que no se repita
3. Por último el padding-left de 20 pixels le está indicando que el texto en este caso el H2 debe posicionarse 20px empezando por la izquierda hacia la derecha, lo que hace que el texto no quede montado encima de la estrella sino, a su derecha

Y la tercera forma de agregar el CSS, sería una hoja de estilos externa, ¿cómo se hace?, aquí tienes la solución.

Avisos para los comentarios:
Todo comentario con lenguaje inapropiado, obsceno, que utilice palabras abusivas o que ofenda al administrador de este blog o a otras personas no será bienvenido, así que por favor, enriquece este post enviando tus comentarios, pero no hagas spam e intenta que sean relevantes con el contenido del mismo, si no es así seran eliminados

servido por Sir Refusenik 4 comentarios compártelo