CSS básico para mejorar tu blog

Entendamos por CSS básico el manejo y uso de las propiedades más habituales y que determinan cosas básicas del aspecto de nuestros textos, imágenes, divs, etc.

En otro post anterior, te hablé de las etiquetas HTML más utilizadas. EL post de hoy, te permitirá aplicar estilos (control del aspecto estético) mediante el uso de un CSS básico, sin muchas florituras.

Y si quieres profundizar más, aquí tienes mi curso de CSS básico.

css-básico

CSS básico que debes conocer

Un poco de teoría para los más novatos en estas lides. CSS, es el acrónimo de Cascading Styles Sheets. Traducido al español: Hojas de Estilo en Cascada.

Un archivo CSS (por ejemplo: mi_estilo.css) es una hoja de estilos. Dentro de estas hojas de estilos, tendremos los selectores, que equivalen a las etiquetas HTML, las propiedades a controlar de dichos selectores y por último los valores que indicamos para dichas propiedades. Dicho así parece muy complicado (oh dios mio, programación noooo!!!) pero no lo es 😉

Veamos una linea de código en CSS, la cual haga que todos los textos contenidos dentro de la etiqueta HTML <p> de nuestra web, sean de color blanco. Sería algo así:

p {

color: white;

}

¿Complicado? Tenemos el selector «p» (que se refiere a todas las etiquetas <p> del documento), la propiedad «color» (que afecta al color del texto) y el valor white (que en este caso cambia el color del texto a blanco, pero podemos poner cualquier valor hexadecimal para determinar un tono exacto).

La sintaxis que se aplica es la siguiente:

Escribimos el selector (en ese caso p, tal cual), después abrimos corchetes. A continuación, definimos: propiedad:valor;

Es muy importante poner el punto y coma al final de cada valor, para separar de la siguiente propiedad. Se suele escribir asi para velro mejor, pero ese mismo código podríamos escribirlo de corrido (con espacios donde corresponde) y el código haría lo mismo en cuanto a funcionalidad.

Así, escribimos tantas «propiedad:valor;» como necesitamos, y al final cerramos los corchetes.

¿Dónde y cómo se aplican los estilos en caso de un WordPress?

Normalmente, los estilos CSS de un blog WordPress son controlados desde un archivo llamado «styles.css» que está dentro del Theme que estés utilizando.

Puedes editarlo directamente en «Apariencia/Editor», donde también tenemos algunos de los archivos PHP que controlan el blog, pues abajo a la derecha en último lugar tenemos el estilo CSS que se aplica al blog. De hecho, es el archivo que se abre por defecto en el Editor cuando accedes a él.

Ahora bien, después te hablo de cómo modificar sobre este archivo, pero primero vamos a ver cómo aplicar un estilo «de forma directa» sobre un elemento concreto de nuestro blog.

Me explico: hay 3 formas básicas de aplicar estilos.

  1. Vinculando un archivo css externo desde el <head> (Así tienen metido el styles.css)
  2. Escribiendo código CSS directamente dentro de la etiqueta <head> mediante la etiqueta <styles> (No lo recomiendo para WordPress)
  3. Escribiendo código CSS directamente DENTRO DE CADA ETIQUETA que queramos modificar, con la propiedad «style».

Ejemplo de este tercer caso, el cual recomiendo para un uso de css básico:

<h2 style=»font-family:Tahoma; font-size: 22px; color: grey;>

Titular con h2 modificado especificamente

</h2>

Haciendo esto sobre una etiqueta <h2> concreta, SÓLO AFECTA a ese encabezado, el resto de encabezados <h2> del documento se seguirán mostrando según las especificaciones que para ellos indique el archivo styles.css

Es decir, todo lo tienes controlado desde el archivo vinculado de forma externa styles.css, y en un segundo nivel, puedes aplicar nuevos valores a propiedades CSS para etiquetas en particular.

De hecho, si hacemos ese ejemplo, el encabezado se mostrará tambien en negrita. Nosotros no se lo hemos indicado dentro de nuestra propiedad «style», pero ocurre que en el archivo styles.css sí estará indicado que vayan los <h2> en negrita, por eso se mantienen esas propiedas y las que tú añadas. Esto es lo que signifca que sean «estilos en cascada», se van aplicando propiedas y valores según un orden de prioridades.

Tampoco quiero entrar con mucha teoría, estamos aquí para aprender un CSS básico, pero eso es importante que lo entiendas.

¿Cómo aplicar un cambio a todas las etiquetas del documento?

Bueno, en este caso tendrás que estar seguro de lo que haces y editar el archivo styles.css

Por ejemplo, si quieres variar el tipo de fuente, tendrás que ir al Editor y en la parte superior del archivo, buscar la propiedad «font-family» que se aplique en el selector «body» o incluso en el selector «html». Es probable que tu theme te deje modifcar de forma directa el tipo de letra a mostrar, de ser así mejor utilizaría esas opciones.

Otro ejemplo, si quieres cambiar el color del texto en general, pues busca «color» en esos mismos selectores, o «font-size» para el tamaño. Al final te voy a dejar una lista con las propiedades más habituales, no te preocupes.

Hay blogs que veo que tienen los encabezados en cursiva además de en negrita. Bueno, dentro del styles.css búscate los selectores <h1>, <h2>,… y ahí le indicas la propiedad «font-style: italic». De esta forma, ahora todos los encabezados se mostrarán en cursiva (más con todas las propiedades que ya tuvieran asignadas en el archivo).

Un truco muy útil para «empaquetar» un mini-estilo

A qué me refiero con esto… utilizaré un ejemplo real de mi blog:

Yo tengo un mini-estilo que aplico a algunos <div> que contienen videos de Youtube mios. Lo que quiero, es que cuando incrusto un video de Youtube a veces me interesa que no se vea tal cual sale copiando el código que te da Youtube.

Lo que hago es meter el <iframe> en un <div>, y poder decirle a ese <div> que su ancho se ajuste al 100% del espacio del que disponga. Así luego le digo que el fondo del <div> sea negro, y que me centre el video respecto del 100% del espacio.

Es decir: <div style=»width:100%; background-color: black; text-align:center;»>
Aqui iría el iframe que te da Youtube
</div>

Vale, con eso consigo lo que quiero, pero me puedo ahorrar tener que escribir todo ese código, si puedo guardar ese «mini-estilo» y aplicarlo a los <div> que yo quiera.

Ese almacenamiento de propiedades y valores, se llama «clase». Así, podemos definir una clase que se llame «videos_youtube» y aplicarla sólo con indicar ese nombre de clase a los <div> que nos interesen de forma individual.

¿Cómo creo una clase y cómo la aplico?

Para crearla, ve al Editor y dentro del archivo CSS, en la parte inferior si quieres, declara la clase asi:

.videos_yotube {

width:100%;

background-color:black;

text-align: center;

}

Para aplicarla, dentro de un post en cada <div> con un video que quieras, se lo aplicas simplemente asi:

<div class=»videos_youtube»>Aqui va el iframe que te da Youtube</div>

Nota_1: esto es un ejemplo muy básico, pero imaginate lo cómodo que es si tienes una clase con 10 o más propiedades (que no es raro) para aplicar a algunas etiquetas en concreto, hacerlo asi en lugar de una a una.

Nota_2: la propiedad «text-align» no sólo se refiere a «alinear el texto», sino a alinear los elementos que contiene el <div>. Por eso se aplica tanto a textos, como imágenes o iframes, lo que sea.

Listado de Propiedades más útiles en CSS

Relativas a los textos:

  • font-family: para el tipo de fuente. (Ej: Tahoma, Arial, Verdana;)
  • font-size: para el tamaño de la letra. (Ej: 16px;)
  • font-weight: para indicar negrita o no. (Ej: bold;)
  • font-style: para indicar cursiva o no. (Ej: italic;)
  • color: para el color del texto. (Ej: green; ó #775699;)
  • text-align: para la alineación. (Ej: left | center | right;)

Relativas a los fondos y bordes:

  • background-color: para el color de fondo. (Ej: grey;)
  • background-image: para poner una imagen de fondo. (Ej: url («imagenes/mi_fondo.jpg»;)
  • background-repeat: se suele utilziar para aplicar fondos tipo mosaico, repitiendo una imagen muy pequeña y de poco peso. Ej: repeat-x (sólo en horizonal), repeat-y (en vertical) o repeat; (rellena todo)
  • border: puedes utilizar esta propiedad y luego tres valores seguidos para no usar lo siguiente, mira: Ej: border: 2px solid black. Esto hace un borde de 2px de grosor, de tipo sólido y de color negro.
  • border-width: para definir el ancho del borde en pixeles. (Ej: 1px;)
  • border-color: para definir específicamente sólo el color del borde. (Ej: red;)
  • border-style: para definir el tipo de borde. (Ej: solid; ó dotted;) Dotted es punteado.
  • border-top, border-left, border-right, border-bottom: cuando utilizas la propiedad border, se aplica a los cuatro posibles lados. Con estas otras, puedes especificar valores concretos para cada uno de ellos.

Relativas al formato: (muy útil para los <div>)

  • width: para definir el ancho. (Ej: 100%, 50%, 700px…)
  • height: para definir el alto. (Ej: 100%, 25%, 65px…)
  • text-align: lo veíamos antes, no sólo alinea los textos de un <div>, sino todo lo que contenga. (Ej: left | center | right;)
  • margin: para indicar el espacio que deja un elemento desde sus bordes hacia el exterior. Tambien tiene «margin-top, margin-left…» como lo de los bordes, para aplicar a todos los laterales o a unos en concreto. Por ejemplo si quiere que un <div> deje 25px de espacio respecto del siguiente elemento que aparezca, pondre: margin-bottom: 25px;.
  • padding: sirve para controlar lo mismo que el «margin» pero referido al interior del <div>. Es decir, cuando escribimos texto dentro de un <div>, si el padding es cero veremos que el texto se adhiere al lateral izquierdo del contenedor (de no ser que le hayamos indicado una alineación que no sea left). Para evitar esto, ponemos por ejemplo: padding: 10px; y esto hace que todos los elementos respeten ese espacio de 10px respecto de todos los bordes interiores del <div>. De igual forma que antes, tendremos «padding-top, padding-right…» para controlar cada espacio de forma individual si queremos.

¿Con esto ya puedo decir que sé CSS?

Ni de coña. Con esto sabes cuatro cosas de CSS básico para aplicar algunas modificaciones a partes de tu blog, pero CSS es muchísimo más amplio que estos cuatro apuntes.

Si te interesa ampliar conocimientos, te dejo por aquí mi curso de CSS.

Pero por lo menos espero que con este post sobre CSS básico puedas hacer tus pinitos y trastear. Ojo, primero prueba aplicando estilos directos a etiquetas concretas, refrescas y vas viendo los cambios. Si lo haces en el Editor, igual luego sales del panel de administración, los cambios no eran como tu querías y no te aclaras para encontrar lo que hubieras mofidicado. Lo que digo siempre, cuidado al modificar los archivos del WordPress. El CSS no es tan «dañino» como los PHP, pero bueno, te puede jugar una mala pasada.

Lo mejor es que si no tienes conocimientos, crees tu web con herramientas como elementor pro y generatepress ya que de esa manera no tendrás que tocar nada de código.

No obstante, cualquier duda o problema que tengáis sobre todo esto, preguntad en los comentarios. Y no olvides ayudar a este pobre currela de la red 🙁 compartiendo en tu red social favorita si consideras que esta información sobre CSS básico puede ser útil a otras personas. ¡Gracias!

Compártelo si crees que puede ser de utilidad para otros. ¡Gracias!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

Una pregunta rápida...

¿TIENES YA UNA PÁGINA WEB O BLOG?

Para comenzar a ayudarte y darte los recursos adecuados, me gustaría saber si ya tienes un proyecto web en marcha o si aún no tienes la página creada.

Herramientas y cursos
para emprendedores online

Si aún no has visto en qué consiste mi formación en Titanes Warpress...

TIENES QUE VERLO

No te vayas sin dejar tu comentario...

4 comentarios en “CSS básico para mejorar tu blog”

  1. Me parece fabuloso esta lección acerca de css. En contraste de lo que pasaba hace unos años, hoy css3 y html5 han llegado para quedarse; te lo dice un diseñador que agarró el gusto por todo lo que sea Web, y siempre está buscando cosas nuevas que aprender.

    Gracias por la información, compartiré esto con unas personas que quieren aprender y les diré que echen un vistazo a toda tu página. Saludos.

    1. Omar de la Fuente

      Me alegro mucho de que te guste este contenido y te agradezco de verás que lo compartas 🙂

      Un saludo!

  2. Esta muy bueno tu post, estoy tratando de personalizar lo mas que se pueda en blogger via css, con lo que leí aqui me di una mejor idea de como hacerlo. Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Ir arriba

Tengo cuatro regalos para ti, para mejorar tu sitio web.

DESCARGA LA GUÍA GRATUITA DE PLUGINS

+

BONUS: Acceso a tres clases de mi escuela online

  • Radiografía de un post con el SEO bien cuidado.
  • Popups en Elementor con su formulario de suscripción.
  • Páginas que necesitas para un webinar automatizado.
Guia-paso-a-paso-para-crear-tu-blog

Tengo cuatro regalos para ti, para que puedas crear tu web.

DESCARGA LA GUÍA GRATUITA

+

BONUS: Acceso a tres clases de mi escuela online

  • Cómo contratar (bien) un hosting y un dominio.
  • Cómo instalar WordPress en apenas un par de clicks.
  • Qué plantillas te recomiendo y cómo instalar la tuya.
megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos

¿Ya tienes que irte?

Ok, pero échale un vistazo a esto, aún estás a tiempo.

VIDEO #1 [01/09/2020]

La gran oportunidad que nos ofrece hoy en día Internet
(sabiendo cómo aprovecharlo)

VIDEO #2 [03/09/2020]

Por qué parece tan complicado tener una web y un proyecto
(y porqué no debería serlo)

VIDEO #3 [07/09/2020]

El camino se hace mucho más sencillo si estás acompañado
(montamos el puzzle de tu web)

Cómo tener una web efectiva que convierta a tus lectores en suscriptores y clientes

megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos