Introducción a Hojas de Estilo Por Héctor Hugo Luna Miranda Conociendo las hojas de estilo De inicio, te presento un par de preguntas cuyas respuestas se obtendrán siguiendo los lineamientos de Vázquez (2006): Qué es una hoja de estilo y en qué te ayuda en la creación de sitios Web? Las hojas de estilo o también conocidas como código CSS son la mejor manera de personalizar el aspecto visual de nuestras páginas de forma sencilla, rápida y eficaz. Se trata de un método de codificación complementaria al HTML, basada en este lenguaje, que permite crear estilos visuales para aplicar a las diversas etiquetas que puede contener una página. Es así que podremos crear estilos individuales para los párrafos, los textos, las tablas, etc. Mediante las hojas de estilo podremos controlar y personalizar márgenes, alineaciones, colores, formatos, fuente, espesores, altos, anchos e infinidad de opciones más, todo ello sin la necesidad de modificar individualmente cada elemento de la página (Vázquez, 2006, p. 136). Cómo identificas que en tu página Web se está haciendo uso de Hojas de Estilo? Puedes aplicar hojas de estilo a un documento HTML de dos formas: 1. Especificándolo en cada etiqueta HTML por medio del atributo style. 2. Utilizando la etiqueta <STYLE></STYLE> dentro del encabezado de la página (<HEAD></HEAD>) que permite escribir código CSS directamente dentro de ella. 1
Ejemplo 1. Aplicación de hoja de estilo directamente en la etiqueta Figura 1. Aplicación de hoja de estilo directamente en una etiqueta HTML. Como puedes observar en el ejemplo anterior, hay dos etiquetas <P></P>. A la primera de ellas se le ha agregado el atributo style. Dentro del atributo style se coloca el código color:red, el cual, en CSS indica que el color del texto será rojo. En la segunda etiqueta el atributo style tiene el siguiente valor border:1px solid, lo cual, significa que la etiqueta estará rodeada de un borde negro. Ejemplo 2. Aplicación de hoja de estilo usando la etiqueta <STYLE></STYLE> Figura 2. Aplicación de hoja de estilo usando etiqueta <STYLE>. 2
Este ejemplo tiene el mismo efecto que el primero. La diferencia es que se hace uso de la etiqueta <STYLE></STYLE>, la cual permite escribir código CSS dentro de la página HTML sin hacer uso del atributo style de las etiquetas. Hay dos párrafos que se muestran en color rojo y uno que tiene un borde negro. En CSS hay dos formas de asignar estilo a nuestras etiquetas, ya sea por el atributo class (pueden existir varias etiquetas con este atributo y el mismo valor), y el atributo id (el valor de este atributo debe ser único para cada etiqueta). Entonces, podemos observar que hay dos etiquetas <P></P> con el atributo class=rojo sobre las cuales va a tener efecto el código CSS..rojo {color:red;} El (. ) en este código indica que va a hacer referencia a todas las etiquetas que tengan en su atributo class (el valor después del punto) en este caso rojo, entonces, en todas las etiquetas que tengan como atributo class=rojo el color del texto será rojo. Referente al párrafo que tiene el borde de color negro, el código que le correspondería es: #borde{border:1px solid;} En este ejemplo vemos que cambia el (. ) por un símbolo de ( # ). La diferencia es que en lugar de preguntar por el atributo class se está haciendo referencia al atributo id de la etiqueta. En este caso, a la etiqueta que tenga como atributo id=borde se le va a colocar un borde de color negro con ancho de un píxel. Con base a los ejemplos anteriores, se puede obtener la sintaxis de las Hojas de Estilo. Para que sea más ilustrativo, observa la figura 3 Figura 3.Sintaxis de código CSS. 3
Existe una gran variedad de Propiedades (modificadores) de CSS y cada una toma diferente valor para tener una amplia flexibilidad al momento de estar aplicando diseño a la página Web. A continuación, podrás observar algunas tablas con las propiedades más comunes y los valores que reciben. Comando modificador Función Valor margin-top, margin-right, margin-bottom, margin-left, margin:top right bottom left padding-top, padding -right, padding -bottom, padding - left, padding:top right bottom left border-top-width, border - right-width, border -bottomwidth, border -left-width, border-width:top right bottom left Distancia entre un bloque y los restantes elementos- Distancia entre el border y el contenido de un bloque. Ancho de los diferentes bordes de un bloque. Tamaño, porcentaje. Tamaño, porcentaje. Tamaño. border-style Estilo visual del borde del bloque. NONE, SOLID, 3D. border-color Color del borde. Color (en código hexadecimal o nombre en inglés). width, height Ancho y largo del bloque. Tamaño, porcentaje. float Alineación del contenido del bloque. NONE, LEFT, RIGHT. Font-family Tipo de letra. Familias tipográficas genéricas. Font-size Tamaño de fuente Tamaño. Font-weight Espesor de la letra. NORMAL, BOLD, BOLDER, LIGHTER- Font-style Estilo de la fuente. NORMAL, ITALIC, ITALIC SMALL-CAPS, OBLIQUE, OBLIQUE SMALL-CAPS, SMALL CAPS. Figura 4. Propiedades básicas de CSS (Vázquez, 2006, p. 137). Si deseas conocer más Propiedades (Modificadores) de CSS, te recomiendo visitar los siguientes enlaces: Manual básico CSS: http://klingon.uab.es/carles/coses/manual_css.pdf Introducción a CSS: http://www.librosweb.es/css/ Referencias CSS 2.1 : http://www.librosweb.es/referencia/css/index.html 4
Resumen En este documento aprendiste el término de Hojas de Estilo y sus principales características, por medio de las cuales podrás identificar su uso en las páginas HTML. Con ello, serás capaz de crear, identificar y comprender el código en el que se haga uso de Hojas de Estilo para dar diseño a las páginas Web. Obteniendo así, páginas más atractivas y flexibles. Referencias Vázquez, P. (2006). Manual de Usuarios. Argentina: Banfield, Gradi. Bibilografía Aubry, C. (2009). Informática técnica. Barcelona: ENI. [Versión electrónica]. Disponible en: http://books.google.com.mx/books?id=5dq8_- SvbfUC&printsec=frontcover&dq=hojas+de+estilo&hl=es&ei=3yezTJu0 CY6msQP3-sk- &sa=x&oi=book_result&ct=result&resnum=5&ved=0ceiq6aewba#v=o nepage&q&f=false Codina, L. (2002, julio-agosto). Hojas de estilo. Disponible en: http://www.elprofesionaldelainformacion.com/contenidos/2002/julio/8.pd f Dreyfus, M. (2001). Hojas de estilo CSS HTML (Trad. Roberto Tato). Barcelona: Marcombo. [Versión electrónica]. Disponible en: http://books.google.com.mx/books?id=cper42ydonoc&printsec=frontcover&dq=h ojas+de+estilo&hl=es&ei=3yeztju0cy6msqp3-sk- &sa=x&oi=book_result&ct=result&resnum=1&ved=0cc8q6aewaa#v= onepage&q&f=false Eguíluz, J. (2009). Introducción a CSS. España: Libros.es. [Versión electrónica]. Disponible en: http://www.librosweb.es/css/ Weinman, W. (2002). Diseño creativo HTML.2. Manual de diseño práctico para Internet (Trad. Sergio Kourchenko). México: Pearson Educación. [Versión electrónica]. Disponible en: http://books.google.com.mx/books?id=te3iay6pzagc&pg=pt303&dq= hojas+de+estilo&hl=es&ei=3yeztju0cy6msqp3-sk- &sa=x&oi=book_result&ct=result&resnum=8&ved=0cfeq6aewbw#v= onepage&q=hojas%20de%20estilo&f=false 5