Con la finalidad de organizar eficientemente el marcado y diseño de una página web, insertaremos hojas de estilo externas en la creación de un proyecto para internet. Algunos creadores de proyectos destinados a la web, pasan largas horas para especificar correctamente la creación de hojas de estilo externas, por tal motivo, se frustran y dejan de intentarlo. Debido a ello y según las recomendaciones oficiales de CSS y HTML, dominaremos los pasos necesarios para la inserción de estilos en el marcado de una página web.

Cuando creamos hojas de estilo CSS, es necesario dominar las diferentes formas de unirlas al documento HTML, con la finalidad de crear proyectos profesionales, entendibles fácilmente por cualquier programador.

Los documentos CSS pueden ser:

• Hojas de estilo internas: las cuales se crean dentro del documento HTML.
• Hojas de estilo externas: las cuales se crean fuera del documento HTML, es decir, uno adicional posteriomente insertado en el el código HTML, mediante una etiqueta de enlace.

En la siguiente imagen observamos cómo logramos la misma especificación de diseño, con ambas instrucciones.

061-01_0509_ilu01. Tipos de hojas de estilo

Para agregar una hoja de estilo interna es necesario agregar la etiqueta style en la cabecera, y en ella se crean las especificaciones de diseño mediante los selectores y declaraciones correspondientes. Se han aplicado las declaraciones descritas dentro de la etiqueta style, para los encabezados y resaltado de textos, mediante la etiqueta mark. En la siguiente imagen se encuentra el código y la vista del usuario:

061-01_0509_ilu02. Hoja de estilo interna

Las hojas de estilo externas, son declaraciones realizadas en una hoja independiente, por lo tanto, tendremos dos documentos, uno con extensión HTML, donde se redacta con este lenguaje, el marcado de la página web, y el otro documento tiene extensión CSS, donde se realizan las declaraciones de estilo a cada selector con sus diferentes combinaciones.

061-01_0509_ilu03. Hoja de estilo externa

Para agregar una hoja de estilo externa a un documento HTML, es necesario:

• Agregar la etiqueta link en la cabecera del documento, para definir el enlace del documento CSS.
• Definir el atributo rel en la etiqueta link, para indicar cuál es la relación del enlace con el documento HTML.
• Agregar StyleSheet entre comillas como valor de rel, para la definición de una hoja de estilo como relación.
• Especificar el atributo href, para la ubicación del documento CSS. 

061-01_0509_ilu04. Inserción de hoja de estilo externa

Como en el ejemplo están ambos documentos en la misma carpeta, solo se especifica ejemplo.css en la dirección del enlace. La utilidad de una hoja de estilo externa radica en la posibilidad de hacer modificaciones a los documentos por separado.

Existen las hojas de estilo en línea, las cuales solo consisten en agregar la declaración del diseño, en el proceso de redacción del documento HTML, es decir, en cada línea de código donde sea necesario.

Keynotes

• Los documentos CSS pueden ser: Hojas de estilo internas: las cuales se crean dentro del documento HTML. Hojas de estilo externas: las cuales se crean fuera del documento HTML, un documento adicional posteriomente insertado en el el código HTML, mediante una etiqueta de enlace.
• Para agregar una hoja de estilo interna es necesario agregar la etiqueta style en la cabecera, y en ella se crean las especificaciones de diseño mediante los selectores y declaraciones correspodientes.
• Las hojas de estilo externas, son declaraciones realizadas en una hoja independiente, por lo tanto, tendremos dos documentos, uno con extensión HTML, donde se redacta con este lenguaje el marcado de la página web, y el otro documento tiene extensión CSS, donde se realizan las declaraciones de estilo.
• Existen las hojas de estilo en línea, las cuales solo consisten en agregar la declaración del diseño, en el proceso de redacción del documento HTML, es decir, en cada línea de código donde sea necesario.

Con el objetivo de crear correctamente hojas de estilo externas inserta una hoja de estilo externa a un documento HTML, y especifica dos diseños para diferentes etiquetas.

Pasos a seguir:

• Crea un documento CSS y especifica dos diseños para diferentes etiquetas.
• Crea el código para la inserción de hojas de estilo externas a un documento HTML.
• Muestra tu código y resumen a un especialista de la materia, a través de vKonnect, y toma nota de sus sugerencias.

Sabrás que has tenido éxito, cuando se muestren correctamente las especificaciones de estilo en el navegador web de preferencia.

Realiza las modificaciones necesarias y comparte tu código en vKonnect. Solicita a dos compañeros un comentario de optimización de tu código.

Tiempo disponible: 3 horas.

Con el dominio de la inserción de hoja de estilo externa en la creación de un proyecto para internet, invertimos pocas horas en la creación de las instrucciones. También, organizamos eficientemente el marcado y diseño de una página web. La disciplina y concentración son determinantes para el logro de proyectos web eficientes.