CURSO DE DISEÑO WEB AVANZADO (V)
CSS como cabeza de un documento

Supongamos que tenemos una página con este comienzo:

<HTML>
<HEAD>
<TITLE>Todo sobre la Copa Libertadores</TITLE>
</HEAD>
<BODY>
<H1> Goles son amores </H1>
<P> Bienvenidos al sitio sobre fútbol más importante de Latinoamérica </P>
</BODY>
</HTML>

Para agregar una Stylesheet que regule la apariencia de este documento hay que insertar en su cabeza del documento (es decir, entre <HEAD> y </HEAD>) las siguientes etiquetas:

<STYLE TYPE="text/css">
<!--
H1 { color: blue; font-size: 40px; font-family: arial }
P { background: red; font-family: impact }
-->
</STYLE>

El código del documento completo seria:

<HTML>
< HEAD>
< TITLE> Goles son amores </TITLE>
< STYLE TYPE="text/css">
<!-- H1 { color: blue; font-size: 40px; font-family: arial }
P { background: red; font-family: impact }
-->
</STYLE>
</HEAD>
<BODY>
<H1> Goles son amores </H1>
< P> Bienvenidos al sitio sobre fútbol más importante de Latinoamérica
</BODY>
</HTML>


Entre <STYLE TYPE="text/css"> y </STYLE> se agregaron dos indicaciones de estilo: una que afecta a cada header <H1> que aparece en el documento y otra a cada párrafo (<P>). Y el resultado:

Goles son amores

Bienvenidos al sitio sobre fútbol más importante de Latinoamérica


Las marcas de estilo están conformadas por reglas que indican la etiqueta y entre llaves { } los atributos. Hay numerosas propiedades que pueden ser modificadas por cada etiqueta: tamaño, color, tipografía e, incluso, su posición. Las que ponemos aquí son sólo algunas de ellas.Un ejemplo simple sería:


H1 { color: blue }

Esta regla indica al browser que cada vez que aparezca la etiqueta <H1> la mostrará en azul. Todas las etiquetas que integran el HTML pueden ser definidas marcas de estilo, desde las tablas hasta algunas propiedades de las la etiqueta <IMG...>.

Otros elementos que saltan a la vista del código utilizado son la expresión Type="text/css" y la etiqueta para indicar comentarios "<!-- y -->".(Recordar primer entrega del tutorial básico). Type="text/css" sirve de aviso para los browsers que no soportan CSS pasen de largo todo el código que marca el estilo. Esto es fundamental y no debe faltar en ninguna página. La etiqueta de comentarios es todavía más importante, ya que algunos browsers viejos no sólo no reconocen las CSS sino tampoco el aviso Type="text/css".

Ya vimos como insertar estilo para un documento. Ahora vamos a ver como insertar una sola hoja de estilo para varios documentos.


•CSS como documento externo

TEMAS RELACIONADOS
Manual de JavaScript para "bajar" a tu computadora
Tutorial de Flash 5
Editores de páginas web fáciles y gratuitos

Todo para tu sitio