Muchas veces nos vemos un poco limitados al trabajar solo con HTML, aplicar colores, tamaño de fuentes y demás puede ser casi imposible si nuestra pagina web tiene mucho contenido.
Para eso usaremos los estilos CSS, con ellos podemos aplicar cambios de colores, fuentes, margenes, espacios, etc. a la web mucho mas fácil.
Cómo crear una hoja de estilos CSS
La hoja de estilos CSS no contiene código HTML, por lo tanto no deberemos escribir etiquetas HTML en el, para crear la hoja de estilos vamos a:
- Abrimos el Dreamweaver, luego Nuevo > Pagina Basica > CSS
- Clic en Archivo -> Guardar Como... se nos abrirá una ventana donde tendremos que decirle en que ubicación queremos guardar la hoja de estilos, nosotros los haremos en la carpeta ejemplo-pw2 donde estan los demas archivos de este curso.
- Guardamos el archivo con el nombre: "estilos.css".
Muy bien, una vez que tengamos el archivo estilos.css vacio tenemos que lograr, de alguna forma, que los estilos que escribamos en ese archivo sean tomados en cuenta por el archivo HTML.
Nota: recuerda que NO hay que escribir código HTML en la hoja de estilos.
Relacionar la hoja de estilos CSS con nuestra pagina web
Para relacionar la hoja de estilos CSS utilizaremos la etiqueta
<link>, en ella deberemos especificar la ubicación, tipo de archivo y la relación entre la hoja de estilos y la pagina web, debes acordarte SIEMPRE, que la etiqueta
<link> va dentro de la etiqueta
<head>, de esta forma:
<link href="estilos.css" rel="stylesheet" type="text/css" />
Ahí vemos que se especifican varios atributos, cada uno sirve para:
- href: busca la hoja de estilos
- rel: le dice la relación
- type: le dice que tipo de archivo es, o mejor dicho, que contenido llevará dentro.
- Guardamos esto como index.html o con la pagina que venias trabajando.
Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y escribimos esto:
body{background-color:black;}Guardamos la hoja de estilos (estilos.css), guardamos la pagina html y abrimos el archivo html con nuestro navegador (Internet Explorer, Firefox, Opera, etc), si todo fue bien tendriamos que ver el fondo de nuestra página de color negro.
2010-06-25 
5693 leídas 
