Juan M. Barrós Pazos: CSS3 00 Que es CSS y como incluirlo en nuestro html

¿Qué es CSS? Y cómo incluirlo

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de
los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de
separar los contenidos y su presentación y es imprescindible para crear páginas web
complejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas
ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con
significado completo (también llamados "documentos semánticos"). Además, mejora la
accesibilidad del documento, reduce la complejidad de su mantenimiento y permite
visualizar el mismo documento en infinidad de dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para
marcar los contenidos, es decir, para designar la función de cada elemento dentro de la
página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada
elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre
elementos, posición de cada elemento dentro de la página, etc.

Breve historia de CSS

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML,

alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir

un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los

documentos electrónicos.

El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y

el crecimiento exponencial del lenguaje HTML para la creación de documentos

electrónicos. La guerra de navegadores y la falta de un estándar para la definición de los

estilos dificultaban la creación de documentos con la misma apariencia en diferentes

navegadores.

El organismo W3C (http://www.w3.org/) (World Wide Web Consortium), encargado de

crear todos los estándares relacionados con la web, propuso la creación de un lenguaje

de hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas.

Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style

Sheets) y la SSP (Stream-based Style Sheet Proposal).

La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos.

Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que

tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets).

En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a

su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera

recomendación oficial, conocida como "CSS nivel 1".

A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres

secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de

trabajo de CSS.

El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación

oficial, conocida como "CSS nivel 2". La versión de CSS que utilizan todos los

navegadores de hoy en día es CSS 2.1, una revisión de CSS 2 que aún se está elaborando

(la última actualización es del 19 de julio de 2007). Al mismo tiempo, la siguiente

recomendación de CSS, conocida como "CSS nivel 3", continúa en desarrollo desde 1998

y hasta el momento sólo se han publicado borradores.

La adopción de CSS por parte de los navegadores ha requerido un largo periodo de

tiempo. El mismo año que se publicó CSS 1, Microsoft lanzaba su navegador Internet

Explorer 3.0, que disponía de un soporte bastante reducido de CSS. El primer navegador

con soporte completo de CSS 1 fue la versión para Mac de Internet Explorer 5, que se

publicó en el año 2000. Por el momento, ningún navegador tiene soporte completo de

CSS 2.1.

Funcionamiento básico de CSS

Antes de la adopción de CSS, los diseñadores de páginas web debían definir el aspecto de

cada elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra

una página HTML con estilos definidos sin utilizar CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Ejemplo de estilos sin CSS</title>

</head>

<body>

<h1><font color="red" face="Arial" size="5">Titular de la página</font></h1>

<p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy

largo.</font></p>

</body>

</html>

El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para

definir el color, la tipografía y el tamaño del texto de cada elemento del documento.

El principal problema de esta forma de definir el aspecto de los elementos se puede ver

claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría

que insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 páginas

diferentes, habría que definir 500.000 etiquetas <font>. Como cada etiqueta <font>

tiene 3 atributos, habría que definir 1.5 millones de atributos.

Por otra parte, el diseño de los sitios web está en constante evolución y es habitual

modificar cada cierto tiempo los colores principales de las páginas o la tipografía

utilizada para el texto. Si se emplea la etiqueta <font>, habría que modificar el valor de

1.5 millones de atributos para modificar el diseño general del sitio web.

La solución que propone CSS es mucho mejor, como se puede ver en el siguiente

ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Ejemplo de estilos con CSS</title>

h1 { color: red; font-family: Arial; font-size: large; }

p { color: gray; font-family: Verdana; font-size: medium; }

</style>

</head>

<body>

<h1>Titular de la página</h1>

<p>Un párrafo de texto no muy largo.</p>

</body>

</html>

CSS permite separar los contenidos de la página y su aspecto o presentación. En el

ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se

incluye toda la información relacionada con los estilos de la página.

Utilizando CSS, en esa zona reservada se indica que todas las etiquetas <h1> de la página

se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande.

Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo de letra

Verdana y con un tamaño de letra medio.

Definiendo los estilos de esta forma, no importa el número de elementos <p> que existan

en la página, ya que todos tendrán el mismo aspecto establecido mediante CSS. Como se

verá a continuación, esta forma de trabajar con CSS no es ideal, ya que si el sitio web

dispone de 10.000 páginas, habría que definir 10.000 veces el mismo estilo CSS.

Cómo incluir CSS en un documento XHTML

Una de las principales características de CSS es su flexibilidad y las diferentes opciones

que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir

CSS en un documento HTML.

Incluir CSS en el mismo documento HTML

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la

etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento

(sólo dentro de la sección <head>).

Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Ejemplo de estilos CSS en el propio documento</title>

p { color: black; font-family: Verdana; }

</style>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Este método se emplea cuando se define un número pequeño de estilos o cuando se

quieren incluir estilos específicos en una determinada página HTML que completen los

estilos que se incluyen por defecto en todas las páginas del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en los estilos

definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a

modificar.

Definir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas

HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un

archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS

que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como

necesite.

Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben

seguir los siguientes pasos:

1) Se crea un archivo de texto y se le añade solamente el siguiente contenido:

p { color: black; font-family: Verdana; }

2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial

atención a que el archivo tenga extensión .css y no .txt

3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Ejemplo de estilos CSS en un archivo externo</title>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos

también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y

aplica los estilos a los contenidos de la página.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo

CSS:

- rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el

archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor

stylesheet

- type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para

los archivos CSS su valor siempre es text/css

- href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede

ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

- media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más

adelante se explican en detalle los medios CSS y su funcionamiento.

De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con

mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en

multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los

mismos estilos a todas las páginas que forman un sitio web.

Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo

cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas

las páginas HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS

externos, también se puede utilizar la etiqueta <style>. La forma alternativa de incluir

un archivo CSS externo se muestra a continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Ejemplo de estilos CSS en un archivo externo</title>

@import '/css/estilos.css';

</style>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

En este caso, para incluir en la página HTML los estilos definidos en archivos CSS

externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import

siempre preceden a cualquier otra regla CSS (con la única excepción de la regla

@charset).

La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con

comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las

siguientes reglas @import son equivalentes:

@import '/css/estilos.css';

@import "/css/estilos.css";

@import url('/css/estilos.css');

@import url("/css/estilos.css");

Incluir CSS en los elementos HTML

El último método para incluir estilos CSS en documentos HTML es el peor y el menos

utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas <font>.

Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Ejemplo de estilos CSS en el propio documento</title>

</head>

<body>

<p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>

</body>

</html>

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en

determinadas situaciones en las que se debe incluir un estilo muy específico para un

solo elemento concreto.

Juan M. Barrós Pazos

lunes, 5 de diciembre de 2022

CSS3 00 Que es CSS y como incluirlo en nuestro html

No hay comentarios:

Publicar un comentario