Hojas de estilo

Volver al índice   

¿Qué es CSS?

 CSS es un lenguaje sencillo para la aplicación de estilos a un elemento XML. Un documento XML puede estar formateado de muchas diferentes formas y propósitos por lo que sería muy útil utilizar un sólo documento XML y diferentes posibles formateos dependiendo del uso que se le vaya a dar al documento..

 CSS, Cascading Style Sheets, hojas de estilo en cascada, fue introducido en 1996 como el standar para añadir información de estilo a los documentos HTML. Pero este uso estaba restringido sólo a las etiquetas propias de HTML. Con XML estas reglas de estilo pueden aplicarse a todos los elementos.

 CSS tiene dos versiones denominadas CSS1 y CSS2 aparecidas en 1996 y 1998 respectivamente. Aunque el problema en este caso no es el standar, sino el procesamiento de este puesto que en la actualidad no todos los navegadores están preparados para su procesamiento.

 CSS se expresa mediante reglas en un fichero de texto plano. Cada regla contiene el nombre del elemento al que se aplica y el estilo definido.

<--------------------------->

 Las hojas de estilo vienen a intentar volver a separar en un documento el estilo lógico del estilo físico, dejando este último en bloques de definición de estilos separados de la estructura del documento.

 CSS son las siglas de "Cascade StyleSheet". Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML, y trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación) del documento.

 El estilo lógico se refiere a la lógica del documento: cabeceras, párrafos, ... no se preocupa de la apariencia final, sino de la estructura del documento. Por el contrario, el estilo físico no se preocupa de la estructura del documento, sino por la apariencia final: párrafos con un cierto tipo de letra, tablas con un determinado color de fondo, ...

 La finalidad de las hojas de estilo es crear unos estilos físicos, separados de las etiquetas HTML (en lugar de como parámetros de las etiquetas), y aplicarlos en los bloques de texto en los que se quieran aplicar. Estos estilos podrán ser modificados en algunas ocasiones desde JavaScript, y esto empieza a darnos un poco más de interactividad.

 Por otra parte, tenemos las capas, que vienen a darnos la solución al problema de poner elementos justo en la posición que queramos, evitándonos tener que hacer artificios para obtener el resultado buscado. Una capa será una parte más del documento que puede ser situada en cualquier posición del mismo, consiguiendo que se solape sobre algunos elementos si es lo que necesitamos, adecuando sus márgenes y otras propiedades a lo que queramos hacer...

extraído de www.webestilo.com

<--------------------------->

 Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la página lo haremos de una sola vez 

En definitiva, lo que hacen las hojas de estilos es que mantienen el texto de nuestras páginas con el tamaño, color, tipo de fuente, etc.. tal y como nosotros le indiquemos. Pueden aplicarse a todo el contenido de una página o pueden ser independientes.

 Se pueden insertar en la misma página o en un archivo CSS fuera de ella pero llamándola con un la etiqueta LINK REL:

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

EJEMPLOS DE HOJAS DE ESTILO

 Este sería uno para toda la página que controlaría el color de los vínculos y color al recibir el enfoque del ratón sobre él:

Estilo general para toda la página aquí

 Este otro se pueden controlar individualmente. Podemos elegir que tipo de fuente, color, tamaño, etc.. a distintos textos en la misma página:

Estilos individuales aquí

 Este otro es el más sencillo y práctico por que se pueden aplicar desde la barra de formato del programa de diseño Web. Hay un recuadro llamado Estilo en la parte izquierda de dicha barra. Cuando la desplegamos podemos seleccionar el tipo de estilo que queramos que está relacionado con el archivo .css que nosotros le hemos vinculado a la página:

Código y archivo para hoja de estilo .css aquí

Las hojas de estilo referenciándolo a un archivo .css contienen el código de distintas fuentes con su tipo de fuente, tamaño, colores, celdas, líneas, etc...

Cuando escribimos un texto, lo seleccionamos y desplegamos en la barra de herramientas un recuadro llamado Estilo y seleccionaremos uno de la lista.

Esto lo que hace es mantener el tipo de fuente aunque el usuario no lo tenga configurado del modo óptimo.

Esta línea de código hace referencia a un archivo .css de hoja de estilo que es el que contiene el código de las distintas fuentes.

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

Además de las fuentes también se pueden insertar otras cosas como el fondo de página, colores, etc..

Prueba a cambiar la fuente en la barra de herramientas seleccionando estos pasos y comprobarás que el texto no cambia:

Ver + Tamaño de la fuente + selecciona el tamaño que quieras

Este texto de ejemplo sin hoja de estilo cambiará...

Vínculos externos a YoMaster sobre hojas de estilos:

http://www.desarrolloweb.com/manuales/2/#descargas

http://www.webestilo.com/css/

http://www.tejedoresdelweb.com/307/article-1061.html

http://www.ignside.net/man/misc/csstest.html

http://www.xhtmlcoder.com/css-coder.htm