Add to Flipboard Magazine.

CSS, creando hojas de estilo enlazadas

Las hojas de estilo son un elemento básico del desarrollo de una página web. Permiten modificar distintos parámetros de formato, que van desde el tamaño de fuente hasta el color del fondo o el tipo de fuente, entre otros. Se trata de archivos con extensión CSS (Cascading Style Sheets) y van componiendo diferentes aspectos dentro de una página HTML.

La principal ventaja al usar hojas de estilo, es que puedes crear una principal y vincularla al resto de las páginas, así todas tendrán el mismo estilo sin necesidad de hacer una configuración manual. Cualquier modificación que realices en la hoja de estilo afectarán a las páginas vinculadas de forma inmediata.

Al trabajar en edición HTML visual, cuando convertimos texto en enlaces o le damos formato a una porción del texto, lo que estamos haciendo es modificar la hoja de estilo pero trabajando de una manera más sencilla, sin tener que conocer código y simplemente modificando parámetros visualmente.

Crear una hoja de estilo

Creamos una subcarpeta de nombre css dentro de la carpeta principal que bautizaremos MiWeb. Tenemos que descargar una foto en jpg, una animación en gif y un archivo htm para seguir con los próximos pasos. Estos tres archivos los colocaremos en la carpeta mi web. Paso siguiente, abrimos Kompozer, elegimos la opción Archivo ->Abrir, localizamos el htm y le damos al botón de abrir. Se abre una página y cada vez que presionas sobre un párrafo de la página puedes ver, en la barra de herramientas, que formato tiene cada uno: tipo de fuente, tamaño, color, etiquetas.

Volvemos a Kompozer y elegimos la opción Herramientas -> Editor CSS. Se abre un cuadro de diálogos y elegimos la opción Hoja de estilos enlazada. También puede aparecer como (Elem. Enlace).

Desde aquí podremos guardar los estilos en código HTML o como archivos CSS, independientes. Como queremos que sea una hoja de estilo enlazada le damos a la segunda opción. En la casilla que dice URL, vamos a poner la dirección css/estilopropio.css. Así Kompozer guardará tus estilos dentro de esta subcarpeta que previamente creamos.

El nombre de la hoja de estilos aparece en el recuadro de la izquierda, y el siguiente paso es ir modificando los numerosos parámetros que le darán el estilo visual a tu página web. No olvides que se trata de un proceso que lleva su tiempo, pero rinde frutos al darle a tu web un estilo único, creado totalmente por ti.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *