Aprender CSS – Cambiar tipos de letra y estilos

Vale, ya sé que he tardado un poco, pero a veces me disperso, y me olvido que hay que recuperar temas básicos, que sé que gustan. Y como lo prometido es deuda aquí tienes otra entrega de básicos de CSS, para ir perdiendo el miedo a tocar código y, de paso, mejorar el aspecto de tu tema WordPress, o ponerlo al menos a tu gusto.

De hecho, si has instalado la última actualización de JetPack seguro que estás deseando empezar a usar el ÇSS personalizado, así que no hay ya excusas para aprender el arte del CSS.

Si en el primer artículo vimos cómo modificar enlaces con CSS y, posteriormente, ya hicimos lista de las clases CSS por defecto, en esta ocasión vamos a ver como se cambian estilos y tipos de letra en los principales elementos del contenido, o sea, los títulos y el mismo contenido de las entradas.

… Cambiar la tipografía principal …

Lo más fácil es atacar directamente a la tag body. Para ello abres la hoja de estilos del tema (normalmente style.css) o la pantalla de “Persoanalizar CSS” de JetPack, y localizas la susodicha etiqueta, que será algo así:

Lo que ves detrás de “font-family” es la secuencia en la que se cargarán los tipos de letra, de izquierda a derecha, y hay varias posibilidades, por si el sistema desde el que se visualiza no dispone de alguna de las tipografías instaladas, al final se indica la tipografía básica por defecto, en este caso eligiendo la “sans serif” que haya instalada en el ordenador.

Cambiarlo es tan sencillo como elegir otra serie de familia de fuentes, por ejemplo:

… Cambiar el estilo de los títulos …

En este caso buscamos la clase correspondiente, la tag h1, y sino podemos crearla. Es la que suelen usar los temas para el título visible de nuestra web, si me apuras el texto más importante de la misma:

Igual que antes, podemos cambiar el tipo de letra y familias, pero además tenemos unos cuantos estilos más que definir:

  • font-style: en el ejemplo cursiva (italic)
  • font-weight: en el ejemplo en negrita (bold)
  • font-size: podemos indicarlo en “ems” o tamaño de pixels (ej: 14px)
  • font-color: para cambiarlo hazte con un editor de colores hexadecimal, o usa el que viene en el selector de color de cabecera de temas como Twenty ten, por ejemplo, y lo pones a tu gusto.

… Cambiar otros estilos de títulos …

Ya puestos, si quieres cambiar el estilo del resto de etiquetas de título (h2, h3, etc), lo habitual (pero no obligatorio) es elegir unos estilos iguales para todos, algo así:

Por supuesto, puedes definir un estilo diferenciado para cada tag.

Bueno, por hoy ya está bien, ¡a practicar que paso lista!

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (27 votos, promedio: 4,56 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This
Ir al contenido