Curso de css. Aplicar estilo a una página web con css.
El estilo sirve para mejorar la presentación de un documento html. Un documento html bien hecho, debe contener en su mayor parte solo la estructura de las partes que lo componen, ya sea una lista, una o varias tablas, párrafos, títulos, etc, aplicando estilo en línea, sólo y únicamente cuando no podamos hacerlo por otra via.
Hay varias formas de aplicar estilo a un documento html:
- En linea.
- Con estilo insertado, controlando todo el documento html.
- Con una Hoja de estilo exterior al documento html.
La primera forma «En linea», Está prácticamente en desuso. por tanto nada más diré de ella. El método de incluir el estilo en el mismo documento html, para controlar
toda la presentación del mismo se aplica añadiendo el siguiente código entre las etiquetas de cabecera <head></head>, de esta manera:
1 2 3 4 5 | <head> <style type="text/css"> p{text-align:center}/*Ejemplo de código css*/ </style> </head> |
Este método puede ser adecuado o efectivo, cuando sólo tenemos uno o varios documentos html que presentar o subir a internet, pero su eficiencia disminuye a medida que incrementa el número de páginas web a presentar. El tercer método que consiste en crear un archivo que contenga todas las propiedades css y que este vinculado a cada página web de nuestro sitio se haría de la siguiente forma, por ejemplo:
- Creamos un archivo con la extensión .css. Este archivo se puede
crear en cualquier editor de texto que no aplique formato, como puede
ser el «Bloc de Notas» de Windows. - Lo nombramos como queramos, pero ha de tener la extensión extensión .css.
Yo lo he llamado «miprimerahojadeestilo.css» y lo guardaremos en la
misma carpeta donde contenemos nuestras páginas o sitio web. - Vincularemos este archivo con cada página web de nuestro sitio. A lo
largo de este curso solo crearemos como dije una página web y una hoja
de estilo vinculada a ella.Si todavía no habeis creado la página web,
ahora es el momento de hacerlo. Lo podeis hacer en el bloc de notas y
guardarla como mipaginaweb.html. - Esta página será muy básica, tan solo poner las etiquetas que vimos
en el curso de html en esta sección:
Página web básica. y acordaros de guardarla con la extensión .html en una
carpeta que llamaremos CURSOCSS y que alojará también el archivo css
miprimerahojadeestilo.css. - Si la carpeta CURSOCSS la situais en el escritorio de vuestro
ordenador, la ruta de los archivos anteriores creados quedará mas »
menos así:
c:/Users/pepito/CURSOCSS/mipaginaweb.html
c:/Users/pepito/CURSOCSS/miprimerahojadeestilo.css
Aunque siempre podeis poner la carpeta donde mejor os parezca, tan solo tener bien presente la ruta exacta donde colocais los archivos. Una vez creada la carpeta y estos archivos, crearemos una subcarpeta dentro de la carpeta CURSOCSS, para alojar nuestros archivos de imagenes y que llamaremos IMAGENES. Podeis hacer otra subcarpeta también dentro de CURSOCSS, para colocar las imágenes tipo objetos como pueden ser adornos, logos,etc, para separar del resto de imágenes, pero yo en el curso no lo haré para simplificar y que no surjan enrredos con carpetas.
Al final la carpeta CURSOCSS se presentara mas o menos así:
Se que el manejo de carpetas es cosa fácil, pero conviene llevar un buen orden de archivos y saber donde está todo situado, sobre todo a la hora de subir archivos a un servidor para publicar nuestras páginas web.
Tener en cuenta que una página web puede tener cientos o miles de documentos html, cientos de imágenes, muchas hojas de estilo vinculadas, videos, etc, por eso llevarlo todo bien ordenado en carpetas y subcarpetas desde el principio, evitará molestos cambios de última hora y enlaces rotos.
El tercer método, es el adecuado para trabajar con numerosas páginas. Si estais pensando en crear vuestra propia plataforma o sitio web, este es el mejor sistema que podeis aplicar, ya que una sola o varias hojas de estilo css, controlarán todo el sitio. Cualquier cambio o retoque que experimente el código que inserteis en la hoja de estilo, se verá automaticamente reflejado en todas las páginas web que esten vinculadas con aquella.
En la siguiente página veremos el código para vincular la hoja de estilo exterior que hemos creado (miprimerahojadeestilo.css) a la página mipaginaweb.html.