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í:

body {
  font-family:Helvetica,Futura,Arial,Verdana,sans-serif;
}

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:

body {
  font-family:Monaco,Georgia,Times,serif;
}

… 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:

#content h1 {
  font-style:italic;
  font-weight:bold;
  font-size:2em;
  font-color:#ffffff;
  font-family:'Helvetica','Verdana','Monaco',sans-serif;
}

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í:

body h2, body h3, body h4, body h5, body h6 {
  font-family:'Helvetica','Verdana','Monaco',sans-serif;
}

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

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

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(29 votos, promedio: 4.6)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 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.

9 comentarios en “Aprender CSS – Cambiar tipos de letra y estilos”

  1. Me descargado con el FTP el archivo style.css de mi Tema y sorpresa… no veo el código, no me deja editarlo. Y tengo la siguiente pregunta , ¿Hay que poner algún tipo de permiso para que este pueda ser modificado?
    Gracias…

  2. Mira a ver si lo estas abriendo con Dreamweaver y este esta en modo «Diseño».

    Si es así, arriba a la izquierda tienes que cambiar a modo «Código».

    Es muy obvio, pero lo mismo es eso.

    Un saludo!

  3. Hola, gracias por la información. Quería consultar: tengo una plantilla que en los post no figuran las letras en negrita (cuando las selecciono en Blogger, las letras al verlas en el post se ven en estilo normal).

    Hay alguna forma de habilitar las negritas con CSS. Es decir, que sean opcionales y no que figure toodo el texto en negrita.

    Desde ya muchas gracias.

  4. Hola Fernando, sigo tu blog desde hace unos meses, a diario, y tengo una pregunta para ti. Ojalá me puedas dar una respuesta. Resulta que tengo un tema en mis blogs que edito para ponerle el banner de google en la cabecera y en los post. Mi problema es que no puedo actualizar el theme porque desaparece el editor. ¿Hay alguna forma o algún plugin para volver a disponer del editor del tema? Gracias de antemano por tu ayuda. Saludos a todos.

Deja un comentario

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

 

Ir arriba Ir al contenido