Home

      Comment post English
x

Select your language

EnglishEspañol

Tutorial de CSS


Be the first to like it


Introducción a CSS

Si estás leyendo este curso sobre CSS lo más seguro es que ya sepas HTML o que te encuentres en proceso de aprendizaje de dicho lenguaje de diseño Web.

De hecho, este curso de CSS (Cascading Style Sheets - Hojas de Estilo en Cascada) es una continuación del Curso de HTML, escrito también por mí; complemetándose ambos muy bien. En aquel tutorial se cubren por completo todos los aspectos de HTML, y fue hecho con la intención de que las personas que no saben nada de HTML terminen sabiendo todo acerca del lenguaje. También se incluyen muchos ejemplos para practicar lo aprendido. Por lo tanto se sugiere que tengan un sólido conocimiento de HTML para continuar leyendo este tutorial, de lo contrario pueden estudiarlo en aquel curso que menciono, y luego volver aquí para aprender CSS. Si ya saben HTML entonces continuemos.

En un principio de la World Wide Web o WWW (Telaraña o Red Mundial), con HTML (Hypertext Markup Language - Lenguaje de Marcado de Hipertexto) se debía diseñar todo, tanto la parte estructural de una página así como la estética. La parte estructural define los objetos u elementos que se presentan en una página (párrafos, listas, tablas, formularios, etc), mientras que la parte estética define cómo se ven esos elementos, o sea su aspecto visual.

Por lo que todo el diseño de páginas se debía cubrir con etiquetas o comandos HTML, lo cual hacía más complicada y monótona la tarea cuando era necesario definir estéticamente muchas páginas que deberían verse igual, reiterando una y otra vez las mismas etiquetas que definían un mismo aspecto estético para varias páginas. Se requería hacer algo; por lo que técnicos y expertos en la materia, comenzaron a desarrollar distintas implementaciones o lenguajes para simplificar el trabajo, haciendo que con un sólo código fuente individual, pueda definirse la estética completa de distintas páginas, ahorrando así tiempo a los diseñadores Web.

Varios lenguajes fueron desarrollados y presentados, pero todavía faltaba un tiempo hasta que alguno fuera aceptado. Sin embargo dos de esos lenguajes, presentados en octubre de 1994, fueron tomados como moldes para el futuro desarrollo de un lenguaje de definición de estilos para páginas Web; se llamaban CHSS (Cascading HTML Style Sheets - Hojas de Estilo en Cascada HTML) y SSP (Stream-based Style Sheet Proposal - Propuesta de Hojas de Estilo en Chorros). CHSS ya presentaba ciertas similitudes con CSS.

En octubre de 1994 Tim Berners-Lee, creador de la WWW y del lenguaje HTML, fundó la W3C (World Wide Web Consortium o Consorcio de la WWW). La misma se convertiría en la organización referente que establecería desde entonces los lenguajes, normas y estándares de diseño Web a ser seguido por diseñadores de páginas así como por desarrolladores de browsers o navegadores Web.

Desde entonces, la W3C se involucró en el desarrollo de un lenguaje de definición de estilos para páginas Web y hacia diciembre de 1996 se publicó la primera versión de CSS. Ese mismo año fue lanzada la versión de Internet Explorer 3, la cual soportaba pocos elementos del recientemente creado lenguaje de estilos. Recién la versión para Macintosh de Internet Explorer 5, publicada en marzo de 2000, tendría un soporte completo de CSS 1.

El 12 de mayo de 1998, la W3C publicó las normas y estándares de la versión CSS 2, sin embargo pocos browsers la adoptarían por completo; ni siquiera lo hicieron de manera correcta. Dichas complicaciones hacían que se demore la implementación de CSS por parte de los diseñadores Web; a pesar que Internet Explorer 5, Netscape 4 y Opera ya lo soportaban; aunque como se dijo antes, lo hacían de manera ambigua y cada uno a su manera. Esas ambigüedades en la forma de implementarse CSS por parte de los desarrolladores de browsers o exploradores Web, daría comienzo a la utilización de diversos trucos por parte de los diseñadores Web para hacer que sus páginas se vean igual en todos los navegadores Web; una costumbre que continúa hasta nuestros días; ya que algunos browsers, como Internet Explorer, implementaron de manera distinta las normas establecidas por la W3C; haciendo que los diseñadores tengan que definir los aspectos estéticos de sus páginas para cada browser; todo eso lo analizaremos detalladamente en este curso de CSS.

Luego, en julio de 2007, fue publicada la versión de CSS 2.1 (en realidad fue publicada primero en febrero de 2004 pero en junio de 2005 fue retirada y relanzada como versión de CSS sugerida por la W3C), la cual corrige muchos errores de la versión de CSS 2. Tanto Internet Explorer 8 como Firefox 2 y 3 soportan casi por completo la versión de CSS 2.1.

La versión de CSS 3 todavía no es soportada por completo en todos los browsers y no todos sus elementos de definición de estilos y propiedades funcionan en los distintos exploradores Web. Por ejemplo una de las propiedades de CSS 3 permite definir esquinas redondeadas a elementos <div> de HTML, la misma es soportada a partir de IE 9, Firefox 4, Chrome 5 y Opera 10.5.

La versión de CSS 4, aún en desarrollo, no es soportada por ningún browser popular aún.

Como se mencionó antes, durante los primeros años de la Web, tanto la parte estructural (elementos como tablas, párrafos, listas, formularios, etc.) como la estética (tamaños, colores de texto y fondos, posiciones, trazado, etc) debían definirse con etiquetas HTML. O sea que se debían incluir atributos en las distintas etiquetas para darle formato visual a los distintos elementos incluidos en las páginas. Por ejemplo, algo tan simple como cambiar el color o tamaño de la fuente del texto de las páginas que forman parte de un sitio, requería que cada una de las páginas fueran modificadas en la parte que define el aspecto visual del texto.

Pero luego, con la aparición de CSS, este tipo de tareas se pueden realizar modificando solamente una línea que define el aspecto visual del texto o cualquier otro elemento o grupo de objetos a través de todo el sitio, facilitando mucho el proceso de desarrollo de un sitio Web.

Por lo tanto, HTML se utiliza para colocar los elementos u objetos en las páginas y CSS para darles forma y atractivo visual.

El nombre de CSS proviene de las siglas Cascading Style Sheets (Hojas de Estilo en Cascada), lo de cascada (sinónimo de jerarquía) se debe a que los atributos que especifican el aspecto visual de cada elemento se definen en jerarquías que van de nivel general (menor jerarquía) a nivel específico o local (mayor jerarquía); ya les explicaré más adelante cómo funciona eso, por ahora no se preocupen.

Una analogía arquitectónica válida, sería comparar a HTML con la parte estructural de un edificio (cimientos, vigas, paredes, techos) y a CSS con la parte de diseño del mismo (pintura, empapelado, decoración interior y exterior). Así, el trabajo combinado de HTML y CSS da como resultado páginas visualmente ricas.

Antes, las páginas Web no eran tan ricas visualmente como ahora; y como ya se dijo, toda la parte estética del diseño dependía de HTML. Claro que la variedad de elementos estéticos de las páginas Web en aquellos tiempos era inferior a los que se pueden encontrar hoy día.

Por aquel entonces se podía cambiar el color, el tamaño y el tipo de fuente del texto; cambiar el color de fondo de la página así como incluir una imagen de fondo; alinear los elementos de la página (texto, imágenes, tablas, etc) a la izquierda, centro o derecha; y para distribuir los elementos en posiciones específicas se utilizaban tablas con bordes invisibles de tamaño "0" (Para más información ver el tutorial de HTML).

La mayoría de las etiquetas y atributos HTML que se utilizaban para mejorar estéticamente las páginas, quedaron desaprobados (deprecated en inglés) en la versión HTML 4.01; sin embargo, hasta el día de hoy la mayoría de ellos todavía pueden ser visualizados en los exploradores Web si se especifica en el <!Doctype> del código fuente una versión de HTML transicional (no estricta). Ya se habló de todo eso en la cuarta parte del Curso de HTML. A pesar que funcionen no se recomienda incluir estos elementos y atributos; ya que mientras algunos pueden ser visualizados en ciertos browsers, puede que no se visualicen en otros; sin mencionar que es probable que en un futuro todos los browsers dejen de mostrarlos, convirtiendo a la página en incompatible con exploradores Web futuros. Además es importante destacar que los beneficios visuales ofrecidos por estas etiquetas y atributos de HTML son limitados en comparación con la capacidad de diseño estético con que cuenta CSS, el cual brinda un sin fin de combinaciones visuales que permiten el desarrollo de páginas Web mucho más bonitas que las de antes.

A continuación se mencionan algunas de las etiquetas HTML desaprobadas por el consorcio W3C:

<center>: Centra todo tipo de elementos como texto, imágenes, tablas, etc.
<font>: Utilizada para indicar el color, tamaño y tipo de fuente de un texto.
<basefont>: Servía para indicar el color, tamaño y tipo de fuente de todo el texto de la página. Esta etiqueta se colocaba  fuera de <body>...</body>, en <head>...</head>.

Algunos atributos ya desaprobados por el W3C:

Atributos de <body>:

link: Define el color de los hipervínculos de la página.
vlink: Define el color de los hipervínculos ya visitados.
alink: Define el color de los hipervínculos activos.
bgcolor: Define el color de fondo de la página.
background: Define una imagen de fondo para la página.

Atributos de <p>:

align: Indica el alineamiento de un texto en la página.

Atributos de <table> y <td>:

bgcolor: Color de fondo de una tabla o celda.

Hoy día, en lugar de utilizar etiquetas y atributos HTML para agregar belleza estética a las páginas, se utiliza CSS; el cual facilita mucho el diseño, ya que cuenta con una gran variedad de aditivos estilísticos específicos para cada elemento HTML.

Los comandos o atributos de estilo CSS pueden incorporarse dentro del código fuente HTML de la página, así como también pueden estar en un archivo separado de formato .css,el cual se vincula o importa en las páginas mediante la etiqueta <link> (vincular), que debe ir ubicada en la sección de cabecera del código fuente, fuera de <body>; entre las etiquetas de apertura y cierre <head> (paciencia, ya hablaremos detalladamente sobre cómo hacerlo en la próxima sección).

Si en lugar de crear un archivo separado de tipo .css para definir la estética de varias páginas de un sitio, se prefiere incorporar el código CSS dentro del código HTML de cada una de las páginas, se debe utilizar la etiqueta <style> (estilo), entre cuyas etiquetas de apertura y cierre se coloca el código en lenguaje CSS. <style> al igual que <link> debe colocarse fuera de <body>, en la sección de cabecera entre las etiquetas de apertura y cierre de <head>.

Una de las ventajas de utilizar archivos CSS separados del código fuente de las páginas, es que si se quiere un diseño homogéneo y general para todas las páginas que componen un sitio Web; el mismo puede ser especificado en dicho archivo CSS; donde el estilo visual de cada elemento HTML de las páginas es definido. Por ejemplo, si se quiere que todas las páginas del sitio tengan un determinado color de fondo, en lugar de especificarlo en cada una de ellas; simplemente hay que hacerlo una vez en el archivo CSS, ya que los comandos estilísticos de aquel archivo se aplican a todas las páginas que componen el sitio Web. Si luego se quiere cambiar el color de fondo de todas las páginas, en lugar de tener que modificar el código fuente de cada página, simplemente se modifica el color de fondo desde el archivo CSS; ahorrando así tiempo y trabajo.

Si se prefiere tener los comandos de estilo dentro del código fuente de la página Web, los cambios realizados entre las etiquetas de apertura y cierre <style> se aplicarán a toda la página; pero no afectarán al resto de los documentos HTML del sitio Web.

Si por otro lado, solamente se requiere aplicar los cambios de estilo en un elemento HTML específico, se puede agregar el atributo style en cualquiera de las etiquetas que forman parte del código fuente de la página Web. Los cambios sólo se aplicarán en dicho elemento.

El potencial de diseño estético que tiene CSS es muy grande, ofreciendo una infinidad de combinaciones estilísticas que pueden ser aplicadas en las páginas Web. Por eso, al terminar de aprender HTML, es indispensable estudiar CSS para complementar los conocimientos de desarrollo Web adquiridos. Hay que tener claro que si no se sabe CSS, no se pueden diseñar páginas y por ende sitios Web que cubran las expectativas visuales de los usuarios de hoy día. Sería como construir casas y dejarlas en su estado estructural; sin ventanas ni puertas ni pisos y con los techos de cemento a la vista, sin pintar, etc.

El lenguaje HTML sirve para definir los elementos u objetos que forman parte de la página, mientras que con CSS se organiza la distribución de esos elementos en la página; colocándolos en posiciones precisas, elegidas por el diseñador. Con CSS se da estilo a esos elementos (colores de fondo, formato de texto, colores de hipevínculos, efectos especiales, etc). Por lo tanto, HTML sin CSS es incompleto.

Veamos antes de comenzar, un ejemplo de CSS para darnos una idea de cómo se ve. En el siguiente ejemplo daremos estilo al texto colocado entre las etiquetas <h1>, <h2> y <p>.
 

<html>
<head>

<title>Ejemplo de estilo CSS</title>

<style type="text/css">
h1 {color: red; font-family: arial;}
h2 {color: blue; font-family: verdana;}
p {color: fuchsia; font-family: courier; font-size: 4em;}

</style>
</head>

<body>

<h1>
T&iacute;tulo en color rojo y fuente arial</h1>
<h2>T&iacute;tulo en color azul y fuente verdana</h2>
<p>Texto fucsia, courier, tama&ntilde;o 4</p>

</body>

</html>

 
Esto daría como resultado algo como:
 

Título en color rojo y fuente arial

Título en color azul y fuente verdana

Texto fucsia, courier, tamaño 4
 
 
No se hagan problema si todavía no entienden qué significa cada atributo CSS, todo eso lo analizaremos detalladamente a continuación.

 
CONTINÚA EN TUTORIAL DE CSS - PRIMERA PARTE >>


Be the first to like it

Share
Related Articles

Suggested posts
Follow Youbioit






Comments

Post new comment

The content of this field is kept private and will not be shown publicly.