La Hoja de Estilo
Ahora hay que indicarle a la página "index.htm" que la definición de los fondos, propiedades del texto etc, tendrá que buscarla en ese archivo "estilo.css". Para ello, abrimos la página "index.htm" (la de estilo.css la podemos cerrar por ahora) y en la cabecera (entre <head> y </head>) copiad este trocillo de código:
<link rel="StyleSheet" href="estilo.css" media="screen" type="text/css">
El código total de la página "index.htm" quedará de la siguiente forma tras añadir esa línea:
<html>
<head>
<title>Mi página</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" href="estilo.css" media="screen" type="text/css">
</head>
<body>
Esta es mi pagina principal
</body>
</html>
Guardad y cerrar esa página ahora. Lo que hemos hecho es decirle a esa página que busque los estilos que queremos que siga nuestra web en el archivo "estilo.css". Queda clarito? Me alegro. Si algo no lo entendéis me lo decís en el Foro. No os preocupéis si os parece chino. Poco a poco lo iréis comprendiendo. Confiad en mi y que la fuerza os acompañe, je je je.
Por supuesto, aún no podemos ver los efectos que pretendemos, pues por un lado, no hay elementos a los que aplicar esos estilos y por otro, aún no hemos creado la Hoja de Estilos.
En otros programas, la definición de cosas como el color o imagen de fondo de una página, las propiedades del texto (tipo de letra, tamaño, color, etc) y muchas otras cosas se hacen en la propia página. Esto produce serios problemas a la hora de ver esa página con determinados Navegadores. Muchos habréis oido comentar por ahí que cierta web no se ve bien con un determinado Navegador. Pues bien, haciendo las cosas de este modo (es decir, utilizando estilos) evitaremos esto en gran medida. Si no lo creeis, intentad ver CreaTuWeb con otros Navegadores y veréis como apenas hay diferencias. Lo que haremos nosotros es definir todas esas cosas en la Hoja de Estilos, es decir, en el archivo "estilo.css".
En la página siguiente crearemos esa Hoja de Estilo.
|
Introdución