Hasta ahora hicimos las siguientes cosas:
- Clase 1: párrafos, encabezado, y cuerpo
- Clase 2: negrita, cursiva, enlaces
- Clase 3: imágenes, título de página y títulos de secciones
- Clase 4: Listas numeradas y no numeradas, tablas
Pero en ningún momento definimos el formato de cada objeto: color, tamaño, posición, etc.
En este tutorial de HTML y CSS de W3schools se explican tres maneras de dar formato a una página en HTML: en el encabezado, entre el contenido, y mediante el uso de una hoja de estilo externa. Esta tercera es muy superior a las otras, debido a que permite cambiar de hoja de estilo dando formato a todos los elementos de la página.
¿Y para qué sirve cambiar de hoja de estilo? Por ejemplo, para darle alto contraste si uno es un usuario con problemas de visión. O para tener una hoja de estilo personalizada en el caso de ser una persona daltónica o con algún tipo de ceguera del color.
Mi primer hoja de estilo
Vamos a necesitar un archivo HTML que tenga varios elementos, por ejemplo, este:
<h1>Comienzo de clases</h1>
<h2>Resultados del campeonato de truco</h2> <h3>Intercolegial diciembre 2015</h3>
<ol>
<li>Pérez</li>
<li>Gómez</li>
<li>Fernández</li>
<li>Rodríguez</li>
</ol>
<h2>Campamento febrero 2016</h2> <h3>Lista de elementos a traer</h3>
<ul> <li>Birome</li>
<li>Cuaderno</li>
<li>Hilo de pizza</li>
<li>Instrumento musica (no piano)</li>
</ul> <p>Se ruega a los señores padres enviar a sus hijos aseados y retirarlos al finalizar la jornada en forma puntual.</p> <p>No se aceptan mascotas.</p>
Para tener una página web deberemos agregarle, como siempre, el encabezado que indica el tipo de archivo, la codificación que permite ver los acentos y eñes, y esta vez le vamos a añadir un enlace a la hoja de estilo:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="miestilo.css"> <title>Escuela</title> </head> <body> .............. </body> </HTML>
El archivo miestilo.css puede contener indicaciones acerca de cómo será cada uno de los elementos (o sólo algunos de ellos), pudiendo obtener resultados tan distintos como estos:
En el primer caso, el encabezado H1 es de color verde (aquí se puede ver una tabla de colores y códigos), el encabezado H2 es de otro tono de verde, con un borde a la izquierda punteado (“dotted”) cuyo ancho es de un caracter (1em) y del mismo color del texto. En el segundo caso, el encabezado H2 se posiciona a la izquierda porque en su hoja de estilo dice que “flote a la izquierda” y que su ancho sea de 10 caracteres (float: left; width: 10em;)
h1 {color: #0B6121;}
h2 {color: #088A29; border-left: dotted 1em #088A29;}
h3 {color: #04B431; border-left: dotted 1em #04B431;}
p {color:#170B3B; width: 60%; margin-left: 20%; border: 1px dotted #088A29;}
li {list-style-type:square; width: 60%; margin-left: 20%;}
h1 {color: #B45F04; text-align: right; border: 1px solid #61210B; width: 60%; float:left;}
h2 {color: #FF8000; border-right: solid 0.1em #FF8000; width: 10em; float: left; padding-top: 2em; padding-bottom: 1em;}
h3 {padding-top: 1em; padding-bottom: 1em; color: #8A4B08;}
p {color:#000; width: 80%; padding: 0.2em; font-variant:small-caps;}
li {list-style-type:square; width: 60%; margin-left: 20%;}
A partir de estos primeros experimentos, habrá mucho que investigar sobre el tema. Pero lo importante será tener claro que el formato debe estar separado del contenido.
Tampoco se deben utilizar colores para brindar contenido (algo como “los alumnos que se visualizan en color rojo adeudan papeles en administración”).
Aquí hay un completísimo tutorial de CSS donde se explican las nociones más importantes de este lenguaje.
