El CSS que has estado usando hasta ahora ha sido colocado en la sección HEAD de tu Código HTML. Sin embargo, un mejor lugar para poner todo tu CSS es en un archivo externo. (Con esto, nos referimos a un archivo separado.)

En un nuevo archivo de texto escriba lo siguiente (haga clic en File > New en el Bloc de notas, si estás usando esto):

Hojas de estilo externas

Esta va a ser nuestra hoja de estilo externa. Sólo tiene una clase establecida, una pseudo-clase para el estilo de vuelo. Los subrayados se apagan cuando el ratón está sobre el enlace, y el color del texto se vuelve rojo.

Lo principal que hay que notar aquí es que no necesitamos ninguna apertura y cierre Etiquetas de ESTILO: sólo tienes que escribir tus selectores y los corchetes.

Haz clic en File > Save en el Bloc de notas para guardar tu trabajo. Cuando el diálogo navega a tu carpeta de HTML y crea una nueva carpeta llamada css . Muévete dentro de esta carpeta. En el cuadro Nombre de archivo, escribe (etiqueta_13) styles.css . Crea Asegúrate de que Guardar como tipo leer Todos los archivos , si utilizas Windows. Una vez que hayas guardado el nuevo documento, la ventana del explorador debería tener un aspecto similar a esto:

Hojas de estilo externas

Cuando subas una carpeta a tu carpeta de HTML deberías tener esto:

Hojas de estilo externas

Para que una página web pueda ver nuestra nueva hoja de estilo externa, necesitas añadir algunas código en la sección CABEZA.

Abre tu código about.html . Añade lo siguiente en la sección HEAD:

LINK REL = Stylesheet TYPE ="text/css" HREF ="../css/styles.css">

Tu código debería ser así:

Hojas de estilo externas

Para enlazar con una hoja de estilo externa, entonces, se empieza con la palabra ENLACE, después de un soporte puntiagudo a la izquierda. Los otros tres atributos son estos:

REL=
TYPE=
HREF=

El REL significa relación, es decir, la relación entre este about.html y el documento que va a señalar. La REL puede tomar muchas otras pero sólo se utiliza comúnmente la hoja de estilo.

El TIPO se refiere a algo llamado tipo MIME. Para las hojas de estilo, se necesita el valor "text/css".

El último atributo es el HREF. Esta es la ruta de tu archivo CSS. Se utiliza exactamente de la misma manera que para los hipervínculos. Anota el camino para nosotros:

HREF ="../css/styles.css"

El enlace está en la página about.html. La ubicación de la hoja de estilo es una carpeta hacia arriba, de ahí los dos puntos y la barra inclinada hacia adelante, seguida del nombre de la carpeta css. Si nuestra hoja de estilo estuviera en la misma carpeta que la página about.html podríamos tener acaba de hacer esto:

HREF ="styles.css"

Pero guarda tu trabajo y carga tu página about.html en tu navegador. Mueva su pasa el ratón por encima de tu hipervínculo. Si todo ha ido bien, entonces debería volverse rojo, y el el subrayado desaparecerá. Si no lo hace, asegúrese de que la referencia de su archivo sea Bien, y que tengas tu hoja de estilo en el lugar correcto.

Colocar todo tu código CSS en una hoja de estilo externa es mucho mejor que colocar en una página web en particular, ya que puedes hacer cambios en la hoja de estilo externa y afectará a todo el sitio. Por ejemplo, si sus encabezados H1 son todos azul, podría llevarte muchas horas de trabajo cambiarlas a rojo, si tienes colocó código CSS en todas las páginas web. Con una hoja de estilo externa, sólo tienen que hacer un cambio y su sitio se actualiza! Así que si puedes, siempre usa hojas de estilo externas.

En la siguiente sección, aprenderás a convertir una lista HTML en una navegación bar.

| CSS e hipervínculos | listas HTML y barras de navegación