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

Recomendado para ti

Bestseller No. 1
MUGFFINS Taza Informático (Mejor del Mundo) - Regalos Originales y Divertidos de Informática
  • TAZAS DE ALTA CALIDAD. Color blanco, 11 oz / 350 ml. Cada taza tiene una tinta increíble que las hace resistentes al lavavajillas y microondas. Después de regalarla, la taza perdurará como un recuerdo de tus compañeros de colegio, de trabajo, hijos, pareja, amigos… El mejor regalo para informáticos o estudiantes de informática.
  • LA TAZA, EL REGALO IDEAL MULTIUSOS. Una bonita, colorida y divertida taza, que también vale para muchas cosas. No es necesario comprar regalos caros para hacer sonreír a alguien. La taza pale para todo, aunque se llame “taza de café” o “taza desayuno”, pueden contener otros líquidos como té o incluso cerveza… Desayuna con tu informático y dile: Eres el mejor informático del mundo.
  • IDEA PERFECTA COMO REGALO GRACIOSO. ¿Buscando un regalo complejo? ¡No vale la pena! Aquí tienes un regalo simple, pero a la vez original, útil para aquella persona que también reirá a carcajadas con sus mensajes graciosos. Nuestras tazas son sinónimo de buen precio, mensajes alegres y calidad en el diseño. Ideal como regalo para cumpleaños o aniversarios: el regalo de informática perfecto para hombres.
  • PARA GENTE ESPECIAL de todo tipo, ya sea compañeros de trabajo (jefe, proveedores, clientes, empleado del mes…), familia (padres, madres, abuelos, tíos, hijos, primos, sobrinos…) para novios, pareja, marido / mujer, amigos etc. Esta taza de informático es perfecta para todo el mundo.
  • CAJA SUPER PROTEGIDA para que no re rompa, incluso si el mensajero juega a fútbol con ella. Con un diseño minimalista, hecha en cartón, es sencilla pero bonita para regalar. En pocas palabras, nuestras tazas para desayunar café o té son los mejores regalos divertidos en relación a la calidad, la originalidad y el precio. El mejor regalo que se le puede hacer a informáticos.
Bestseller No. 2
C50-E-11N3 CI3-7020U SYST
  • Muy conveniente
  • Peso del paquete: 2.64 kilograms
  • Producto de calidad
  • Fácil de usar