Cómo funcionan las hojas de estilo

Las hojas de estilo en cascada nos permiten redefinir las reglas que utiliza el navegador para presentar una página del Web. Todos los navegadores tienen sus reglas. Así, por ejemplo el HTML define que las cabeceras del nivel uno (el texto que está entre las etiquetas <H1> y </H1>) se muestre como un texto alineado a la izquierda, un par de puntos mayor que el resto, en negrita y en la fuente Times Roman.

En realidad el concepto es bastante sencillo. En nuestro documento hasta ahora, cuando poníamos un título, mézclabamos con es información, información sobre el color el tipo de fuente etc. Ahora debemos cambiar nuestra manera de pensar, de forma que en nuestro documento html nos limitamos a decir qué es cada cosa.

Image

Luego con nuestra hoja de estilos hos haríamos unas reglas que fueran:

Quote títulos: De color rojo, a tamaño 14 píxelex, centrados y subrallados.

Párrafos: en color azul, tamaño 12 píxeles,

listas: indentadas 2 espacios a la derecha.

Veamos un ejemplo de cómo redefiniríamos la aparencia de un encabezado y un párrafo con HTML y cómo lo haríamos con CSS.

<HTML>
<HEAD>
<TITLE> Ejemplo 1 con html</TITLE>
</HEAD>
<BODY>

<H1><FONT FACE=”tahoma, arial, sans-serif” COLOR=”#B22222” size=”4”>1.- Primer título</FONT></H1>
<P> <font FACE=”tahoma, arial, sans-serif” COLOR=”#666666” size=”2”> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </font></P>

<H1><FONT FACE=”tahoma, arial, sans-serif” COLOR=”#B22222” size=”4”>2.- Segundo título</FONT></H1>
<P><font FACE=”tahoma, arial, sans-serif sans-serif” COLOR=”#666666” size=”2”> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí.</font> </P>

<H1><FONT FACE=”tahoma, arial, sans-serif sans-serif” COLOR=”#B22222” size=”4”>3.- tercer título</FONT></H1>
<P><font FACE=”tahoma, arial, sans-serif sans-serif” COLOR=”#666666” size=”2”> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </font></P>

</BODY>
</HTML>

En este documento tenemos tres títulos y tres párrafos. Cómo los elementos <h1> son tan feotes, hemos modificado el tipo de letra, el color y el tamaño de los títulos. Cómo podéis ver hemos tenido que defnir el formato de cada título y de cada párrafo hemos utilizado font tags, definiendo la fuente y el color. Hemos tenido que introducir cada tag varias veces, y eso con este documento que prácticamente apenas tiene contenido. Con CSS sólo tendríamos que haberlo hecho una vez.

<html>
<head>
<title> Ejemplo 1 con css</title>

<style type="text/css">
<!--

H1 {
font-family: tahoma, arial, sans-serif;
color: #B22222;
font-size: 18px; }

P {
font-family: tahoma, arial, sans-serif;
color: #666666;
font-size: 12px; }
-->
</style>

</head>
<body>

<h1>1.- Primer título</H1>

<p> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </P>

<h1>2.- Segundo título</H1>

<p> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </P>

<h1>3.- tercer título</H1>

<p> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </P>

</body>
</html>

Todo lo que necesitamos para definir colores, tipo de letra etc, está dentro del encabezado del documento utilizando la etiqueta <style>, que veremos a lo largo de estos artículos, como funcionan. Cómo podemos observar, las etiquetas <font> han desaparecido por completo y ahora el documento está mucho más clarito y fácil de leer. Si queremos cambiar el formato de los títulos, sólo tendremos que cambiarlo una vez, en el encabezado, y todos los títulos cambiarán. Y al igual que podemos definir los párrafos o los títulos, podemos cambiar cualquier otra cosa. CSS es una tecnología muy potente que nos permite un control mucho mayor que con simple HTML.

Volver al índice

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s