Hoja de estilos CSS
Por: Lucas MuñozIntroducción a los aspectos técnicos de los estilos CSS, como crear una hoja de estilos y relacionarla con nuestra pagina web.
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.
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 vamos a:
- Abrir el bloc de notas (NOTA: con NVU no funciona)
- 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.
- Guardamos el archivo con el nombre: "estilos.css", recuerda, debe terminar en ".css" sin más.
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.
Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y escribimos 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.
Imprimir
Enviar por email
Favoritos
Tamaño de fuente
