Cuando un navegador web carga una página web, la forma en que aparece está determinada por la información de una hoja de estilo en cascada. Hay tres formas para que un archivo HTML use una hoja de estilo: externamente, internamente y en línea.
Las hojas de estilo internas y en línea se almacenan dentro del propio archivo HTML. Es fácil trabajar en este momento, pero como no están almacenados en una ubicación central, es imposible realizar cambios en el estilo en todo el sitio a la vez; tienes que volver a cada entrada y cambiarla manualmente.
Sin embargo, con una hoja de estilo externa, las instrucciones para representar la página se almacenan en un solo archivo, lo que hace que sea realmente fácil editar el estilo en un sitio web completo o en múltiples elementos. El archivo utiliza la extensión de archivo .CSS y se incluye un enlace a la ubicación de ese archivo en el documento HTML para que el navegador web sepa dónde buscar las instrucciones de estilo.
Uno o más documentos pueden vincularse al mismo archivo CSS, y un sitio web puede tener muchos archivos CSS únicos para diseñar diferentes páginas, tablas, imágenes, etc.
Cómo enlazar a una hoja de estilo externa
Cada página web que quiera usar una hoja de estilo externa particular debe vincularse al archivo CSS desde el interior del sitio.
sección, muy parecido a esto:
En este ejemplo, lo único que debe cambiarse para que se aplique a su propio documento es la estilos.css texto. Esta es la ubicación de su archivo CSS.
Si el archivo es llamado estilos.css y se encuentra exactamente en la misma carpeta que el documento que lo vincula, entonces puede permanecer exactamente como se lee arriba. Sin embargo, es probable que su archivo CSS tenga otro título, en cuyo caso puede cambiar el nombre de "estilos" a lo que sea suyo.
Si el archivo CSS no está en la raíz de esta carpeta sino en una subcarpeta, podría leer algo como esto en su lugar:
Más información sobre archivos CSS externos
El mayor beneficio de las hojas de estilo externas es que no están vinculadas a ninguna página específica. Si el estilo se realiza internamente o en línea, otras páginas del sitio web no pueden apuntar a esas preferencias de estilo.
Sin embargo, con el estilo externo, el mismo archivo CSS se puede usar para, literalmente, cada página del sitio web, de modo que todos tengan una apariencia uniforme, y la edición del contenido CSS de todo el sitio web es extremadamente fácil y centralizada.
Puedes ver como funciona eso abajo …
Estilo interno requiere el uso de
Sin embargo, dado que las hojas de estilo externas están contenidas dentro de su propio archivo, pueden crearse así, y significa exactamente lo mismo que en el ejemplo anterior:
cuerpo {fondo-color: verde; } h1 {color: azul; margen izquierdo: 15px; }
En estos ejemplos, el estilo en línea solo se aplica a esa página en particular, evidente por el hecho de que está contenido en los detalles del encabezado de esa página HTML. Con el segundo ejemplo, la información de CSS es autocontenida en un archivo CSS que cualquier página puede vincular usando el código del Cómo enlazar a una hoja de estilo externa sección anterior.
