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 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.
- Vinculando un archivo css externo desde el <head> (Así tienen metido el styles.css)
- Escribiendo código CSS directamente dentro de la etiqueta <head> mediante la etiqueta <styles> (No lo recomiendo para Wordpress)
- 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!
6 comentarios en “CSS básico para mejorar tu blog”
Hola, no sé nada de html ni de CSS, tengo que hacer un blog en blogger, y necesito ayuda con esto. Mi problema es que entre la barra de mi lista de páginas y cuando accedo a una página, tengo mucho espacio, que quiero disminuir y no sé cómo. He buscado en un motón de blogs y no encuentro información que me sirva para disminuir tanto espacio… Gracias
Lo lamento Ana Belén, nunca he hecho un blog con Blogger.com así que no te puedo ayudar.
Un saludo!
un saludo fuerte y animo que es un trabajo genial y con información muy util
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.
Me alegro mucho de que te guste este contenido y te agradezco de verás que lo compartas 🙂
Un saludo!
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
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.