El buscador de soluciones

Casi todo el mundo relacionado con la realización de páginas web, sabe lo que es una hoja de estilos y cómo aplicar un estilo a un elemento HTML. Pero lo que mucha gente no sabe es que se pueden combinar varios estilos a un mismo elemento web.

Para probarlo ello vamos a partir del siguiente HTML:

<div> 
<div>Hola mundo </div>
<div>Estoy aquí </div>
</div>

Supongamos que lo que queremos es que el texto “Hola Mundo” aparezca en negrita y el texto “Estoy aquí” aparezca en negrita y además subrayado. Es decir:

Hola mundo

Estoy aquí

Podemos conseguir esto mismo de varias formas diferentes (por supuesto todo a través de estilos CSS), veamos algunas de ellas:

1ª FORMA:

La más extendida… podemos crear dos clases en nuestra CSS, una para cada etiqueta <div> dentro del contenedor principal, con los estilos que necesitamos. Quedaría algo así…

CSS:

.negrita{font-weight:bolder;}

.negritaYSubrayado{font-weight:bolder; font-decoration:underline;}

HTML:

<div>

<div class=”negrita”>Hola mundo </div>

<div class=”negritaYSubrayado”>Estoy aquí </div>

</div>

El problema de esta forma de trabajar, es que si el HTML es algo complejo,  el CSS resultante tendrá demasiadas clases y será más difícil la reutilización de las mismas.

2ª FORMA:

Vamos a utilizar la herencia.  Crearemos una clase para poner el texto en negrita y la aplicaremos al contenedor (div) principal. De esta forma todo el texto contenido aparecerá en negrita. Luego crearemos otra clase sólo para poner el texto subrayado. Quedaría algo así:

CSS:

.negrita{font-weight:bolder;}

.subrayado{font-decoration:underline;}

HTML:

<div class=”negrita”>

<div>Hola mundo </div>

<div class=”subrayado”>Estoy aquí </div>

</div>

Esta forma es más práctica y elegante que la anterior. El problema que podría tener esta forma de trabajar, es que necesitemos meter más contenido que no necesite heredar los estilos del DIV contenedor, y también puede ocurrir que lleguemos a perdernos con los estilos que aplican a cada elemento si se profundiza mucho en la jerarquía (muchos anidamientos de etiquetas HTML, unos dentro de otros).

3ª FORMA:

Vamos a crear una clase sólo para poner texto en negrita, y otra clase sólo para poner el texto subrayado. Para combinar los estilos en un solo elemento, simplemente hay que poner los nombres de las clases a aplicar separados por un espacio. Quedaría algo así:

CSS:

.negrita{font-weight:bolder;}

.subrayado{font-decoration:underline;}

HTML:

<div>

<div class=”negrita”>Hola mundo </div>

<div class=”negrita subrayado“>Estoy aquí </div>

</div>

Espero que os sea útil. Hasta pronto…