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.
MisiónCon 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.
CierreCon 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.
