Cómo convertir una hoja de estilo CSS en línea a una hoja de estilos externa

CSS (Cascading Style Sheet) declaraciones dictan el formato, el diseño y la apariencia de elementos de la página Web. Puede incluir declaraciones CSS en varias ubicaciones en un archivo HTML, incluyendo en línea, a nivel interno y opcionalmente en un archivo externo. reglas CSS en línea se indican como parte de la etiqueta de apertura de un elemento con el atributo "estilo". Puede incluir hojas de estilo internas dentro de una sección de "estilo" en el área de la cabeza de una página. Puede enlazar a archivos de hojas de estilo externas dentro de la zona de la cabeza página. El cambio de línea de hojas de estilo externas es generalmente simple.

Instrucciones

1 Cree el archivo CSS externo. Abra un nuevo archivo en un editor de texto y guardarlo con la extensión ".css" - por ejemplo, "mypagestyle.css" o cualquier otro nombre que prefiera. Añadir un enlace a su hoja de estilos dentro de la sección de cabecera de la página HTML. Abra la página y buscar el cierre "</ head>" etiqueta. Agregue la siguiente antes de que:

<Link rel = "stylesheet" type = "text / css" href = "mypagestyle.css" />

Alterar el valor del atributo "href" si ha guardado el archivo con un nombre diferente. Este código asume que el archivo CSS se almacena en la misma ubicación que la página HTML.

2 Encuentra las declaraciones CSS que desea mover a la hoja de estilos externa. Si las declaraciones están en línea, aparecerán listadas dentro de las etiquetas de apertura de los elementos de la siguiente manera:

<Div style = "color: # FF0000; background-color: # 000000;"> Aquí es un poco de texto en un elemento </ div>

Este es un ejemplo sencillo en el que se indican texto y colores de fondo. Resalta el texto que aparece entre las comillas como el atributo "estilo", copiarlo y pegarlo en el archivo CSS. Eliminar todo el atributo de estilo del elemento HTML cuando haya que copiar en su hoja de estilo.

3 Agregar clase y atributos ID a sus elementos HTML para identificarlos en el archivo CSS. Alterar su etiqueta de apertura "div" de nuevo, esta vez incluyendo un atributo ID:

<Div id = "contenido"> Aquí es un poco de texto en un elemento </ div>

Si el elemento ya tiene un atributo ID, que se puede utilizar en lugar de agregar el suyo propio. Como alternativa, puede utilizar un atributo de clase de la siguiente manera:

<Div class = "contenido"> Aquí es un poco de texto en un elemento </ div>

4 Alterar su código CSS para reflejar la identidad o la clase de atributos que ha añadido. En torno a las declaraciones CSS que ha copiado en el archivo CSS, coloque un bloque de identificación de la clase o del que ha elegido. Para el atributo ID, utilice la siguiente sintaxis:

contenido

{color: # FF0000; background-color: # 000000; }

Si ha utilizado un atributo de clase, utilice la siguiente:

.contenido

{color: # FF0000; background-color: # 000000; }

5 Copiar cualquier código CSS a partir de una hoja de estilo interna en el archivo externo. Si tiene código CSS dentro de una sección interna en el área de la cabeza de la página HTML, también se puede transferir a su archivo CSS independiente. Este código se indica normalmente de la siguiente manera:

<Style type = "text / css">

div {font-weight: bold;}

</ Style>

Copia el código entre las etiquetas de "estilo" y pegarlo en su archivo CSS. Eliminar toda el área de "estilo" de su HTML cuando se ha copiado correctamente. Guarde los archivos y abra la página en un navegador para probarlo.

Consejos y advertencias

• Cómo almacenar sus declaraciones CSS en un archivo separado le permite estilizar múltiples elementos en una página web a la vez.
• El uso de declaraciones CSS en línea es menos eficiente que el uso de archivos externos, por lo que es mejor evitar.