Curso de Cascade Style Sheet (CSS) – Manual del alumno

En este curso vamos a aprender el uso de hojas de estilo, que nos permitirá crear páginas web más atractivas.

Manual del alumno

Este manual del alumno es una ayuda para el alumno, para tenga un recuerdo del curso. Este manual contiene un resumen de las materias que se van a estudiar durante el curso, pero el alumno debería de tomar notas personales para completas este manual.

Este manual es una versión adaptada del manual «CSS Practico» escrito por Ricardo Borillo y publicado en www.mailxmail.com

Ejercicios prácticos

Para captar mejor la teoría, se harán muchos ejercicios con los alumnos, para probar la teoría y verificar la integración de la materia.

También, el alumno podrá copiar sus códigos en una memoria flash al fin del curso para llevarse, con fin de seguir la práctica en su hogar.

Requisitos para atender a este curso

• El conocimiento del lenguaje HTML es requerido para poder atender a este curso.
• Si el alumno tiene dificultades en un u otro capítulo, él debe sentirse libre de pedir explicaciones adicionales al profesor.
• Pero si aparece que el alumno no posee los requisitos mínimos para este curso, por respeto a los otros alumnos que ya poseen esta materia, el alumno podría ser traslado para otro curso en el futuro, cuando el cumplirá con los requisitos.

Introducción

CSS son las siglas de «Cascade Style Sheet». 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.

En este curso veremos algunos conceptos básicos de cómo aplicar este lenguaje para definir estilos.

En los orígenes de la Web y en sus primeras versiones, HTML era un lenguaje fácil de aprender y muy reducido en cuanto a sus tags y estructura. Estamos hablando de los años 1990 al 1993. Todo cambió cuando empezaron a surgir los primeros navegadores que eran capaces de representar recursos gráficos como añadido a la información textual.

Así, el número de sitios web comenzó a crecer y con él, el número de tags que la especificación HTML contemplaba. El objetivo era construir sitios web cada vez más atractivos visualmente hablando, con lo que HTML debía incluir nuevos tags destinados a conseguir diversos efectos visuales.

Con todos estos cambios que la web había sufrido, nos encontramos con que un lenguaje que en sus inicios había sido «orientado a la estructura», ahora estaba totalmente «orientado a la visualización» (HTML 4 es la más viva representación de esta realidad). Encontramos tags com <B>, <U> o <I> que definen estilos de visualización sin aportar nada a la estructura del documento representados.

Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso del tag FONT. Con el uso de este tag podemos hacer que una zona que corresponde a la cabecera o título de una página, y que debería expresarse con un H1, pase ahora a estar definida mediante el tag FONT.

Con este cambio se pierden totalmente la estructura del documento.

La realidad ahora es que el mayor número de los sitios realizados con HTML 4 consiguen que el volumen de información de visualización sea muy superior al de la información verdaderamente relevante. Esto parece, cuanto menos preocupante.

Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su estructura:

1. La indexación por los buscadores es mucho más complicada (Google asigna un peso mucho mayor a una página que utiliza H1 para definir sus secciones, que a los campos META del documento).
2. Se reduce la accesibilidad. Actualmente existen aplicaciones que permiten la lectura de páginas web como ayuda a los discapacitados (personas ciegas o con otras discapacidades). Si una persona discapacitada intenta acceder a una página sin una mínima estructuración, el resultado puede ser lamentable.
3. La estructura de la página y la información contenida en la misma es mucho más sencilla de mantener. Actualmente, ciertos aspectos del código HTML pueden hacer que una misma página tenga visualizaciones distintas en distintos navegadores. Estos herrores de diseño son dificilmente depurables cuando la página contiene una estructura de tags complicada y sin ninguna estructuración.

Por otra parte, un cambio en un tipo de fuente supone el rediseño de todas las páginas de un site al tener que sustituir todos los valores para el tag FONT. Todos estos problemas han sido seguidos muy de cerca por el W3C, el cual comenzó a trabajar en 1995 en CSS.

Principales características aportadas por CSS en contraposición a los elementos de visualización presentes en la especificación de HTML 4:

1. Estilo enriquecido. CSS permite la creación de documentos visualmente mucho más ricos que lo que HTML nunca permitirá. No en vano CSS está pensado única y exclusivamente para asistir al diseñador a la hora de dar estilo a un documento estrucuturado.
2. Fácil de utilizar. La utilización de hojas de estilo CSS hace que el diseñador pueda reducir sustancialmente su carga de trabajo al diseñar todo un site. Esto se debe a que CSS es capaz de centralizar ciertos efectos visuales que plasmemos en diversas secciones del site, en lugar de tenerlos diseminados por páginas y páginas del sitio.
3. Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo así consistente para todas las páginas. Así, si deseamos modificar un estilo que es común a todo el site, sólo necesitaríamos modificar una línea de nuestro fichero CSS (con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas).
4. Reduce el tamaño del código HTML enviado. Al centralizar los estilos ya no es necesario la utilización de tags como FONT en todos los documentos del site. De esta manera se reduce considerablemente el tiempo en que tarda en cargarse el código de una página.
5. Nos prepara para el futuro. Debemos ser conscientes que muchos tags como FONT, BASEFONT, U, STRIKE, S, CENTER, han sido marcados por el W3C como «deprecated», es decir, que se desaconseja su uso ya que serán eliminados en un futuro de la especificación. De igual menera HTML retornará progresivamente a sus orígenes, volviendo a ser un lenguaje para la estrucuturación de información. Esta es la via de XML, cuya primera aproximaciés es el lenguaje de marcas XHTML.

Fuente: Cedric Simon, SolucionJava.com