Introducción a CSS: Parte 2
Cómo crear una hoja de estilo externa vinculada
Para crear una hoja de estilo externa, y anexarlo a nuestras páginas web, todo lo que necesita
hacer es crear un documento de texto simple (en las ventanas, simplemente haga
clic con el botón derecho y seleccione nuevo -> documento de texto) y luego
cambie el archivo de tipo .txt a .css.
Puede cambiar el tipo de archivo simplemente cambiando la
extensión del archivo. La extensión del archivo en Windows le dice a la computadora
qué tipo de archivo es y le permite a la computadora determinar cómo manejar el
archivo cuando, por ejemplo, intenta abrirlo. Probablemente lo has adivinado; Los archivos CSS son solo
archivos de texto con formato especial, y de la misma manera que las páginas
HTML. No hay nada especial o diferente en el propio archivo, más bien, es el
contenido del archivo lo que hace que un documento HTML y una página CSS sean
lo que son.
Al trabajar con un documento CSS externo, hay un par de
puntos para recordar:
1. No agregue estas etiquetas en la página CSS como lo haría
si incrustara el código CSS en su HTML:
<style type = "text / css"> </style>
Dado que el enlace de CSS en su página web dice que está
enlazando a una página de CSS, no necesita declarar (en el archivo CSS externo)
que el código de la página de CSS es CSS. Eso es lo que hacen las etiquetas de
arriba. En su lugar, simplemente agregaría su código CSS directamente a la
página de la siguiente manera:
.minuevositioweb {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
En el ejemplo anterior, he creado una serie de clases CSS
que se pueden aplicar a cualquier etiqueta HTML de la siguiente manera:
<p> Mi texto con estilo CSS </p>
o
<h2 class = "my3rdNewStyle”> Mi texto con estilo
CSS </h2>
Asi logramos que el resultado sea el mismo en el navegador.
En la siguiente nota hablaremos mas sobre el diseño de páginas web con CSS.
