5.1. Las CSS: Una historia de estilos

1. Que las plantillas os acompañen

En este apartado vamos a aprender a trabajar con CSS y nos acercaremos a este nuevo estándar a través del siguiente ejercicio en grupo. Pero antes de trabajar algunas reglas, os preguntaréis ¿qué es CSS? Observad para ello el siguiente ejemplo, sin importar que no comprendáis al 100% lo que representa, ya que este ejercicio es una primera aproximación:

Lo que vais a ver es una regla y su codificación (varias como ella formarán las hojas de estilo CSS), que describen el aspecto que debe tener un elemento HTML de una página, concretamente un párrafo (texto delimitado por la etiqueta <p>). Observad ejemplo:

Regla: 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.

p {
  color: rgb(32,32,32);
  text-align: left;
  font-size: 12px;
}

¡Es vuestro turno! Definid las reglas que se deberán seguir en vuestro porfolio. Tened en cuenta todos los elementos que habéis codificado:

El texto que lo forma: cabeceras (h1, h2, etc), párrafos, listas, ... Pensad si deben tener un tamaño determinado, color, alineación, tipo de letra, etc.
Las imágenes: decidis si deben ir enmarcadas con un borde, su grosor y color, alineamiento de la imágen.
Las tablas: con borde o sin él y el tipo de línea si lo tiene, tamaño de letra, color de fondo,...
¿Y la página en sí?¿Queréis que tenga algún color de fondo?

Consensuad las reglas y elaborad un listado.

Clavis dice Fijaos...

Antes de seguir, para un momento y reflexiona sobre lo que has hecho y aprendido. Si te fijas bien, lo interesante de CSS es que funciona formando plantillas, es decir, no es necesario especificar el aspecto de cada uno de los elementos, sino que se pueden definir reglas.

Saber esto te ayudará a identificar qué procedimientos tienes que poner en marcha para realizar algunas de las actividades de este reto; cuáles eran estrategias necesarias y con qué recursos cuentas para resolverlas.

Piensa también en cuáles pueden ser las dificultades que te encuentres a la hora de dar respuesta.

¡Todo esto te será muy útil cuando tengas que enfrentarte a alguna actividad parecida!

Entonces, estarás preparada o preparado para poder resolverla sin problemas con tu experiencia previa.

¡Qué bueno es aprender!

2. Regla->Herencia->Estilo->Plantilla

Vas a conocer cómo utilizar las hojas de estilo CSS con las que poder crear plantillas de estilos que podrás reutilizar posteriormente para aplicarlas a tus páginas web. Aclaremos primero algunos conceptos:

¿Qué es CSS?

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.

Imagen que muestra como HTML se usa para estructurar, CSS para diseño visual y Javascript para la interacción.

¿Por qué necesitamos CSS?

Incluso aunque utilices un entorno WYSIWYG para tus creaciones web, saber un poco de HTML y CSS significa que la plantilla que te ofrecen por defecto ya no marca el techo de lo que puedes hacer con tu blog o tu web basada en dicho entorno visual. Incluso con temas gratuitos simples y un poco de habilidad podrás conseguir unos resultados mucho más elaborados y profesionales.

Aprende a continuación un par de conceptos clave en la elaboración de hojas de estilo CSS:

Reglas, selectores y propiedades

Para identificar los componentes de una regla, veamos primero un ejemplo de dos reglas:

h1, h2 {
  color: black;
  font-size: 16px;
}

h2 {
  font-size: 14px;
}

Observa y localiza en cada una de ellas los siguientes componentes:

Selector: Indica a qué etiquetas 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”.
Propiedades: Especifican exactamente qué se hará con esos los elementos HTML a los que aplica. En la primera regla, las propiedades indican que la 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”). En la segunda regla, la propiedad indica que la regla se refiere al elemento HTML <h2> y que a él se aplicará un tamaño de letra de 14 pixeles.

Imagen de la regla h1{color:green;font-size:18px} en la que el selector es h1 y la propiedad es color y font-size

Reglas simples

Hay cientos de propiedades, de las cuáles trabajaremos unas cuantas más frecuentemente usadas y más útiles en un ejercicio interactivo a continuación. Estas propiedades las hemos utilizado hasta ahora en selectores simples: son los que se refieren a elementos HTML (etiquetas) ya existentes. Tienen el formato:

Partes de una regla CSS: selectores, y pares atributo-valor.

Veamos un ejemplo más:

p a {
  text-decoration: underline;
}

En esta 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 que no se encuentren dentro de un párrafo (<p>).

Reglas complejas

Las reglas más complejas son las que diseñan selectores que sólo se aplican si se especifica mediante el atributo class en el documento HTML que conforma la web. Vamos a aprenderlo con un caso concreto:

p.text-izq {
  text-align: left;
}

En esta regla se juega con una etiqueta párrafo (<p>) y un atributo de clase al que se le ha dado el nombre de text-izq. Es decir, esta regla sólo se aplicará a párrafos (texto dentro de etiquetas <p>) que contienen un atributo “class” con el valor “text-izq” 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.

La cascada

Vas a ver ahora qué efectos produce el estilo en cascada, que es lo que se implementa al utilizar CSS: 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. Pero sin embargo, la herencia se puede interrumpir mediante sobreescritura, llamada también principio de especificidad.

¿Cómo funciona? Observa el ejemplo:

body {
  font-family: Arial;
}

Aquí se está obligando a que la etiqueta <body>, que es la que envuelve el contenido de cualquier página web, tenga un tipo de letra “Arial”. Gracias a la capacidad de herencia de las reglas, por defecto, cualquier elemento hijo como un título o un párrafo va a heredar ese estilo.

Pero podemos cortar esa tendencia utilizando la sobreescritura de estilo en un elemento que deseemos que tenga otra tipología de letra, como:

p {
  font-family: Verdana;
}

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: referirse a un párrafo es más específico que referirse a “los elementos hijos que existen dentro de <body>”.

Finalmente, como otro ejemplo, considera que una regla con un selector “p a” (enlace dentro de un párrafo) tendría precedencia (sobreescribe) sobre una regla con un selector “a” que se refiere a un enlace a secas.

3. Une CSS a HTML y juntos dominarán la web

Imagen de dos cadenas que representa el vínculo a crear entre HTML y CSS. ¡Genial! Ya sabes crear reglas CSS, pero...¿cómo las aplicas ahora a la web que has montado den HTML?, ¿cómo se aplican a una página web? Pues simplemente tendrás que decidir entre una de estas 3 opciones:

Hojas de estilo CSS inline

La primera opción consiste en usar el atributo “style” dentro de una etiqueta (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.

Ventaja

Este tipo de reglas tienen mayor prioridad de todas las reglas.

Desventaja

Se recomienda evitar esta manera de vincular estilos CSS puesto que al tener que aplicarse a cada elemento individualmente, implican un esfuerzo y mantenimiento disparatado.

Hojas de estilo CSS internas

La segunda opción es escribir las reglas dentro de un elemento <style>:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
    ...
</body>
</hmtl>

Ventaja

Puedes ver sobre el propio código, o al consultar el código fuente de la página, las reglas de estilo que se están utilizando.

Desventaja

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.

*Nota: Como has visto en el código superior, hay varios tipos de letras separados por comas. ¿Qué significa?:

En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está, Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge cualquier otro tipo de letra que no sea serif.

Hojas de estilo CSS externas

La última opción es la más usada 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. La manera de hacerlo es mediante la etiqueta <link> y se inserta dentro de <head>

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

La declaración se incluye dentro del elemento y tiene el siguiente aspecto:

A tener en cuenta: 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. Por ejemplo:

Si en hoja_estilo_1.css tenemos la regla:

p a {
  text-decoration: underline;
}

Y en hoja_estilos_2.css otra que dice:

p a {
  text-decoration: none;
  color: blue;
}

¡Conflicto! ¿Cuál se aplicará? El conflicto se resolverá dando prioridad a la propiedad text-decoration de estilos-2.css.

4. Atributos de maquetación básica

Selecciona el atributo adecuado a la función:

Ancho de un elemento:

Rellenar huecos (1):

Alto de un elemento:

Rellenar huecos (2):

Alineamiento vertical dentro de un elemento:

Rellenar huecos (3):

Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (-top, -bottom, -left, -right):

Rellenar huecos (4):

Relleno interior que se añade en los bordes del elemento. A diferencia de margin, cuenta para el tamaño del elemento:

Rellenar huecos (5):

Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento flotante de CSS:

Rellenar huecos (6):

Habilitar JavaScript

El posicionamiento de los elementos de la página web se realiza como si todo el código que pertenece al bloque que se posiciona (bloque delimitado por la etiqueta a la que afecta el atributo de posicionamiento) fuera una caja. Entonces, podrás observar los posicionamientos:

float: right o float: left

Cuando una caja se posiciona con el modelo de posicionamiento flotante, se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha según se indique. En el ejemplo:

La caja 1 es de tipo flotante, por lo que desaparece del flujo normal de la página y el resto de cajas ocupan su lugar. El resultado es que la caja 2 ahora se muestra donde estaba la caja 1 y la caja 3 se muestra donde estaba la caja 2.

Al mismo tiempo, la caja 1 se desplaza todo lo posible hacia la izquierda de la posición en la que se encontraba. El resultado es que la caja 1 se muestra encima de la nueva posición de la caja 2 y tapa todos sus contenidos.

position: static

Es el valor por defecto, en el que después de cada bloque se realiza un salto de línea para añadir a continuación el siguiente elemento segun el orden establecido en la estructura HTML.

position: relative

El posicionamiento relativo desplaza una caja respecto de su posición original establecida mediante el posicionamiento normal. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left. Por ejemplo: top: 10px; desplaza al bloque 10 píxeles hacia abajo.

<div>Bloque 1</div>
<div style="position:relative; top:20px: left;40px;">Bloque 2</div>
<div>Bloque 3</div>

position: absolute

Al aplicar este valor, el bloque se sitúa desde la esquina superior izquierda del elemento que lo contiene siendo definida su posición por los valores de top, right, bottom y left.. El resto de elementos de la página se ven afectados y modifican su posición. Al igual que en el posicionamiento relativo, cuando se posiciona de forma absoluta una caja es probable que se produzcan solapamientos con otras cajas.

position: fixed

Se comporta igual que el posicionaminto absolute, pero tomando la ventana como referencia, no el documento. Entonces, el elemento siempre estará visible incluso haciendo scroll. Es útil para las barras de navegación.

5. Atributos de fuentes y textos

Selecciona el atributo adecuado a la función:

Tipo de letra:

Rellenar huecos (1):

Tamaño de letra:

Rellenar huecos (2):

Peso (normal, negrita, …):

Rellenar huecos (3):

Estilo (normal, cursiva, …):

Rellenar huecos (4):

“Decoraciones” como subrayado, tachado, etc.:

Rellenar huecos (5):

Alineación del texto (izquierda, derecha, etc.):

Rellenar huecos (6):

Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra en mayúsculas:

Rellenar huecos (7):

Habilitar JavaScript

6. Atributos de color y fondos

Selecciona el atributo adecuado a la función:

Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal:

Rellenar huecos (1):

Color del fondo del elemento:

Rellenar huecos (2):

Permite especificar una imagen de fondo:

Rellenar huecos (3):

Permite usar una imagen a modo de mosaico en diferentes modalidades:

Rellenar huecos (4):

Crear un efecto de sombra para un elemento:

Rellenar huecos (5):

Habilitar JavaScript

7. Atributos de listas y bordes

Selecciona el atributo adecuado a la función:

Usar la imagen especificada como viñeta para la lista:

Rellenar huecos (1):

Diferentes estilos de viñetas y estilos de numeración para elementos de lista:

Rellenar huecos (2):

Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.):

Rellenar huecos (3):

Color del borde:

Rellenar huecos (4):

Diferentes estilos para el borde (sólido, puntos, etc.):

Rellenar huecos (5):

Permite crear esquinas redondeadas para un elemento:

Rellenar huecos (6):

Habilitar JavaScript

8. Ejemplo de portfolio con estilo

Imagen que presenta la web de una persona que ha creado su portfolio digital. ¡Es la hora de mostrar tu portfolio aplicando el gran potencial que le pueden aportar los estilos CSS!

Más abajo hay un ejemplo de portfolio al que se le aplican estilos. El proceso de realización del mismo es:

Se crea un fichero llamado portfolio.html con el código y el contenido de la página web del portfolio.
Se crea un fichero llamado estilo-portfolio.css en el se escribe el código que dará formato a la página web básica del portfolio. Hay que incluir en el fichero HTML el vínculo a dicho fichero. ¡No lo olvides, si no, no se aplicará ningún estilo!
Revisa y modifica los estilos para que se adapten a lo que se consensúe en el grupo.
Observa como se posiciona en un lateral los índices o listas creadas y que apuntan a diferentes zonas del contenido. Para ello se ha utilizado el atributo de clase "lateral" para el que se han creado reglas que modifican las propiedades de margen y de posicionamiento. El resto del cuerpo de la página tiene un margen lateral de inicio igual al borde lateral de final de la columna, para que no haya solapamientos.

Lumen dice: ¿Quieres ver el código?

Aquí tienes un ejemplo de código que crea un menú lateral que, por supuesto, se puede modificar y adaptar a las necesidades de cualquier página web:

El código HTML

<body>
	<div class="lateral">
		<header>Indice</header>
		<ul class="menuVert">
			<li><a href="#">item 1</a></li>
			<li><a href="#">item 2</a></li>
			<li><a href="#">item 3</a></li>
			<li><a href="/">item 4</a></li>
		</ul>
	</div>
	<div class="principal">
		Aquí está el contenido de este bloque.
		Rellena con suficiente espacio para que supere
		la altura de la pantalla y aparezca el scroll.
	</div>
</body>

El estilo CSS

@charset "utf-8";
html{
height:100%;
}
body{
width: 80%;
height: auto;
margin:0 auto;
background: aliceblue;
}
.lateral{
box-sizing: border-box;
width: max(8%, 200px);
display: inline-block;
position: fixed; padding-top: 30px
}
.principal{
margin-left: max(10%, 200px);
padding: 0 10px;
height: 100%;
text-align: justify;
background:white;
}
/*Hasta aquí ya tenemos un menu lateral fijo,
ahora viene ponerlo bonito*/
.lateral header{
font-weight: bold;
font-size: 1.5rem;
text-align: center;
border-bottom: 1px solid black;
background: aqua
}
.lateral ul{
list-style:none;
padding-left:0;
margin-top:0;
}
.lateral ul li{
display:block;
position: relative;
padding: 8px 10px;
margin-left:0;
border-bottom:1px solid #060696
}
.lateral ul li a{
color: black;
text-decoration:none;
}
.lateral ul li a:after{
content: ' ';
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.lateral ul li:hover, .lateral ul li:hover a{
background: blue;
color: white;
}

Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0