Hoja de estilos CSS
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 código.
Para eso usaremos los estilos CSS, con ellos podemos aplicar cambios a los colores, fuentes, margenes, espacios, etc. de la web mucho mas fácil.
Crear la 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 podemos abrir el bloc de notas (NOTA: con NVU no funciona) y ni bien abre haremos 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-ccusw donde estan los demas archivos de este curso, y en el nombre pondremos "estilos.css", recuerda, debe terminar en ".css" sin más, que mareo jeje.
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.
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 como se especifican esos atributos, "href" busca la hoja de estilos, "rel" le dice la relación y "type" el tipo archivo, o mejor dicho, de contenido.
Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y escribiremos esto:
body{background-color:black;}
Guardamos y abrimos el archivo index.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.
Siguiente lección: poner fondo con CSS
Mira el video de esta lección
Estilos CSS - Octava Lección - ComoCrearUnSitioWeb.com from Lucas Muñoz on Vimeo.
Si tienes alguna duda puedes entrar al foro y registrarte para que te ayudemos entre todos.