Cuando trabajas con páginas web hay una 

diferencia enorme entre
saber manejar solamente herramientas como WordPress o Joomla que
te hacen el trabajo más fácil porque te abstraen de las tecnologías
subyacentes a las páginas web o tener conocimientos, incluso
solamente básicos, de estas tecnologías que son,
fundamentalmente, HTML y CSS.

Imagen de Shutterstock - © Alies Interactive

Créeme, simplemente no hay color en cuanto al techo de tus

posibilidades. Por eso, seas blogger o cualquier otro perfil de persona
que trabaja en la web, te recomiendo tan encarecidamente que
aprendas los fundamentos de estas dos tecnologías, los cuales,
además, no son nada difíciles de entender.
En un post anterior le tocó el turno a un tutorial básico de HTML y hoy
toca el post sobre las hojas de estilo en cascada o CSS (Cascading
Style Sheets en inglés). Si HTML es el lenguaje con el que se construyen
los contenidos de una página, las hojas de estilo CSS son el lenguaje en
el que se usa para trabajar el diseño de cualquier web actual.

¿Qué encontrarás aquí?

 Aprender CSS es fácil si te lo planteas bien
 ¿Cómo funcionan las hojas de estilo en cascada?
 Los conceptos clave en las hojas de estilo CSS
o Reglas, selectores y propiedades
o La cascada: herencia, sobreescritura y conflictos de estilos
 Un ejemplo práctico
 Propiedades básicas que deberías conocer
o 1. Maquetación básica
o 2. Fuentes y texto
o 3. Color y fondos
o 4. Listas
o 5. Bordes
 Vincular los estilos CSS a páginas HTML
o 1. Hojas de estilo CSS inline
o 2. Hojas de estilo CSS internas
o 3. Hojas de estilo CSS externas
 Personalizar CSS en blogs: WordPress y Blogger
o CSS en Blogger
o CSS en WordPress.org
o CSS en WordPress.com
 Referencias para profundizar más

Si no tienes aún conocimientos de HTML, te recomiendo

encarecidamente que te leas antes el tutorial de HTML ya que no tienen
mucho sentido aprender CSS sin saber, al menos, algo de HTML.
 Si necesitas un hosting para tu web o tu blog,
¡actúa!
 Ionos by 1and1: con un 88% de descuento
aquí
 Hostinger: con un 83% de descuento aquí
 SiteGround: con un 70% de descuento
aquí
 Dinahosting: con un 50% de descuento
aquí
 Webempresa: con un 25% de descuento
aquí
 Raiola Networks: con un 20% de
descuento aquí

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos

días.

Aprender CSS es fácil si te lo planteas bien

Incluso con una herramienta como WordPress (que francamente te
recomiendo como mejor opción para crear una web “normal” hoy en
día) dónde en principio se supone que las miles y miles de plantillas de
diseño (temas WordPress) de las que goza WordPress harían
innecesario cualquier conocimiento de CSS, no habrá color entre saber
o no saber un poco de CSS.

Tener simplemente unos conocimientos básicos de CSS como los que

puedes adquirir en este post y no estar limitado a las opciones de
configuración de la plantilla de turno te llevará a otro nivel en lo que
serás capaz de hacer con tu web.

En el caso de WordPress, por ejemplo, saber un poco de HTML y CSS

significa que la plantilla ya no marca el techo de lo que puedes hacer
con tu blog o tu web basada en WordPress. Incluso con temas
gratuitos muy simples y un poco de imaginación y habilidad podrás
conseguir unos resultados que te sorprenderán, y mucho.

Aunque una hoja con reglas CSS de una web grande y compleja, como
lo puede ser este mismo blog, ciertamente puede llegar a intimidar un
poco cuando la ves las primeras veces, pero no te asustes: los
fundamentos básicos de CSS son muy fáciles de aprender y ya te van a
dar mucho juego.

Lo que ocurre simplemente es que se trata de una especificación muy

grande y muy potente, de ahí que un diseño CSS profesional puede ser
algo realmente muy sofisticado. Pero te aseguro que en el 99% de las
ocasiones con un nivel medio-básico te apañarás más que de sobrada y
llegar a este nivel de conocimientos, insisto, no es muy complicado si e
echas un poco de ganas.

¿Cómo funcionan las hojas de estilo en cascada?

Las hojas de estilo CSS son un conjunto reglas que enumeran en un
fichero .css y que describen el aspecto que deben tener los
diferentes elementos HTML de una página.

Lo interesante de esto es que funcionan con una filosofía de patrones

o plantillas, es decir, no es necesario especificar cada uno de los
elementos, sino que se pueden definir reglas como estas dos:

 “Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño

de fuente de 16 y 14 pixeles respetivamente.”
 “El texto de los párrafos están alineados a la izquierda, tienen
un tamaño de fuente de 12 pixeles y un color gris oscuro.”

A modo de comparación, si dominas el uso de estilos en Microsoft

Word, verás que esto se parece mucho al concepto de estilo en Word,
aunque las CSS son infinitamente más potentes que Word en todas sus
posibilidades.

Veamos un ejemplo concreto de cómo se expresarían las reglas

anteriores en el lenguaje de las CSS:

h1, h2 {
color: black;
font-size: 16px;
}
h2 {
font-size: 14px;
}
p{
color: rgb(32,32,32);
text-align: left;
}

Los conceptos clave en las hojas de estilo CSS

Este ejemplo muy sencillo de reglas CSS ya nos sirve perfectamente
para habla de los conceptos clave que hay que tener claros en todo
esto.

¿TE DEDICAS AL DISEÑO WEB PERO NO CONSIGUES HACERLO

RENTABLE?
Pues entonces descubre el curso gratuito que te hubiese cambiado la
vida cuando empezaste como diseñador web freelance.
Haz clic en el botón de abajo para descubrir:

 En qué estás fallando. ¿Por qué otros viven de esto y a ti te

cuesta tanto?
 Los secretos para adelantar a tu competencia por la derecha.
  Cómo multiplicar por tres tus ingresos sin hacer más webs, ni
subir precios.
 16 palabras y mensajes de venta que todo diseñador
debería borrar de su web.
 Cómo hacer páginas web de 400€ en menos de 4 horas.

Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5

horas de grabación totalmente gratis (sí, gratis de verdad).

Accede gratis aqui

Reglas, selectores y propiedades

En el ejemplo anterior tenemos un total de 3 reglas, cada una se
compone de un selector que indican a qué elementos HTML aplica la
regla que es el texto que precede a las llaves de apertura y cierre de la
regla. En la primera regla, el selector es “h1, h2”, en la segunda “h2” y en
la tercera “p”.

Cada regla se compone a su vez de propiedades que especifican qué

exactamente se hará con esos los elementos HTML a los que aplica.

El selector de la primera regla, por ejemplo, indica que esta regla se

refiere a los elementos HTML <h1> y <h2> y que a ellos se aplicarán el
color negro (propiedad “color”) y un tamaño de letra de 16 pixeles al
texto (propiedad “font-size”).

Hay cientos de propiedades de las cuales destacaré luego las que, en

mi experiencia, me han parecido las más frecuentemente usadas y más
útiles. En cuanto a los selectores, los ejemplos han sido triviales puesto
que se refieren a elementos HTML sin más, pero hay formas mucho
más sofisticadas de diseñar selectores.

Un ejemplo rápido de esto:

pa{
text-decoration: underline:
}
p.text-izq {
text-align: left;
}

En la primera regla se han anidado dos elementos para indicar que esta
regla sólo se refiere a enlaces (etiqueta <a> en HTML) dentro de
párrafos de texto (etiqueta <p> en HTML) y que a estos enlaces se le
aplicará un subrayado. Es decir, esta regla no aplica a elementos <a>
que no se encuentren dentro de un párrafo (<p>).

En la segunda regla se ha especificado algo parecido, pero jugando con

un elemento y un atributo de clase (ver estos conceptos en el tutorial
HTML). Es decir, esta regla aplicará a párrafos que contienen un
atributo “class” con el valor “text-izq” tal como éste:

<p class=”text-izq”>Texto del párrafo</p>

Fíjate que en la regla “text-izq” empieza con un punto. Es la manera de

especificar en el lenguaje CSS que “text-izq” se refiere a un atributo de
clase.

No voy a profundizar más aquí puesto que este post no pretende ser
un curso completo de CSS. Sin embargo, ya sólo con esto ya tienes
cierto juego y creo que puedes ver la filosofía de cómo funcionan los
selectores y qué pretenden. Para profundizar en el tema selectores te
recomiendo esta referencia sobre los selectores básicos y esta otra
sobre los avanzados.

MULTIPLICA EL Nº DE CLICS EN TUS CONTENIDOS

Con este eBook gratuito de plantillas de copywriting crearás titulos
que dispararán los clics en tus contenidos:

 77 Plantillas de títulos probadas que multiplicarán los clics.

 Sacaras infinitas ideas crear tus propios títulos.
 Con las palabras "mágicas" redactarás textos irresistibles.
 Vale para todo: blogs, tiendas online, redes sociales, etc.

¡Lo quiero ya!

La cascada: herencia, sobreescritura y conflictos de

estilos
El nombre de hojas de estilo en “cascada” no es casual, expresa que los
estilos que especifican con reglas se pueden heredar de una manera
jerárquica.

Es decir, veamos esta regla:

body {
font-family: Arial;
}

Aquí estamos diciendo que la etiqueta <body> que es la que envuelve

el contenido de cualquier página web tenga un tipo de letra “Arial”. Esto
no tendría mucho sentido si no fuera porque gracias a la capacidad de
herencia de las reglas de este modo por defecto cualquier elemento
hijo como un título o un párrafo va a “heredar” ese estilo, salvo que
especifique lo contrario como, por ejemplo, en esta regla:

p{
font-family: Verdana;
}

En esta última regla aplica el principio de “especificidad”. En principio,

se plantearía un conflicto entre la regla general de <body> con lo que
dice la regla de <p>, pero se resuelve fácilmente puesto que se aplica la
regla más específica y referirse a un párrafo es más específico que
referirse a “los elementos hijos que pueden dentro de <body>”.

Igualmente, una regla con un selector “p a” (enlace dentro de un

párrafo) tendría precedencia sobre una regla con un selector “a” que se
refiere a un enlace a secas.

De nuevo, sabiendo esto, te apañaras bien en el 99% de los casos. Pero

lo cierto es que el tema de la precedencia de las reglas entre sí tiene
cierta tela, si lo quieres conocer más a fondo, échale un vistazo a esta
referencia.

Un ejemplo práctico
Ahora que creo que ya vas viendo cómo funciona esto, te propongo un
pequeño ejercicio práctico para jugar un poco con tus nuevos
conocimientos: modificar el diseño este blog cambiando una de sus
reglas CSS, concretamente el color de los títulos de los posts. Y
tranquilo: el cambio sólo afectará a la página en tu navegador, mi blog
no sufrirá daños 🙂

Para ello te propongo utilizar la herramienta de inspección de

código que traen consigo las versiones actuales de los
navegadores FireFox, Chrome e Internet Explorer. Con ellas puedes
ver y manipular el código de una página web tanto a nivel de HTML
como a nivel de CSS de una manera realmente cómodo e intuitiva.

En cualquiera de estos navegadores se activa la herramienta con F-12,

en el ejemplo he usado Firefox que es la que más me gusta en
conjunto, aunque utilizo también mucho la de Chrome.

Para que te sea más fácil seguir lo que viene a continuación te dejo
un vídeo-tutorial de esta herramienta, el interfaz de usuario ha
cambiado ligeramente con respecto a la versión utilizada en el vídeo,
pero te podrás hacer perfectamente una idea:

El ejercicio que te propongo es cambiarle el color a los títulos

<h1> de los posts en este blog.

Para ello, necesitamos encontrar la(s) regla(s) CSS que determina(n)

la estética de estos títulos. Gracias a estas herramientas esto es tan
simple como realizar los siguientes 4 pasos que puedes ver en la
captura de abajo:
 1. Activar el selector de elementos con el icono al que
apunta la flecha en el paso 1.
2. Una vez activado, puedes colocar el ratón sobre el
elemento a examinar. En Firefox me gusta particularmente
cómo los resalta. Además puedes ver cómo en el cuadro
indica que el selector empleado en el HTML es “h1.entry-
title”, es decir, aplican las reglas para etiquetas <h1> y la
clase “entry-title”. Luego vemos estos conceptos un poco
más despacio.
3. Dentro del árbol de código HTML, se ha identificado el
elemento HTML exacto que has seleccionado antes con el
ratón. Fíjate como concuerda con las reglas CSS.
4. En el lado derecho se listan todas las reglas que
concuerdan con el elemento <h1> y la clase “entry-title”
que corresponden al elemento HTML seleccionado. Los
blogs WordPress suele tener muchas reglas CSS de
diferentes ficheros, por eso verás que salen varias reglas. Lo
importante es que el orden de prioridad es de arriba abajo.

Echa ahora un vistazo con calma a la siguiente captura de pantalla y

observa cómo se reflejan estos cuatro pasos en ella. Intenta
reproducirlos en tu ordenador. Si usas Chrome o Internet Explorer te
costará algo más porque sus interfaces de usuario varían algo, pero el
proceso y resultados son idénticos.
 Los inspectores de código incorporados en los navegadores son tremendamente útiles
cuando se trabaja con HTML y CSS.

Ahora toca modificar el título. Para ello vamos a modificar la siguiente

regla:

h1, .fpost .entry-title {

font-size:33.6px;
}

Añadimos una línea (haz clic con el ratón justo delante de “font-size” y
podrás editarla) para que quede así:

h1, .fpost .entry-title {

font-size:33.6px;
color: red;
}

El resultado estético es discutible, pero desde luego nadie podrá

discutir que el cambio se ve con claridad 🙂

Si te interesa el tema blogging, tampoco te pierdas

nuestra recopilación de los mejores recursos para blogs & bloggers

Propiedades básicas que deberías conocer

Ahora que conoces la filosofía básica y conoces también una
herramienta magnífica para experimentar con CSS como lo son las
herramientas de inspección de código de los navegadores,
simplemente probando propiedades interesantes, ya podrás hacer un
montón de cosas, por eso, te dejará una lista de lo que me parecen las
propiedades más útiles.

Como temas WordPress premium te

recomiendo Divi y GeneratePress

Consulta también aquí las mejores plantillas WordPress

Solamente adjunto una descripción muy breve a cada una, la

descripción detallada la encuentras en sus respectivos enlaces.

Mi consejo es: juega un poco con las siguientes propiedades y

diferentes selectores para ver qué pasa. Cuánto más simple, mejor al
principio. Ahora bien, no te quedes para siempre en el “trasteo”, si
quieres aprender CSS como es debido, has de hacerlo con un poco de
orden por lo que te recomiendo que, después de una fase de jugar y
experimentar, lo aprendas de una manera más estructurada con el
material que te aporto al final del post.
1. Maquetación básica
 width: Ancho de un elemento.
 height: Alto de un elemento.
 vertical-align: Alineamiento vertical dentro de un elemento.
 margin: Espacio que se añade entre el elemento y sus
vecinos. Se puede diferencia por lado (arriba, abajo,
izquierda, derecha).
 padding: Relleno interior que se añade en los bordes del A
diferencia de margin, cuenta para el tamaño del elemento.
 float: Mueve el elemento todo lo posible hacia el lado
indicado. Esta propiedad se usa en el posicionamiento
flotante de CSS. El tema del posicionamiento en CSS no es
trivial y conviene estudiar cómo funciona antes de usar esta
propiedad.

2. Fuentes y texto
 font-family: Tipo de letra
 font-size: Tamaño de letra
 font-weight: Peso (normal, negrita, …)
 font-style: Estilo (normal, cursiva, …)
 text-decoration: “Decoraciones” como subrayado, tachado,
etc.
 text-align: Alineación del texto (izquierda, derecha, etc.)
 text-transform: Mostrar un texto en mayúsculas,
minúsculas o la primera letra de cada palabra en
mayúsculas.

3. Color y fondos
 color: Color del elemento. Se puede especificar en diferentes
formatos como palabras predefinidas (red, green, etc.) RGB o
como valor hexadecimal.
 background-color: Color del fondo del elemento.
  background-image: Permite especificar una imagen de
fondo.
 background-repeat: Permite usar una imagen a modo de
mosaico en diferentes modalidades.
 box-shadow: Crear un efecto de sombra para un elemento.

4. Listas
 list-style-image: Usar la imagen especificada como viñeta
para la lista.
 list-style-type: Diferentes estilos de viñetas y estilos de
numeración para elementos de lista.

5. Bordes
 border: Añade un borde a un elemento y establece algunas
propiedades (grosor, estilo de línea, etc.)
 border-color: Color del borde.
 border-style: Diferentes estilos para el borde (sólido,
puntos, etc.)
 border-radius: Permite crear esquinas redondeadas para
un elemento.

Vincular los estilos CSS a páginas HTML

Ya sabes cómo crear reglas CSS, ¿pero cómo se aplican a una página
HTML?

Para ello tienes básicamente 3 opciones:

1. Hojas de estilo CSS inline

La primera opción consiste en usar el atributo “style” en un elemento
HTML tal como se puede ver aquí:
<h1 style=”font-family:Verdana; color:red”>Título de nivel 1</h1>

En este caso, no hay selector puesto que no hay elemento que

seleccionar, es el que es. Por tanto, se especifican simplemente las
propiedades a aplicar al elemento en cuestión. Este tipo de reglas
tienen mayor prioridad de todas las reglas.

Se suele recomendar encarecidamente evitar esta manera de vincular

estilos CSS puesto que al tener que aplicarse a cada elemento
individualmente, implican un esfuerzo y mantenimiento disparatado.

No obstante, hay casos de uso muy concretos en los que son prácticas.
Por ejemplo, en un widget sencillo de WordPress que permita
configurar directamente ciertas propiedades CSS desde su interfaz de
configuración puede ser una buena opción implementar estas
propiedades con esta técnica.

2. Hojas de estilo CSS internas

La segunda opción es escribir las reglas dentro de un elemento <style>
dentro de esta etiqueta que, a su vez, se encontraría dentro del
elemento <head> de la página HTML.

Obviamente la desventaja es que en este caso las reglas sólo son

visibles para esa página concreta en las que se han declarado y no se
pueden usar para otras páginas.

3. Hojas de estilo CSS externas

La última opción es la más usad y consiste en crear uno o varios
ficheros con extensión “.css” en los cuales se declaran las reglas CSS.

La manera de vincular estas reglas a una página HTML consiste en

referencia el fichero .css desde esa página. De este modo se puede
crear un fichero global para una web entera y usarlo en todas las
páginas que se quiera.
En este caso, la declaración también se incluye dentro del elemento
<head> y tiene el siguiente aspecto:

<link rel="stylesheet" type="text/css" href="/css/estilos-1.css" />

<link rel="stylesheet" type="text/css" href="/css/estilos-2.css" />

Aquí hay que tener también en cuenta que en el caso de usar varios
ficheros el orden de inclusión marca precedencia en el orden inverso.
En el caso de existir un conflicto por haber diferentes reglas con igual
selector en varios ficheros, las reglas de los ficheros siguientes
sobreescriben los anteriores.

Es decir, si en estilos-1.css tenemos una regla  como:

pa{
text-decoration: underline;
}

Y luego en estilos-2.css otra que dice:

pa{
text-decoration: none;
color: blue;
}

La propiedad “text-decoration” genera un conflicto que se resuelve

dando prioridad a la propiedad de estilos-2.css.

Si tienes un blog WordPress, tampoco te pierdas

nuestra recopilación de los mejores plugins de WordPress

Personalizar CSS en blogs: WordPress y Blogger

Como la gran mayoría de los lectores de este post son bloggers, es
obligada una pequeña referencia del tema CSS en blogs. Solamente
haré unos breves apuntes ya que en su momento dedicaré un post
específico a cómo personalizar blogs usando CSS.
CSS en Blogger
Si tienes un blog en Blogger estás de suerte porque uno de los puntos
más fuertes de esta plataforma gratuita es que te permite trabajar
directamente con HTML y CSS para personalizar tus plantillas. Por
tanto, en Blogger lo tienes fácil.

Aquí te dejo un vídeo con un pequeño tutorial que explica cómo se

hace esto:

CSS en WordPress.org
En el caso de WordPress.org (la versión descargable que se instala en
un hosting propio) también lo tienes muy fácil. El famoso
plugin Jetpack trae entre sus +30 módulos uno que permite editar
reglas CSS que se añadirán a WordPress. Por otra parte, está también el
plugin Simple Custom CSS, una alternativa muy interesante a Jetpack
que sólo implementa esta funcionalidad y, por tanto, bastante más
ligero que Jetpack.
Te recomiendo encarecidamente alguno de estos plugins para crear
estilos CSS para tu blog WordPress y que no toques directamente el
código del tema (normalmente el fichero style.css que viene entre los
ficheros del tema) como hace mucha gente alegremente una vez que
aprenden un poco de esto.

La razón es que, primero, con cada actualización del tema se macharían

tus cambios y, segundo, que tu personalización la pierdes también en el
momento que cambies de tema. Con los plugins evitas estos
problemas.

Si necesitas un hosting para tu web o tu blog,

¡actúa!
 Ionos by 1and1: con un 88% de descuento
aquí
 Hostinger: con un 83% de descuento aquí
 SiteGround: con un 70% de descuento
aquí
 Dinahosting: con un 50% de descuento
aquí
 Webempresa: con un 25% de descuento
aquí
 Raiola Networks: con un 20% de
descuento aquí

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos

días.

CSS en WordPress.com
En WordPress.com, la plataforma gratuita que no requiere hosting
propio, por desgracia, una de sus limitaciones es que, por defecto, no
puedes trabajar directamente con estilos CSS.
Para poder hacer esto tienes que pagar por una mejora
llamada Custom Design la cual te permite personalizar fuentes y crear
estilos CSS propios.