Hoy te voy a enseñar un poco de CSS básico para tu web, sea WordPress, cualquier otro CMS o una web estática.
¿Qué es el CSS?
CSS es el acrónimo de Cascade Style Sheets u hojas de estilo en cascada.
Básicamente es un archivo en el que se define toda la estética de tu web, desde las tipografías a los colores.
Así dentro del archivo tendremos los selectores (que serán las etiquetas del HTML), las propiedades de esos selectores y los valores para esas propiedades.
Por ejemplo, pongamos que quieres que todos los encabezados h2 (lo que wordpress te indica como Título 2) quieres que sean de color rojo.
Sólo tendrías que poner en la hoja de estilo
h2{
color: #ff0000;
}
Aquí h2 es el selector, font-color la propiedad que quieres configurar y #ff000 es el valor hexadecimal del color rojo.
¿Cómo modificar el CSS de tu página?
Si trabajas con WordPress, tienes tres opciones:
- directamente en el archivo style.css de tu tema (sólo recomendable si sabes lo que haces)
- creandote otro archivo de estilo y vinculándolo después desde dentro de la etiqueta <head>
- desde la opción Apariencia > Personalizar > CSS adicional, de tu WordPress (que es lo más fácil y seguro…)
Estilos más utilizados en CSS
Textos
- font-family: especifica la tipografía.
- font-size: concreta el tamaño de la fuente.
- font-weight: bold para negrita, regular para normal.
- font-style: italic para la cursiva.
- color: le decimos el color del texto.
- text-align: alineación de texto: right, left, center.
Formatos
- width: le especificamos el ancho de una área, puede ser en porcentaje o en número de pixels.
- height: definimos el alto de una área, igual que antes puede ser en porcentaje o en pixels.
- margin: para indicar el espacio que deja un elemento desde sus bordes hacia el exterior, se puede poner un mismo margen alrededor o especificar un márgen concreto:
- margin-top: margen superior
- margin-right: margen derecho
- margin-left: margen izquierdo
- margin-bottom: margen inferior
- padding: sirve para controlar el margen interior, del espacio al que se le esté dando estilo. Imagina una tabla, el padding será el espaciado entre el contenido de la tabla y las paredes.
- padding-top: espaciado superior
- padding-right: espaciado derecho
- padding-left: espaciado izquierdo
- padding-bottom: espaciado inferior
Fondos y bordes
- background-color: especificamos el color de fondo
- background-image: para utilizar una imagen de fondo (habrá que especificar la url de la imagen).
- border-width: ancho del borde (en pixels)
- border-color: color del borde
- border-style: tipo de borde, solid para color sólido, dotted para punteado
- border: si quieres cambiar las tres propiedades del borde puedes hacerlo usando sólo border y después lo tres valores seguidos, así border: 2px solid #ff0000, dibujará un border de 2px de ancho, tipo sólido y color rojo.
¿Cómo puedes modificar un selector de manera puntual?
Existen dos opciones para hacer una modificación puntual.
Imagina que quieres cambiar la estética de tu h2 en un punto en concreto de la web pero no para toda la web.
Puedes hacer dos cosas, o bien crear una clase o bien darle estilo al selector en la misma etiqueta.
Vamos a poner que quiero en determinados sitios que los h2 sean grises y con tipografía tahoma.
Crear una clase:
Para esto, tendrías que crear en la hoja de estilo la clase poniendo un punto seguido del nombre que quieras usar para definirla.
.gris{
font-family: Tahoma;
color: #2a2c2f;
}
Y luego cuando quisieras utilizarla bastaría con que dentro de la etiqueta se lo especificases:
<h2 class=»gris»>Aquí pondrías el título que fuera</h2>
Dar estilo dentro de la etiqueta
Este es práctico si sólo pretendes utilizarlo una vez.
<h2 style=”font-family:Tahoma; color: #2a2c2f;»>
Aquí pondrías el título que fuera
</h2>
Y aquí acaba la lección de hoy.
Si estás interesada en más artículos relacionados con la parte más técnica de programación y diseño de blogs (y webs en general) dímelo en los comentarios.
La verdad, es que no se si esto os puede interesar o no…
