,
19 de febrero de 2019

· Maquetación I – CSS para nuestra web o blog

Vamos a hablar de: Maquetación I – CSS para nuestra web o blog

Esta semana nos hemos propuesto retomar el blog y contaros algo que pueda resultar interesante y sobretodo útil. ¿Qué hemos pensado? Pues hablaros sobre la maquetación y el CSS. Vamos a ver cómo crear clases de CSS, dónde colocarlas y como obtener unos formatos personalizados y que podemos adaptar a tantos textos como queramos.

¿Qué es CSS y para qué sirve el CSS?

CSS (hojas de estilo en cascada) es un lenguaje que su utiliza para definir la apariencia de un documento escrito en un lenguaje de marcado (HTML -> HyperText Markup Language [lenguaje de marcas de hipertexto]). Hablando en plata: son los colores, fuentes, interlineados, etc.

¿Por qué es importante el CSS?

Su principal ventaja es que ante una estructura ya creada en HTML, sólo modificando el CSS podríamos crear un sitio totalmente diferente. Todos podemos imaginarnos, por llevarlo a un ejemplo extremadamente simple, que un documento escrito en cualquier editor de textos tipo «note» donde no existan colores, tabulaciones, interlineados, etc. no tiene nada que ver, visualmente, con la misma información bien decorada y maquetada con Word. Y sino me creeis presentad vuestro próximo CV como texto «plano».

Si estáis a punto de cerrar este artículo sólo te pido medio minuto más, quiero aclarar una cosa y ya nos ponemos con lo que de verdad quieres ver…

Maquetando – Capítulo I – CSS

Consideraciones previas

Puede que si estáis trabajando con WordPress vuestra propia plantilla tenga una serie de opciones para maquetar todo y configurarla a tu gusto. Genial. Nada que objetar, salvo una pequeña cosa. Si nosotros definimos que los H2 tienen un formato concreto, el que sea, nos estamos obligando a que todos los H2 del sitio sean iguales… ¿y tienen que serlo? ¿Y si queremos meter algo de fantasía en un momento dado?

Otra cosa que podéis decirme es que el propio WordPress tiene el editor tan molón que nos permite hacer un montón de cosas sin saber CSS. ¡Claro! Faltaría más… Pero y si tienes 200 H2 y quieres que sean 50 de cada tipo… ¿cada vez que escribas uno vas a tener que meterle a mano todos esos atributos? Puffff… ¡suerte!

Ahora, ya, por fin voy a explicarte dos cositas que te van a simplificar mucho la vida y que te van a dejar crear «formatos» que podrás aplicar a todo lo que quieras, cuando quieras, las veces que quieras y de una forma muy sencilla. Y que además, si con el tiempo quieres cambiarlo… te llevará unos segundos y no tendrás que rehacer tu web/blog al completo.

¿Qué es una clase de CSS?

Vamos a intentar ser lo menos técnico y farragoso posible. Una clase la vamos a definir como un estilo de una etiqueta HTML que podremos reutilizar llamándola en todo momento.

Es decir, si queremos que el texto de los H2 (títulos 2) sean rojos y con letra negrita, los H3 (títulos 3) sean verdes y MAYÚSCULAS… tendremos que definir una clase que agrupe cada uno de estas modificaciones.

Por seguir con el ejemplo diríamos algo así:

clase de nombre títulos 2 { color: rojo; letra: negrita}

clase de nombre título 3 { color: verde; letra: mayúscula}

El concepto es muy fácil. Ahora tenemos que saber dónde tenemos que colocar este pseudocódigo, una vez lo transformemos en CSS real y cómo lo llamamos desde donde queremos utilizarlo.

¿Cómo escribimos CSS?

Conocer todo lo que se puede hacer es impensable, en especial si no es tu trabajo, con conocer algunas funciones simples y saber dónde buscar al resto sería más que suficiente.

Ya nos hacemos una idea de cómo se hace, ahora vamos a ver cómo es realmente.

Si queremos definir una clase para CSS debemos darle un nombre. El que queráis (sin espacios, ñ’s, etc.). Podéis utilizar un nombre que os recuerde de alguna forma a esa clase o al lugar donde la vais a utilizar. Para este minitutorial voy a aplicar los dos estilos que comentamos antes. Y a la clase que íbamos a aplicar al título 2 la voy a llamar «rojonegrita» y a la del título 3 «verdemayusculas».

¿Cómo se define? con un punto + el nombre + llave de apertura + atributos (+ punto y coma al final de cada atributo) + llave de cierre.

.rojonegrita{

atributo1: valor 1;

atributo2: valor 2;

}

¿Y los atributos? Esta es la parte «difícil» porque la mayoría tendremos que buscarlos, sobretodo al principio, pero con el tiempo veremos el ahorro de tiempo conseguido. Si yo quiero poner un texto de color lo mejor es preguntar a google: «color texto CSS». Y la respuesta será de un millón de sitios hablándote de CSS. La mayoría acabaréis aquí: https://www.w3schools.com/ pero mientras aprendéis podéis ir aprendiendo en cualquier otro sitio.

Volvamos a lo que estábamos haciendo. ¿Cómo le digo a mi clase que la letra debe ser de color rojo? Mediante el atributo: color. Este ejemplo era muy fácil. ¿Y cómo le digo que la letra sea negrita? Mediante el atributo: font-weight. Estos son los atributos ¿y los valores?. Los valores del color pueden ser mediante el color en inglés: «red«, «blue«, «green«… o si conocemos el código HEX de nuestro color con él. Para el caso de la negrita el valor es: bold.

Ahora que sabemos esto… vamos a crear nuestra clase correctamente:

.rojonegrita{
color: red;
font-weight: bold;
}

Y para el caso verdemayúsculas que ya sabéis cómo funciona la declaración de classes sería:

.verdemayusculas{
color: green;
text-transform: uppercase;
}

Lo único que no conocéis es el atributo text-transform, que como bien sugiere transformará el texto. Y uppercase como valor que lo que hace es mostrar el texto en mayúsculas, lo escribas cómo lo escribas.

¿Dónde colocamos este código CSS?

Tenemos, independientemente de las opciones a mayores que nos ofrezca nuestra plantilla, dos lugares dónde colocarlos. Pero os voy a recomendar en el segundo sitio y ahora veremos por qué.

Primer sitio para colocarlo es en: Apariencia / Editor

Apariencia - Editor - WordPress - Maquetar-CSS-I

En este caso es un child-theme que tenemos de hace tiempo instalado y lo importante está en fijarse en la parte derecha, donde pone: hoja de estilo (style.css). ¿Por qué? Porque aquí vamos a tener dos opciones. Una es que tengáis instalado un child-theme, que sería la opción correcta. La otra es que no lo tengáis. En ambos casos vamos a escribir directamente sobre el archivo style.css. ¿Qué diferencia hay? Pues que sino tenemos un child-theme al actualizar nuestra plantilla, que antes o después haremos, todas esas modificaciones desaparecerán. En cambio, con un child-theme lo que haremos es actualizar la plantilla padre y conservar nuestros cambios aquí.

En cualquier caso, os recomiendo utilizar esta segunda opción que ahora vamos a comentar:

Maquetar CSS I - CSS adicional

Apariencia / personalizar / CSS adicional

¿Qué ventajas tiene este camino? Sobretodo una y es que vamos a poder ver los cambios que realizamos sobre la marcha, lo cual nos puede ayudar a confirmar si es lo que buscábamos o queremos añadir más cambios sobre la marcha. Voy a crear estos estilos tal cual en mi sitio para que podamos verlos de verdad.

Simplemente he copiado estos códigos y ahora toca dar a publicar para que sean efectivos.

¿Y ahora? Pues ahora vamos a llamar al CSS y veremos la «magia» del CSS.

 

 

¿Cómo llamamos al CSS?

Sólo nos queda la parte más fácil y donde podremos comprobar si lo que hemos hecho funciona o no. Al principio del post hablábamos de que utilizaríamos este código en un título 2 y en un título 3 respectivamente. Pero realmente no es obligatorio utilizarlo ahí. Podemos utilizarlo casi donde queramos. Lo primero vamos a ver cómo llamamos a esa clase que hemos creado y luego vemos algunos ejemplos de dónde colocarlo.

Es tan sencillo como entre las etiquetas html que queramos pongamos: class=»nombredelaclase».

Más fácil aún y así lo vemos aplicado. Si yo quiero que mi título 2 tenga la clase negrita lo utilizaré así:

<h2 class="rojonegrita">Este es mi título</h2>

Para el título 3 sería:

<h3 class="verdemayusculas">Mi título 3</h3>

Y aquí es donde viene lo realmente divertido… ¿y si yo quiero que todo un párrafo tenga el formato rojonegrita? Muy sencillo, aplico la clase de la misma forma pero a un párrafo:

<p class="rojonegrita">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo est, egestas a orci id, gravida vulputate urna. Vestibulum vulputate, augue a dictum maximus, orci quam mattis enim, vel varius mauris elit at orci. Suspendisse elit justo, condimentum a nunc ac, bibendum accumsan tellus. Nullam tempus quis magna sed varius. Ut nec ex aliquam, sagittis ligula a, imperdiet nunc. Vestibulum ultricies felis id tempor bibendum. Aliquam euismod ipsum purus, vitae molestie elit vehicula a. Maecenas interdum luctus sem quis scelerisque. In elementum tincidunt ex vel laoreet. Vestibulum a iaculis turpis. Pellentesque bibendum nunc vel venenatis fringilla.</p>

¡Genial! ¡Ah! no, espera que no os he enseñado cómo funciona… sólo os he puesto los códigos.

Este es mi título

Mi título 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo est, egestas a orci id, gravida vulputate urna. Vestibulum vulputate, augue a dictum maximus, orci quam mattis enim, vel varius mauris elit at orci. Suspendisse elit justo, condimentum a nunc ac, bibendum accumsan tellus. Nullam tempus quis magna sed varius. Ut nec ex aliquam, sagittis ligula a, imperdiet nunc. Vestibulum ultricies felis id tempor bibendum. Aliquam euismod ipsum purus, vitae molestie elit vehicula a. Maecenas interdum luctus sem quis scelerisque. In elementum tincidunt ex vel laoreet. Vestibulum a iaculis turpis. Pellentesque bibendum nunc vel venenatis fringilla.

P.D ¿Y cómo sabéis que no os he engañado y he puesto a mano estos formatos? Os garantizo que no, pero os lo cuento en el próximo post… 😉

P.D.2. ¿Quieres maquetar tu web/blog y no sabes cómo? Pídenos presupuesto sin compromiso en: hola@livire.es

COMPARTE:

Artículos relacionados:

Palabras Clave

TODAS LAS CATEGORÍAS

× ¿Hablamos?