Cómo vincular css externo a una página

Para enlazar una página HTML a una hoja de estilos en cascada (CSS) externa, sólo tiene que insertar una sola línea de código en la cabecera de la página que hace referencia el nombre y la ubicación del archivo CSS externo en relación con el nivel de la raíz del servidor en el que el sitio reside.

La línea de código para el vínculo debe ser colocado en algún lugar entre la apertura y cierre etiquetas de cada página HTML en su sitio que desea ser de estilo con ella.

Cuando se introduce el nombre de archivo del CSS con precisión en el archivo HTML utilizando la sintaxis enlace correcto, el código de enlace proporciona instrucciones al navegador sobre cómo la información de estilo CSS debe ser interpretado y aplicado a la página, que a su vez determina cómo aparece la página en el navegador.

He aquí un ejemplo de un enlace a un archivo CSS externo con el nombre del archivo main.css, donde el archivo que se está originario utiliza el href atributo de la etiqueta de enlace, que es una etiqueta sin cerrar en HTML:

Cuando se añade el código de enlace a una página de XHTML, la etiqueta debe estar cerrado mediante la adición de un espacio adicional y barra diagonal antes del final:

Los otros atributos dentro de la etiqueta además de la href son necesarios para ayudar al navegador interpretar los datos en el archivo CSS vinculado:

• los rel atributo establece la relación entre el documento original y el archivo vinculado, e identifica el archivo vinculado como una hoja de estilo.

• los escribe atributo especifica el tipo de lenguaje de estilo que se utiliza en el archivo vinculado, que en este caso identifica que el archivo vinculado está escrito en " text / css " formato.

Por coherencia, trate de colocar el enlace CSS en sus páginas web en la misma ubicación en el código de la página a la página. Por ejemplo, es posible que desee agregar la etiqueta de enlace directamente después de la última etiqueta meta, o colocarlo justo encima de la clausura etiqueta. Ser coherente puede ayudar a encontrar rápidamente la etiqueta si alguna vez necesita para modificarlo.

Además de la colocación del enlace dentro de las páginas HTML que utilizan el archivo CSS externo, también se debe prestar atención a donde se encuentra el archivo (s) CSS en relación con los otros archivos dentro del sitio.

Muy a menudo, cada sitio tiene un solo archivo CSS, y ese archivo se encuentra en la raíz, que es sólo una forma elegante de decir que el archivo CSS se encuentra en la misma ubicación que el index.html archivo, que es la página principal de su sitio.

El nivel de la raíz se refiere a la planta baja de su sitio, si se trata de una copia local de su sitio sentado en su ordenador delante de usted o de una copia del sitio ubicado en el servidor host remoto. Con la mayoría de los sitios, la página principal se encuentra en el nivel raíz junto con un imágenes carpeta y todas las otras páginas principales del sitio.

Para los sitios más grandes, algunos diseñadores crear subcarpetas en el nivel raíz para albergar a otras cosas, como archivos externos de javascript y jQuery, archivos CSS externos, scripts CGI, o grupos de páginas que caen en una categoría similar (por ejemplo, todas las páginas relativas a productos de una empresa o de servicios).

Si su sitio requiere dos o más hojas de estilo en cascada (tal vez uno para todas las páginas y por segundo para un puñado de páginas que se imprimirá), puede ser beneficioso para usted para crear una carpeta separada llamada css en el nivel raíz del sitio y luego guardar los archivos CSS juntos dentro de ella.

A continuación, puede acceder a cada CSS desde esa ubicación, siempre que el href de tu CSS enlace indica la nueva ubicación de la carpeta junto con el nombre de archivo:

href ="css / main.css" rel = "stylesheet" type = "text / css">