Guía básica de HTML y CSS para WordPress. Entender CSS

Entender CSS es el segundo capítulo de La Guía Básica de HTML y CSS en WordPress.

Como vimos la semana pasada en Guía básica de HTML y CSS para WordPress. Entender HTML, HTML y CSS son dos lenguajes de programación diferentes, pero que trabajan juntos. También vimos lo fácil que es entender HTML. Así que, llegados a este punto ya podemos hablar de los que es CSS, como afecta a nuestra web y como funciona.

¿Qué es CSS?

CSS significa Cascading Style Sheet o Hoja de estilo en cascada.
HTML es lo que define la estructura y el contenido de una página web, mientras que CSS es un documento web que le permite cambiar la apariencia del HTML.

CSS le permite cambiar el tamaño, el estilo, la fuente y el color del texto; márgenes y relleno; colores de fondo y estilos de los bordes. También se utiliza para situar los elementos en una página, pero esta forma de utilizar CSS es más avanzada y la dejaremos para otro día.

¿Cómo funciona CSS?

CSS se aplica a los elementos HTML en una página web mediante la declaración de estilos específicos para cada elemento. Una declaración de estilo tiene esta sintaxis:

selector { propiedad: valor; }

Echemos un vistazo a cada una de estas piezas por separado:

Selector

El selector es la pieza de contenido que queremos segmentar y diseñar. El selector puede ser un elemento HTML, un nombre de clase o un nombre de identidad.

Al definir un elemento HTML, usamos el nombre de la etiqueta sin el corchete de apertura y cierre. Por ejemplo, la <p> (o etiqueta de párrafo) simplemente sería:
p

Un nombre de clase siempre comienza con un punto. Por ejemplo,
.big-font
El selector de clase no es más que una palabra que asignamos nosotros mismos. No debe de haber espacios en los nombres de clases.

Un nombre de identidad siempre comienza con una almohadilla. Por ejemplo,
#big-font
El selector de identidad , igual que el de clase, es una palabra que asignamos nosotros mismos. La diferencia con la clase es que solo se pueden aplicar a un elemento en cada página, por lo que suele utilizarse para crear la estructura básica de la web y no para textos.

Propiedad

Las propiedades y sus respectivos valores siempre viven dentro de llaves:

p { }

Las propiedades son términos predefinidos dentro de CSS que entienden todos los navegadores web. Son cosas como: font-family, font-size, color, etc.

p {
font-family:
font-size:
color:
}

Una propiedad siempre es seguida por dos puntos (:)

Valor

El valor es el estilo o variable particular que elija asignar a una propiedad. Por ejemplo:

p {
font-family: Arial;
font-size: 16px;
color: grey;
}

Un valor siempre es seguido por un punto y coma (;)

Por lo tanto, el ejemplo anterior le dice al navegador que queremos que todos nuestros párrafos (o cualquier elemento rodeado por una etiqueta <p>) se muestren en fuente Arial con 16 píxeles de tamaño y en color gris.

Muy fácil, ¿verdad? Hagamos otra.

a {
color: yellow;
font-weight: bold;
text-decoration: none;
}

Este ejemplo le indica al navegador que haga todos los enlaces (etiquetas <a>) dentro de nuestro blog de color amarillo, en negrita y no subrayado. (Por defecto, los navegadores muestran los enlaces en azul con un subrayado).

text-decoration: es una propiedad predefinida que todos los navegadores entienden. Después de usar CSS por un tiempo, comienzas a memorizar las propiedades más comunes. Pero para que sea fácil para ti, he creado una hoja de códigos de las propiedades más utilizadas y sus valores disponibles.

Definición de múltiples elementos

Bien, ahora supongamos que queremos utilizar la misma fuente y color para definir los títulos y los subtítulos de las páginas, pero mostrarlos con tamaños de fuente diferentes. Se podría definir cada elemento HTML por separado así:

h1 {
font-family: Verdana;
font-size: 24px;
color: green;
}
h2 {
font-family: Verdana;
font-size: 20px;
color: green;
}
h3 {
font-family: Verdana;
font-size: 18px;
color: green;
}

… pero teniendo en cuenta que las tres etiquetas comparten la misma familia de fuentes y los mismos valores de color, eso crearía una gran cantidad de repeticiones innecesarias. En su lugar, podemos definir varios elementos HTML juntos, separándolos con comas, de esta manera:

h1, h2, h3 {
font-family: Verdana;
font-size: 24px;
color: green;
}

Y ahora, con el fin de cambiar sólo el font-size de los h2 y h3, podemos anular el tamaño de la fuente, definiéndolos justo debajo:

h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}

¡Así es como funciona la cascada! El navegador lee las definiciones de estilo de arriba a abajo en una hoja de estilo en cascada. Esto significa que un estilo que defina más abajo en la hoja de estilo reemplazará cualquier estilo anterior definido anteriormente en la hoja de estilo.

En este caso, no hay necesidad de redefinir la familia de fuentes y el color para h2 y h3 porque ya se han definido arriba. Solo se definen los tamaños de fuente.

Esto también es muy útil si en un futuro decides cambiar la fuente o el color del texto por cualquier otro. Sólo tendrás que hacer el cambio en un sitio en lugar de en tres.

De cualquier manera, ambas formas de escribirlo son correctas, pero es más recomendable el segundo método porque:

1. es más rápido escribir y editar posteriormente y
2. ayuda a tu CSS a cargar más rápido porque estás manteniendo el tamaño del archivo más pequeño eliminando la repetición.

Clases CSS

Ya hemos nombrado al inicio que los selectores pueden ser un elemento HTML, como hemos visto hasta ahora, una clase o una identidad. Estas últimas no las vamos a ver aquí ya que son de un nivel un poco más avanzado, así que nos centraremos en las clases.

Supongamos ahora que quieres poner un borde azul alrededor de todas tus imágenes. ¿Recuerdas la etiqueta HTML para las imágenes? Es <img alt=»» />. Por lo que la definición sería algo así:

img {
border‐width: 1px;
border‐style: solid;
border‐color: #336699;
}

Esto agregará un borde de un píxel de anchura, de estilo sólido y de color azul (el código hexadecimal para un tono de azul es el #336699) alrededor de todas sus imágenes.

Pero ahora te das cuenta de que no quieres que este borde aparezca en todas las imágenes. Hay algunas imágenes en las que no debe aparecer el borde, por ejemplo, en los iconos del menú de la página. Para solucionar esto, lo que hay que hacer es crear una clase específica para estas imágenes.

Recordemos que en CSS todos los nombres de clase empiezan por un punto; además debemos elegir un nombre reconocible y que tenga sentido y no debe llevar espacios.

Nosotros llamaremos a nuestra clase .iconos-menu y la definición quedaría así:

.iconos-menu {
border: none;
}

Después, tendríamos que añadir el nombre de la clase en el HTML. En concreto, a todas las imágenes en las que no queremos que aparezca el borde. La clase se añade en la etiqueta HTML con el signo igual y entre comillas:

<img class="iconos-menu" src="imagenes/icono.png" />

Esto le dirá al navegador que sólo aplique esta declaración de estilo a las etiquetas de imagen con la clase «iconos-menu». De hecho, esta declaración se podría aplicar a cualquier elemento HTML en el que no desee un borde alrededor.

Estilos CSS anidados

Como ya vimos, las etiquetas HTML pueden anidarse unas dentro de otras. Por ejemplo, en las listas, las etiquetas <li>están a nidadas dentro de </ul> de esta manera:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>

Si quisiéramos que todos los elementos de la lista estuvieran en negrita, en nuestro CSS lo definiríamos así:

li{
font-weight: bold;
}

Pero ¿y si quisiéramos aplicarlo solo a una lista desordenada en particular y no a todas? Podríamos hacerlo añadiendo una clase a nuestros elementos de lista. El CSS quedaría así:

li.textoNegrita{
font-weight: bold;
}

Y el HTML así:

<ul>
<li class="textoNegrita">Elemento 1</li>
<li class="textoNegrita">Elemento 2</li>
</ul>

¿Te imaginas añadiendo el nombre de la clase a una lista de 100 elementos o más? ¿sería realmente engorroso? Copy-paste, copy-paste, copy-paste…
Bien, pues para esto están los estilos anidados. En lugar de añadir una clase en cada <li> de la lista, lo agregamos al elemento <ul> donde están anidados todos los <li>, se aplicará el estilo a todos a la vez y nos ahorraremos todo el fastidioso trabajo de ponerlo en cada <li>.
Habría que modificar mínimamente nuestro código. Nuestro CSS quedaría así:

.textoNegrita li{
font-weight: bold;
}

Con esta declaración decimos, que todos los que estén dentro de un con clase .textoNegrita tengan el texto en negrita.
Y el HTML así:

<ul class="textoNegrita">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>

¿Dónde escribimos nuestro código CSS y como lo enlazamos a nuestro HTML?

En general, existen 3 formas de hacerlo:

1. En un archivo externo (esta es la más recomendable)
2. En la misma página web
3. En cada uno de los elementos

En los casos 1 y 2, la sintaxis es la que hemos visto aquí arriba. Para el caso 3, variará mínimamente, ya que nos tenemos que adaptar a las normas del HTML.

1. En un archivo externo

Aquí las declaraciones se escriben en un archivo de texto con la extensión .css.
Y para llamarlo desde el archivo HTML añadiremos el enlace en elde nuestra página de la siguiente manera:

<head>
<title>Título de la página</title>
<link rel="stylesheet" href="estilo.css" type="text/css" />
</head>

En esta línea de código HTML utilizamos varios atributos:

• rel indica de que se trata de una hoja de estilos
• href indica la ruta donde se encuentra el archivo al que estamos llamando
• type indica que se trata de una archivo de texto con una hoja de estilos

2. En la misma página web

Aquí las declaraciones se escriben directamente en el archivo HTML, en la sección <head>. Habrá que crear un elemento <style> y escribir dentro nuestro código CSS.

<head>
<title>Título de la página</title>
<style type="text/css" />
h1, h2, h3 {font-family: Verdana; font-size: 24px; color: green;}
li{font-weight: bold;}
</style>
</head>

3. En cada uno de los elementos

Los estilos también se pueden aplicar a elementos individuales sin que afecten al resto de elementos de la web. Esto lo haremos añadiendo el atributo style dentro de la etiqueta HTML a la que queramos aplicar el CSS.

<p style="font-weight:bold; color:#000;">Texto del párrafo</p>

Como puedes ver, en este caso la sintaxis es diferente. Se utilizan las mismas propiedades y valores, pero dentro de las comillas del atributo <style>.

---

Bien, y me imagino que tu pregunta ahora será, ¿cómo hago para cambiar las css de mi WordPress?
La respuesta la encontraras en el próximo post.

Mientras tanto puedes ir practicando el código CSS.

¡Descarga la hoja de códigos CSS gratis aquí!