CSS Diseño Web hojas de estilo
La idea era buscar un título tanto o más sensacionalista que nuestra otra saga. No lo logramos, pero lo que sí lograremos es hacer de esta nueva saga una tan buena y completa o más aún que la anterior.
Empezaremos a cubrir un tema tan importante e interesante como las hojas de estilo a contar de hoy, algo realmente fundamental cuando trabajamos en diseño Web o bien queremos aprender una nueva tecnología que nos permita ampliar nuestro set de herramientas.
Hoy comenzaremos con algunos conceptos básicos y un ejemplo que nos permita ir entendiendo de la mejor manera las hojas de estilo, esperando adentrarnos en números próximos y llegar a cubrir temáticas que nos conviertan en todos unos amos del universo entendedores de la materia.
Todos aquellos libres de temor y con sed de aprendizaje, sigannos después del salto bajo su propia responsabilidad, pues no hay reembolsos.
Antes de comenzar:
Nota 1: Tal como indicamos en “Cómo aprender a programar y no morir en el intento”, en este caso es bueno decir que no somos expertos en CSS ni el diseño Web es nuestra profesión, sino que la intención es ir cubriendo las temáticas de la manera más sencilla posible para un mejor entendimiento de la tecnología, por lo que si lo que interesa es ir aprendiendo de cero, esto es lo ideal.
Nota 2: Es preferible, aunque no esencial, contar con algunos conocimientos de HTML antes de embarcarse en esta aventura. De cualquier forma, cada vez que incluyamos contenidos de ese lenguaje, los iremos explicando.
Para comenzar, siempre es bueno indicar:
Con eso claro, veamos, los contenidos de hoy:
La modalidad de esta saga, será bastante similar a como hemos operado durante otras. En cada nueva guía iremos cubriendo algunos contenidos y dando algunos ejemplos para mejor entendimiento. A medida que vayamos avanzando, iremos dando algunos ejercicios propuestos y resueltos.
Estando claros con los contenidos de hoy, vamos, manos a la obra:
Cuando hablamos de hojas de estilo, o CSS (Cascading Style Sheets o Cascade Style Sheets según la definición que encuentren) nos referimos a una tecnología de lenguajes de estilo (también definido en algunos casos como un lenguaje de programación de estilos), utilizado principalmente para controlar la apariencia de documentos escritos en lenguaje HTML o XHTML, aunque también puede ser utilizado para documentos escritos en XML.
Cuando hablamos de documentos escritos en lenguaje HTML nos referimos principamente a páginas Web. Este lenguaje HTML, el más utilizado y combinado con lenguajes dinámicos de programación como PHP o ASP entre otros, tiene como finalidad principal estructurizar el contenido de un sitio Web mediante la aplicación de marcas o etiquetas (<HTML>, <HEAD>, <TITLE>, <BODY>, etc.) y es definido en los estándares de la W3C de esa forma.
Sin embargo, dentro de HTML además de contar con etiquetas o marcas de estructura, también contamos con algunas etiquetas que nos permiten controlar el formato o apariencia de los contenidos desplegados. Algunas de las marcas más utilizadas son:
<i>: Define un formato de cursiva para el texto.
<b>: Define un formato de negrita para el texto.
<u>: Define un formato de subrayado para el texto.
<font face=”…”>: Define la tipografía a usar.
<font color=”…”>: Define el color a usar en el texto.
Si bien con ese tipo de etiquetas, junto a otras, podemos controlar practicamente todo lo relacionado al estilo y apariencia de una página Web, se comenzó a notar que HTML empezaba a perder las características estructurales que lo definían y se convertía ya en un lenguaje mucho más híbrido. Por esto, la W3C (entidad encargada de definir los estándares relacionados a tecnologías Web), decidió definir un nuevo estándar, conocido como CSS1 (luego vendría el CSS2), orientado exclusivamente a estilización y apariencia de sitios Web, intentando devolver a HTML a su naturaleza habitual. Es así como nacen las hojas de estilo.
Con la aparición de este estándar, nos encontramos con la posibilidad de definir la apariencia de nuestros sitios Web de 3 formas distintas: mediante la estilización individual de etiquetas HTML, estilizando un HTML como definición de página de forma interna, y mediante la utilización de un archivo externo .CSS. Hoy veremos las 2 primeras y luego empezaremos a trabajar con archivos externos, la forma más conveniente en mi opinión.
Hoy, los estándares de hojas de estilo son tan poderosos que ya no sólo se remiten al estilo o formato de textos, si no que podemos realizar controles de imágenes, opacidad y realizar efectos visualmente impresionantes, por lo que usar esta tecnología supone una potenciación importante de nuestros sitios Web.
A pesar de que a primera vista el uso de hojas de estilo pudiése verse como algo únicamente conveniente, existen algunas desventajas a tener en consideración.
Claramente cuando hablamos de ventajas, tal como mencionabamos en la lección anterior, está el poder realizar una separación limpia y completa entre lo que es estructura y contenidos (HTML + lenguajes dinámicos de lado cliente y de servidor) y lo que es apariencia y estilos. Esto sin duda que nos otorga un orden importante a tener en consideración y mayor claridad, tanto en la planificación como en el diseño y desarrollo de la Web. Además, cuando utilizamos archivos externos, y estos son solicitados por muchas páginas que tengamos a nuestra disposición, se presenta la facilidad que cuando necesitamos realizar modificaciones de estilo, sólo modificamos 1 archivo, mientras que si nuestros estilos estuviesen definidos a nivel de página o mediante marcas HTML, estaríamos realizando cambios en cada página que se despliegue a nuestros visitantes.
Pero el uso de hojas de estilo también presenta algunos inconvenientes, aunque no del lenguaje propiamente tal, si no que gracias al software que la interpreta (navegadores Web). Hoy se encuentran disponibles en el mercado una multitud de navegadores (Internet Explorer, Firefox, Safari, Opera y Chrome solo por nombrar algunos), los cuales a pesar de cumplir con los estándares de la W3C, tienen distintos métodos de interpretación de los contenidos descargados de la Web, por lo que es común que una forma de definir una hoja de estilo pueda presentar fallas de compatibilidad en distintos navegadores, un punto al que hay que tener mucho ojo, pues a pesar de que hay navegadores que son preferidos por la mayoría de los usuarios en perjuicio de otro, nuestros sitios Web nunca deberían discriminar a ningún tipo de usuario y deberían estar preparados para todo tipo de eventualidades.
La forma más básica de controlar la apariencia de nuestras páginas Web mediante estándares CSS es la estilización individual a nivel de marcas en HTML. Cuando hablamos de marcas o etiquetas, nos referimos a una estructura en particular para definir el contenido que desplegamos en nuestras páginas Web. Como mínimo nuestras páginas siempre deben contener las etiquetas <HTML> <HEAD><TITLE> y <BODY> con sus respectivos cierres </HTML> </HEAD> </TITLE> y </BODY> en los espacios que corresponden. Además, dentro del cuerpo o body de nuestra página Web, podemos utilizar otras marcas para definir contenidos, como es el caso de los <H1> <H2> <H3>, etc para definir encabezados u otras que iremos viendo. Pues bien, a estas etiquetas se les puede aplicar estilización utilizando estándares CSS los cuales solo se aplicarán a todo lo contenido dentro de la etiqueta y no más alla que esta una vez que se cierre.
Para que todo quede más claro, veremos un ejemplo:
Ejemplo: Definir un estilo para un texto contenido en una etiqueta H1, el cual debe contener texto rojo y letra Arial.
Veamos primero si lo hubiésemos hecho con etiquetas estándar de HTML:
<html> /* Etiqueta HTML para iniciar el documento */
<head> /* Etiqueta valida para el encabezado de la página*/
<title> Ejemplo 1 </title> /* Etiqueta valida para el título de página */
</head> /* Cerramos la etiqueta para el encabezado */
<body> /* Iniciamos el cuerpo del documento */
<h1><font face=”Arial” color=”#ff0000″>Texto de ejemplo</font></h1>
/* Iniciamos el encabezado 1 mediante <h1> y luego ajustamos las propiedades del texto mediante la etiqueta <font>, utilizando face para la tipografía y color para bueno.. el color, el cual es definido en HTML mediante la combinación hexadecimal, para este caso ff0000 para rojo */
</body> /* Cerramos el cuerpo del documento */
</html> /* Cerramos el documento */Recordemos que en HTML las etiquetas debemos irlas cerrando en el orden en que las abrimos, cerrando primero la última que abrimos.
Si bien nosotros creamos este archivo y le damos una extensión .html o .htm y lo ejecutamos en un navegador, obtendríamos el resultado solicitado, lo estaríamos realizando mediante etiquetas HTML lo cual no sería lo apropiado.
Ahora veamos si este ejemplo lo realizamos estilizando la marca mediante CSS:
<html>
<head>
<title> Ejemplo 1 </title>
<body>
<h1 style=”color:#ff0000;font-family:Arial”>Texto de ejemplo</h1>
</body>
</html>Para visualizar el ejemplo, lo guardamos con extensión .htm o .html y lo abrimos en nuestro navegador.
Si nos fijamos, la definición es distinta. Aplicamos una estilización a la marca <h1> mediante el estándar “style” de CSS, definiendo el color (rojo, igual que en el anterior) y la propiedad font family, que se refiere directamente a la tipografía utilizada, en este caso Arial. Este estilo se aplicará a todo lo que este contenido antes de que cerremos la marca de la forma </h1> por lo que si ingresaramos más texto entremedio, también sería en Arial y de color rojo. Esta es la forma correcta de estilizar individualmente una marca HTML. Este método lo podemos aplicar a todas las marcas HTML que lo permitan, por lo que los incentivamos a probar en distintos casos y cambiando parámetros.
Tengamos en consideración que este método de estilización sólo se aplicará a la marca en particular y no a otra o al uso de la misma en otras partes de la página, lo cual es bueno si queremos individualizar mucho una marca en particular, pero poco conveniente cuando necesitamos aplicar el mismo estilo a varias partes del documento.
El método de estilización que veíamos en la lección anterior es bastante sencillo de utilizar. Sin embargo, puede volverse bastante incomodo, ya que si utilizamos una misma marca (por ejemplo <h1>) en distintos lugares de nuestra página Web, se vuelve engorroso tener que redefinir el estilo cada vez que lo vayamos a utilizar. Para esto es que existe este segundo método, que es realizar definiciones de estilo a nivel de página en vez de marca, para lo cual realizamos una definición general de una marca al principio del documento y cada vez que la utilicemos contendrá ese estilo por defecto.
Para comprender mejor este método, veamos el mismo ejemplo anterior, pero ahora estilicemos a nivel de página:
<html>
<head>
<title> Ejemplo 2 </title>
<style type=”text/css”> /* Esta etiqueta es por defecto para definir estilo de tipo CSS */
h1{
color:#ff0000;
font-family:Arial;
}
/* Definimos el estilo para la etiqueta h1 */
</style> /* Cerramos la definición de estilos */
</head>
<body>
<h1> Texto de ejemplo </h1>
<h1> El mismo encabezado con otro texto </h1>
</body>
</html>
Como ahora hemos realizado la definición de estilo a nivel de página no es necesario que incluyamos la definición en la marca. Ahora cada vez que encerremos el texto en etiquetas <h1></h1> se aplicará el estilo definido arriba, sin importar cuantas veces la utilicemos.
Como podemos ver, eso nos ahorrará trabajo y no tendremos que preocuparnos de aplicar el estilo individualmente, lo cual es bastante útil, sobretodo si necesitamos actualizar la información con respecto al color o tipo de letra, solo modificamos arriba y se aplicará automáticamente.
En la sección de definición de estilos podremos definir muchas marcas, todas las que utilicemos en nuestra página (incluso <body>). Sin embargo tenemos que tener en cuenta que cada instancia de esa marca incluirá ese estilo por defecto.
A pesar de lo útil de este método, aun se presenta una problemática importante. ¿Qué pasa cuando queremos aplicar este estilo a muchas páginas que poseemos?. Lamentablemente tenemos que incorporar el código a todas y cada una de ellas, por lo que debemos fijarnos que cada vez que hagamos un cambio, lo realicemos en todos los documentos, lo cual puede ser engorroso. Para esto existe la solución de utilizar un archivo externo, lo que veremos en nuestros próximos números.
Por ahora daremos por terminada esta lección, hemos cubierto los contenidos introductorios y fundamentales para entrar de lleno al uso y manipulación de hojas de estilo, en el cual buscamos potenciar lo más posible nuestros sitios Web y utilizar todos los estándares de accesibilidad y usabilidad que existen, para mayor comodidad de nuestros visitantes.
En la próxima edición de Como dominar CSS sin salir del escritorio:
Como siempre, recuerden que este tutorial ha sido:
Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y los esperamos en la próxima edición.
12:15:14 am
[…] Nota: Si no han tenido la oportunidad de leer el primer número de esta guía, les recomendamos revisarlo en el siguiente enlace. […]
6:30:45 pm
Son unos mounstros, sigan asi!
1:43:09 am
[…] Conocimiento básico en css. Recomendamos esta saga […]
3:27:25 am
[…] Aprende CSS […]
5:47:05 am
Me parece que se enfocaron más en el HTML que en el css. Buen intento