Programación Web » Aprender CSS » Unidad 1. Aprender CSS:

Vincular hojas de estilo en archivos HTML

Visto: 1,099

css

Las instrucciones de estilo se pueden vincular de varias maneras al código HTML. Una de ellas es escribirlas directamente en la etiqueta HTML (inline), una serie de instrucciones en el área de cabecera del documento (embedded) o bien colocarlas externamente en un archivo aparte (extern).

Respecto a la separación entre estructura y representación que indicamos al principio, lo mejor es realizarlo a la variante externa. Puesto que los estilos inline se escriben directamente en el código fuente, sólo resultan apropiados, en el mejor de los casos, para la fase de desarrollo o para la comprobación de determinados valores. Además, su sintaxis varía muy poco de la sintaxis propia de las instrucciones de estilo. Los estilos embedded no se pueden utilizar con efecto en todo el archivo, sino que se han de escribir hoja por hoja, lo que complica considerablemente su mantenimiento. Con ello se ve muy limitada la flexibilidad que se gana utilizando estilos externos.

Instrucciones de estilo directamente en la etiqueta HTML (inline)
La instrucción escrita directamente en la etiqueta HTML sería la siguiente:

<h1 style=”color:#000033;”>Título azul</h1>

Observe que la declaración no se escribe entre llaves, sino en un atributo típico del lenguaje HTML: style=”…”. Además, la instrucción sólo sirve para esta instancia de <h1>. En todas las demás instancias es necesario escribir de nuevo la instrucción.

Instrucciones de estilo en la cabecera del documento (embedded)

Para incorporar instrucciones de estilo en el área de cabecera <head> del documento HTML se necesita, en primer lugar, el elemento <style> con el atributo type=”text/css”. En este elemento se escriben todas las instrucciones en la sintaxis que ya hemos descrito.

<head>
<!-- demás elementos-->
<style type=”text/css”>
h1 {color:#000033;}
h2 {color:#003300:}
<style>
</head>

Además del título azul <h1>, aquí también se especifica que los títulos <h2> han de ir en color verde. Observe que estas instrucciones son válidas para todas las instancias de <h1> y <h2> que aparecen en el documento. No olvide cerrar el bloque con la etiqueta final </style>.

El bloque <style>…</style> se ha de introducir completo en el área de cabecera <head> de cada archivo.

Hojas de estilo vinculadas (extern)

Veamos ahora la solución reina de la vinculación de estilos. Todas las instrucciones necesarias se definen una vez en un archivo externo (la hoja de estilo) y el archivo se referencia después en cada documento HTML en el que queremos aplicar las instrucciones. Si modificamos una o más de esas instrucciones, éstas quedan desactualizadas automáticamente en todos los documentos vinculados.

El archivo con las definiciones de la hoja de estilo debe ser un archivo ASCII puro sin ningún otro “markup”. Nuestro consejo es que guarde siempre el archivo con la extensión .css, por ejemplo miestilo.css.

Escriba en él todas las instrucciones CSS que desee, utilizando exclusivamente la sintaxis descrita en el apartado anterior, por ejemplo:

h1 {
background-color: #c0c0c0;
color: #000033;
}

La referencia del archive CSS en un document HTML se escribiría así:

<head>
<!-- demás elementos -->
<link rel=”stylesheet” type=”text/css” href=”css/miestilo.css”>
</head>

Ha valido la pena escribir el(los) archive(s) CSS en un subdirectorio propio. Su ruta de acceso se puede indicar de manera relativa o absoluta.

Artículos de navegación

Acerca del Profesor

Adrián Delgado Rodríguez

Ingeniero en Computación, docente por convicción y apasionado por la programación Web.

Actualmente trabaja como Profesor para en el Centro Universitario de la Costa de la Universidad de Guadalajara y como Desarrollador Web.

Síguenos:

 

Ver el perfil completo de Hugo Adrián Delgado Rodríguez (akus.net).

Deja un comentario

avatar comentario
Jose
Las instrucciones de estilo se pueden vincular de varias maneras al código HTML. Una de ellas es escribirlas directamente en la etiqueta HTML (inline),




Diseño de páginas Web en Puerto Vallarta y Bahía de Banderas akus.net
subir

Síguenos en Facebook

Artículo de la semana

Cómo iniciar una página WebMetodología para la creación de sitios

Comprende las fases de Análisis, Planificación, Contenido, Diseño. ¿Qué método utilizas?