Lección 3. La hoja de estilos

El mayor problema cuando hacemos una pagina web es que nos gustaría que se viera perfecta en todos los navegadores, explorer, firefox, opera,.... y como no todos interpretan los datos de la misma manera vemos muchas paginas completamente desordenadas.

Esto se soluciona usando la hoja de estilos, aparte de que presenta otra ventaja, podemos hacer que nuestras paginas pesen menos ya que podemos definir el tamaño y estilo de fuente de forma general sin tener que escribirlo continuamente en nuestra pagina y no definir el estilo cada vez que hagamos una frase o una pagina nueva

La hoja de estilos la llamaremos estilos.css

Abrimos nuestra index con nuestro programa

Archivo/nuevo y ahora seleccionamos CSS

La guardamos con el nombre "estilos.css" en la misma carpeta donde se encuentra nuestra pagina index, por defecto os lleva a la carpeta donde tenemos nuestra index

Ahora picamos en la pestaña de nuestra index que tenemos abierta y vamos a vincularla con nuestra hoja de estilos

Picamos en Formato/Estilos CSS/ Adjuntar Hoja de Estilos

Dejamos clicada la opción de vincular y picamos en Examinar

Seleccionamos nuestra hoja de estilos y aceptamos las dos ventanas

Si observamos en nuestra index aparece una nueva frase, la cual nos indica que nuestra index esta vinculada a la hoja de estilos, que de momento tenemos vacia

Además observar que en la pestaña de nuestra index tenemos justo debajo el Código fuente y al lado la hoja de estilos que hemos vinculado, y podemos pasar de una a otra sin necesidad de tener que abrir las dos páginas

Otro detalle antes de continuar, como vamos a usar imágenes que son básicas como fondos u objetos que podamos modificar en un momento dado, en la misma carpeta que tengáis todo lo de vuestra web vamos a crear una carpeta llamada imágenes, no complicaros con letras mayúsculas o demás, tener en cuenta que cuando damos direcciones diferencian las mayúsculas de las minúsculas, así que lo mas simple posible, sin acentos ni signos de puntuación extraños

Podemos crearla directamente desde el Dream, nos situamos en nuestro sitio y pulsamos el botón derecho del ratón eligiendo nueva carpeta

Le damos nombre

Asi que empezaremos a movernos de un archivo a otro, si usais otro programa diferente al dream nos situamos entre las etiquetas de <head></head>

aquí es donde debemos escribir esto: (copiar y pegar este parrafo en el lugar que indico en la captura)

Nuestra pagina reconocerá todos los datos que incluyamos ahora en nuestra pagina de estilos

De momento como no escribimos nada en nuestra hoja de estilos no observaremos cambios en nuestra web, pero como hemos creado una carpeta llamada imágenes, en nuestro hosting crearemos también una carpeta que se llame exactamente igual

Subimos nuestra hoja de estilos y tenemos esto de momento en nuestro hosting, todo vacío pero organizado para no liarnos después, cada vez que hagamos un cambio tener en cuenta que tenemos que resubir el archivo, no cambiar el nombre, siempre modificaremos los archivos que tengamos en nuestro ordenador y al resubirlos este machaca al anterior

Estos archivos tenemos de momento, vosotros en todo caso no tendriais la pagina leccion2 pero lo demás debéis tenerlo exactamente igual

Tutorial realizado por Energiaelca

Derechos reservados