Hojas de estilo CSS (1/2)

Introducción

En este capítulo, vamos a estudiar conceptos básicos de CSS y en concreto de CSS3. No todas las funcionalidades de CSS3 se encuentran implementadas en las últimas versiones de los navegadores y algunas de ellas se encuentran aún en estado experimental. Por esta razón, en ocasiones estos nuevos estilos deberán ser precedidos por prefijos tales como –moz- o -webkit- para ser efectivamente interpretados.

Estructura básica

Con respecto a la estructura, básicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en línea). Esta clasificación está asociada con la forma en que los elementos son mostrados en pantalla.

Los elementos block se posicionan uno sobre otro hacia abajo en la página. Por ejemplo, los elementos tipo <div> se posicionan por defecto como block.
Los elementos inline se posicionan uno al lado del otro en la misma línea y sin ningún salto de línea a menos que ya no haya más espacio horizontal para ubicarlos. Por ejemplo, los elementos tipo <span> se posicionan por defecto como inline.

Casi todos los elementos estructurales en nuestros documentos serán tratados por los navegadores como elementos block por defecto. Esto significa que cada elemento HTML que representa una parte de la organización visual (<section>, <nav>, <header>, <footer>, <div>, etc.) será posicionado debajo del anterior, y si no queremos que sea así debemos indicarlo mediante estilos. Estas propiedades se definen mediante el estilo display, que además de block e inline, también puede tener otros valores, como table (estilo tabla), list-item (estilo ítem de lista li) o none (no mostrar el elemento), entre otros. De la misma manera que utilizamos display para estructurar nuestro documento, utilizando la propiedad float podemos hacer que nuestros elementos pasen de comportarse como una caja (box) a "flotar" en nuestro documento, para permitirnos colocar unos al lado de otros. Esta propiedad tomará los valores none (se comportará como una caja), left (se alineará a la izquierda o right (se alinerará a la derecha).

Estilos en línea

Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo style. El siguiente ejemplo muestra un documento HTML simple que contiene el elemento <p> modificado por el atributo style con el valor font-size: 20px. Este estilo cambia el tamaño por defecto del texto dentro del elemento <p> a un nuevo tamaño de 20 pixeles.

<!DOCTYPE html >
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Título de la página</title>
	</head>
	<body>
		<p style="font-size: 20px;">Mi texto</p>
	</body>
</html>

La técnica anterior es una buena manera de probar estilos y obtener una vista rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento, ya que tendríamos que escribir y repetir cada estilo en cada uno de los elementos que queremos modificar.

Estilos embebidos

Una alternativa mejor es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes:

<!DOCTYPE html >
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Título de la página</title>
		<style>
			p { font-size: 20px; }
		</style>
	</head>
	<body>
		<p>Mi texto</p>
	</body>
</html>

Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código más consistente y actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio web.

Archivos externos

La solución es mover todos los estilos a un archivo externo y luego utilizar el elemento <link> para insertar este archivo dentro de cada documento que los necesite. Este método nos permite cambiar los estilos por completo simplemente incluyendo un archivo diferente. También nos permite modificar o adaptar nuestros documentos a cada circunstancia o dispositivo, como veremos más adelante.

<!DOCTYPE html >
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Título de la página</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<p>Mi texto</p>
	</body>
</html>

El lugar óptimo para almacenar nuestro(s) archivo(s) de estilos sería dentro de una subcarpeta llamada css. Otro importante elemento que va dentro de la cabecera del documento es link. Uno de los usos más comunes para link es la incorporación de archivos con estilos CSS, donde el atributo rel significa “relación” y es acerca de la relación entre el documento y el archivo que estamos incorporando por medio de href. En nuestro caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el archivo style.css es un archivo CSS con estilos requeridos para presentar la página en pantalla, algo que veremos más adelante. También utilizaremos la etiqueta link para añadir tipografías de fuentes.

Referencias

Existen varios métodos para seleccionar qué elementos HTML serán afectados por unas determinadas reglas CSS:

referencia por la palabra clave del elemento
referencia por el atributo id
referencia por el atributo class

Referenciando con palabra clave

span { font-size: 20px; }
div { background-color: black; }
body { color: red; }

Esta técnica es útil cuando quiero referenciar todos los elementos del mismo tipo, pero para seleccionar un elemento HTML específico desde las reglas de nuestro archivo CSS, debemos usar id o class. Referenciando con el atributo id El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento. Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada con el símbolo # seguido del valor que usemos para identificar el elemento:

#texto1 { font-size: 20px }

Y en nuestro archivo HTML:

<!DOCTYPE html >
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Título de la página</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<p id="texto1">Mi texto</p>
	</body>
</html>

El resultado de este procedimiento es que cada vez que hacemos una referencia usando el identificador texto1 en nuestro archivo CSS, el elemento con ese valor de id será modificado, pero el resto de los elementos <p>, o cualquier otro elemento en el mismo documento, no serán afectados. Dada su especificidad, el atributo id es de hecho más apropiado para referencias en Javascript, como veremos más adelante. Referenciando con el atributo class La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar. Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes del nombre:

.texto1 { font-size: 20px }

Y en nuestro archivo HTML:

<!DOCTYPE html >
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Título de la página</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<p class="texto1">Mi texto</p>
		<p class="texto1">Otro texto</p>
		<p>Otro texto sin estilo</p>
	</body>
</html>

La ventaja de este método es que insertar el atributo class con el valor texto1 será suficiente para asignar estos estilos a cualquier elemento que queramos, sin afectar al resto del mismo tipo. De este modo, los dos primeros elementos de tipo <p> anteriores comparten la misma regla y ambos serán afectados por el estilo texto1, mientras que último elemento <p> conservará los estilos por defecto otorgados por el navegador. También es posible utilizar referencias más complejas, como la siguiente en la cual creamos una regla que referencia la clase llamada texto1 pero solo para los elementos de tipo <p>. Si cualquier otro elemento tiene el mismo valor en su atributo class no será modificado por esta regla en particular.

p.texto1 { font-size: 20px }

Referenciando con pseudo clases

CSS3 también incorpora nuevas pseudo clases que hacen la selección aún más específica. El ejemplo siguiente contiene cuatro elementos <p> que, considerando la estructura HTML, son hermanos entre sí e hijos del mismo elemento <div>. Usando pseudo clases podemos aprovechar esta organización y referenciar un elemento específico sin importar cuánto conocemos sobre sus atributos y el valor de los mismos:

<!DOCTYPE html >
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Título de la página</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div id="contenedor">
			<p class="texto1">Mi texto 1</p>
			<p class="texto2">Mi texto 2</p>
			<p class="texto3">Mi texto 3</p>
			<p class="texto4">Mi texto 4</p>
		</div>
	</body>
</html>

p:nth-child(2){
	background: #999999;
}
p:nth-child(odd){
	background: #333333;
}
p:nth-child(even){
	background: #666666;
}

Lo que la primera pseudo clase está realmente indicando es algo como: “el hijo en la posición...” por lo que el número entre paréntesis será el número de la posición del hijo (el índice). De este modo, la primera regla anterior está referenciando cada segundo elemento <p> encontrado en el documento, mientras que als siguientes referencian, respectivamente, las ocurrencias impares (1 y 3) y pares (2 y 4) de los elementos <p>. Existen otras importantes pseudo clases relacionadas con esta última, como first- child, last-child y only-child. La pseudo clase first-child referencia solo el primer hijo, last-child referencia solo el último hijo, y only-child afecta un elemento siempre y cuando sea el único hijo disponible. Estas pseudo clases en particular no requieren palabras clave o parámetros, y se implementarían de la siguiente forma:

p:last-child{
	background: #999999;
}
p:first-child{
	background: #333333;
}
p:only-child{
	background: #666666;
}

Como resumen de lo anterior y del final del capítulo, se recomienda al alumno la visualización de los siguientes videos, extraídos del canal de YouTube pildorasinformáticas:

Ver vídeo

CSS I

Ver vídeo

CSS II. Modelo caja contenedor