HTML-CSS

Hojas de estilos: CSS

Página 1/12

HOJAS DE ESTILOS: CSS
INTRODUCCIÓN
Con el HTML se intento desde un principio que la definición de los estilos lógicos se
centrase más en el contenido de la información que no en su presentación. Sin embargo el
gran éxito de Internet y por tanto la aparición de importantes intereses comerciales exigían un
control cada vez más rígido sobre lapresentación final del documento.
Con la intención de volver a la idea original de separar el contenido de la presentación y de
ofrecer mayores y más fáciles posibilidades de presentación el W3 Consortium, empezó a
discutir a principios de 1995 la utilización de las Hojas de Estilo (CSS) en la Web. La
intención era incluirlas en las especificaciones 3.0 del HTML pero las discusiones se
extendierontanto que al final se impusieron las extensiones propuestas por Netscape dando
lugar a la versión 3.2 del HTML, aunque la versión 3.0 del Explorer ya las soportaba en parte.

SINTAXIS CSS
En el momento de definir los estilos debemos tener en cuenta que estos se pueden
declarar directamente sobre la etiqueta HTML o que podemos definirlos en su conjunto para
toda la página HTML.

DEFINICIÓN ENLA PROPIA ETIQUETA HTML
La sintaxis básica para especificar un estilo en una etiqueta determinada es:
...

Donde etiqueta representa un TAG estándar del HTML y la palabra STYLE es el atributo
que indica que a dicha etiqueta le vamos a asociar un estilo. El resto ya es la definición
propia del estilo que viene definido por un par propiedad:valor separados entre si por
dos puntos y delresto de pares por un punto y coma.
En propiedad indicamos que característica (tipo de fuente, color, etc...) queremos
cambiar y en valor el valor que le damos.
Por ejemplo si a un párrafo le queremos dar un tamaño de fuente 10 y un margen izquierdo
de 20 puntos.

Mi Primer párrafo con Estilo


Pero la asignación individual a cada etiqueta de los estilos puede resultar un poco pesadatambién contamos con la posibilidad de definirlos de forma global para toda la página.

DEFINICIÓN GLOBAL
DENTRO DEL DOCUMENTO HTML
Para definir una hoja de estilos de forma global en un documento HTML se emplea la
etiqueta dentro de la cabecera del documento HTML … de la
siguiente manera:








Hojas de estilos: CSS

Página 2/12

Holaadiós



Observa como la definiciónde estilos va encerrada entre comentarios para asegurar la
compatibilidad con los navegadores que no las soporten. Esta sintaxis funciona tanto en
Explorer 3.X y superiores como en Opera, Mozilla y Netscape 4. La definición del
estilo se realiza de forma similar a la indicada arriba:
etiqueta {propiedad:valor; .........}

con la diferencia de que colocamos entre llaves {} la definición delestilo. Un ejemplo típico
sería:




donde estamos indicando que todo el texto que se encuentra entre todas las etiquetas
será de color azul , y el que esta entre las etiquetas será de un
tamaño de 10 puntos y tendrá un margen izquierdo de 20 puntos.
Otro detalle interesante es que podemos introducir comentarios en un hoja de estilos
mediante las etiquetas /*........*/ de la mismamanera que se hace por ejemplo en el
lenguaje C.
EN UN FICHERO DE TEXTO CON EXTENSIÓN “CSS”
Los estilos también podemos definirlos en un fichero externo y luego referenciar las desde
el código HTML. Esta es sin duda alguna una de sus mayores virtudes, ya que nos permite
crear una misma hoja de estilos para toda la Web que luego llamaremos desde cada una de
las páginas. De esta manera,cambiando el fichero que contiene la hoja de estilos podemos
cambiar el aspecto de todas las páginas de nuestra WEB.
Mediante la etiqueta podemos enlazar un archivo .css a una página HTML.





…



El fichero hoja_estilos.css es un simple fichero de texto con extensión .css en el que
definimos la hoja de estilo en función de la sintaxis que hemos descrito anteriormente.
/*Fichero...