Página Anticuada. Visita la nueva versión.

Hojas de Estilo. Que son? Para que sirven?

Seguramente habréis querido que algunos textos de vuestras páginas se muestren en negrita, de un color y tamaño determinado, etc. y seguramente ese mismo "estilo" de presentación lo habréis querido utilizar más de una vez. Para ello, cada vez que queréis darle esa forma (formato) a una determinada palabra o frase habéis tenido que definir su color, tamaño, etc. Además, seguramente al comprobar que tal se ve vuestra web en otro Navegador distinto al que soléis utilizar, habéis comprobado que la página no se muestra tal y como queréis.

La mejor manera de evitar estas cosas es separar lo que es el Contenido de la página tal cual, del Aspecto que queréis que tenga. Es decir, en una parte de la página solo ponéis el contenido y en otra parte (en la Hoja de Estilo) ponéis la forma que deseáis que tenga en la página cada elemento.

Por ejempo, si quiero que en mi web se vea un título como "Bienvenidos a mi página web", que sea de color azul, con un tamaño determinado, en negrita y subrayado, la idea es que en la página solo tengáis que escribir "Bienvenidos a mi página Web" y en la Hoja de Estilo pongáis que lo queréis con esas características (negrita, subrayado, etc.).

Y para que tanto rollo? Pues por un lado por lo comentado antes, y por otro para evitar tener que definir todas esas características del texto (negrita, subrayado, etc.) cada vez que queráis usar esa forma de representación.

Os lo explico de nuevo con otro ejemplo. Veis que el título de este apartado es "Hojas de Estilo. Que son....", que está en azul, con un tamaño determinado, en negrita, cursiva y con una separación respecto del parrafo? Véis además que suelo usar esa forma de poner los títulos (ese Estilo) varias veces? Pues gracias a las Hojas de Estilo no tengo que preocuparme de definir su color, tamaño, etc, cada vez que quiero un título, sino que esas propiedades (formato) lo tengo definido en la Hoja de Estilos y cuando quiero un título simplemente lo escribo tal cual y luego le indico que se trata de un "Título tipo 1" por poner un ejemplo.

Otro ejemplillo. Veis que cada parrafo de CreaTuWeb tiene la misma forma? Tienen una letra determinada, una tamaño definido, margenes laterales y separación respecto al párrafo anterior, la primera línea de cada parafo tiene una sangria, etc? Pues para evitar tener que indicar a la página que quiero esas características cada vez que empiezo un nuevo párrafo, defino "mi parrafo" en la Hoja de Estilos y a la hora de escribir en mi página, solo le indico que es del tipo "Mi párrafo" y ella se encarga de darle la forma que yo deseo a cada uno de ellos.

Por último, (aunque hay muchas otras cosas que poder hacer) os habéis fijado que los enlaces (vínvulos) siempre son azules? Que cambian a color rojo al poner el ratón sobre ellos? Que al pinchar sobre ellos se ponen verdes? Que no tienen subrayado? Eso también se consigue con las Hojas de Estilo y gracias a estas, no es necesario definir esas características (formato) para cada vínculo, sino definir "mi enlace" solo una vez en la Hoja de Estilo y en la página solo indicar que se trata de un vínculo del tipo "mi enlace". Ya sabéis, por un lado el Contenido y por otro el Aspecto.

Los más listillos y curiosos pensaran "Esto no es nada nuevo, Tanto el Frontpage como otros, te permiten usar una serie de Estilos ya definidos para los parrafos, etc" Pues si que es verdad, pero por un lado, conocer como lo hacen te da más libertad a la hora de crear tu web y por otra te permite definir (o redefinir) esas formas o Estilos tal y como tu quieres, no como marcan esos programas. Además, lo que suelen hacer esos programas es definir esos estilos en cada una de las páginas, es decir, si tenéis 20 páginas en vuestra web, los define 20 veces, una en cada página. Nosotros aprenderemos a hacerlo una sola vez y así disminuiremos el peso (tamaño en Kbytes) de nuestras páginas.

Además lo ideal no es definir solo los estilos que van a tener los distintos tipos de texto que metamos en nuestras páginas, sino Todo, es decir, el estilo de las tablas, de las celdas, de la página en si...de todo. De esta forma separamos por completo la Forma del Contenido que es uno de los objetivos del uso de las Hojas de Estilo y lo que nos permitirá, entre cosas, que se vean "correctamente" en todos los Navegadores.

Correctamente, entre comillas, pues se supone que los Navegadores deben estar preparados para interpretar perfectamente el lenguaje de las Hojas de Estilo, pero en realidad algunos no lo cumplen del todo. De todas formas, cada vez lo van aceptando más. Por ello, es habitual que algún elemento no se muestre exactamente como deseamos. Pero al separar Contenido del Aspecto, lo que quizas no se interprete sea solo el aspecto, mientras que el contenido si que lo hace siempre.

Otra cosilla que podemos hacer es definir una Hoja de Estilo para cada navegador, es decir, determinar que navegador usa el visitante y en base a esto, indicar que la página se muestre con una Hoja de Esilo especialmente preparada para ese Navegador. Esto, sin duda, es mejor que crear distintas versiones para cada Navegador, pues el trabajo se reduce a una Hoja de Estilo que como veréis no tiene más que unas 10-30 líneas por regla general y que son de lo más sencillo.

Si ya conocéis algo de HTML esto va a ser un paseo de rosas, y si aún no lo conocéis es hora de pasaros por la sección HTML, aunque ya sabéis que suelo explicar todo de manera que lo podáis entender a pesar de no tener muchos conocimientos.