Las hojas de estilo se pueden almacenar en archivos externos y vincularlas a uno o m&aaute;s documentos. Una hoja de estilo externa es un archivo que contiene únicamente especificaciones CSS. Podemos utilizar hojas de estilo externas con varias pánas Web para asegurar una homogeneidad de una ágina a otra
Si tenemos un documento con estilos internos y decidimos utilizarlos para otras páginas podemos exportar esos estilos de manera sencilla a una hoja de estilos externa.
Ejemplo: En el documento life.html ejecutamos Archivo > Exportar> Estilos CSS. Se abre el cuadro de diálogo Exportar estilos como archivo CSS. Llamemos a la hoja de estilo lifestyle.css y guardemos el archivo en la misma carpeta que life.html...
Como consejo, en nuestro sitio deberíamos colocar el archivo CSS en el directorio raíz de nuestro sitio o en una carpeta llamada CSS en caso de tener más de un archivo de estilos; y debería tener un nombre más genérico, como estilos.css, default.css, azul.css, verde.css. etc.
Si deseamos utilizar esta hoja de estilo externa en el documento desde el que convirtió los estilos internos, eliminemos primero todos los estilos internos antes de vincular a la hoja de estilo. Aunque podemos adjuntar una hoja de estilo externa con estilos que utilizan los mismos nombres que los contenido en una hoja de estilo interna, deberíamos eliminar los estilos internos para evitar conflictos, reducir la cantidad de código en nuestro documento HTML y reducir la posibilidad de que se produzcan errores y confusiones.
Hacer vículos a una hoja de estilo externa
Ya disponemos de una hoja de estilo externa con varias definiciones de estilo. Puesto que es externa, podemos utilizar este archivo para este archivo vinculando para hoja de estilo al que desean que se apliquen las definiciones del estilo.Tendremos que aplicar manualmente las clases a los párrafos o al texto seleccionado.
Ejemplo: Abrimos el archivo keepers.htm. u otro creaco por tí que no contenga ningún estilo interno o externo. Esta página no contiene estilos internos ni externos. En los pasos siguientes vamos a vincular este archivo a la hoja de estilo externa con la que hemos estado trabajando para que el formato de texto sea uniforme en ambas páginas.
Hacemos clic Adjuntar hojas de estilo, que encuentra en la parte inferior del panel Estilos CSS.
Se abre el cuadro de diálogo Adjuntar hoja de estilo externa.
Hacemos clic en el botón Examinar y localizamos el archivo lifestyle.css, que creamos al comienzo del capítulo. Nos aseguramos de que esté seleccionado Vincular en el área "Aņadir como:" y hacemos clic en Aceptar.
Creación de estilos externos
En este ejemplo, crearemos un estilo nuevo en la hoja de estilo externa lifestyle.css volviendo a definir una etiqueta HTML. Al redefinir la etiqueta HTML Heading 3 (<h3>), le diremos al navegador que cualquier texto que utilice la etiqueta <h3> debe mostrarse con el formato que especificamos. Esto es muy útil porque nos permite cambiar el formato básico de Heading 3 para todas las páginas de nuestro sitio que vinculen a esta hoja de estilo.
Ejemplo: Hacemos clic en el icono "Nuevo estilo CSS" del panel Estilos CSS. En el área "Tipo de selector", seleccionamos Etiqueta. Utilizamos el menú Etiqueta para seleccionar h3. Del área "Definir en:" seleccionamos la opción de menú y elegimos lifestye.css. Hacemos clic en Aceptar.
Se abrirá el cuadro de diálogo "Definición de regla para h3 en llifestyle.css". En la categoría Tipo, seleccionamos "Courier New, Courier, monospace" del menú Fuete, 18 del menú Tamaņo y cambiamos la medida a puntos en el segundo menú de Tamaņo. Seleccionamos Negrita del menú Grosor y seleccionamos azul oscuro (#000033) del área Color. Hacemos clic en Aceptar.
En el documento se aplican de forma automática estilos de etiquetas HTML redefinidos. El estilo que hemos creado se reflejan en el encabezado "Keeperīs Responsabilities".
Ejemplo: Colocamos el punto de inserción dentro del primer párrafo situado debajo del encabezado "keeperīs Responsabilities".
El selector de etiquetas situado en la parte inferior izquierda de la ventana del documento muestra la etiqueta HTML <p> define un párrafo.
Hacemos clic en el icono "Nuevo estilo CSS " en el panel de Estilos CSS. Por defecto, el campo de texto Etiqueta debería mostrar p, Etiqueta debería estar seleccionado en el Tipo de selector y la sección "Definir en " debería mostrar lilfestyle.css en el menú. Realizamos los cambios necesarios para que conincidan estos valores y hacemos clic en Aceptar.
En la categoría Tipo, seleccionamos Fuente: Verdana; Tamaņo: 12puntos; Alto de línea: 17puntos; Color #333300.
Ejercicio: Coloque el punto de inserción en la primera línea de la lista que comienza por "Fill lamps with oil". En el selector de etiquetas, seleccione <ol>.
Haga clic en el icono "Nuevo estilo CSS" en el panel Estilos CSS. Compruebe que "ol" aparece en el campo de texto Etiqueta, que Etiqueta está seleccionado en Tipo de selector y que el estilo se creará en la hoja de estilo lifestyle.css. Haga clic en Aceptar.
Configuremos Fuente: Verdana; Tamaņo: 11puntos; Estilo: Cursivaf; Color: #6666999.
Ejercicio: Haga clic en el encabezado "Daily Tasks", seleccione la etiqueta <h4> en el selector de etiquetas y aņada un nuevo estilo CSS a la hoja lifestyle.css.
Configuremos Fuente: Courier New; Tamaņo:14puntos; Color: #333366. Siempre podeis elegir un texto creado por vosotros y hacer los ejercicios asignandoles los nombres que deseeis a las CSS externas.
