Poner el Título y Vincular los Estilos CSS
Bien. El siguiente paso será ponerle un título a la página y después ponerle un vínculo a la hoja de estilos CSS que crearemos más adelante. Para ponerle un título basta con escribir dentro del head lo siguiente:
En lugar de "Título de mi página" pon lo que más te apetezca. Es lo que saldrá en la barra superior del navegador, esa azul de arriba del todo.
Para no llenar la hoja de código y para poder escribir todos los estilos en un solo lugar y no en cada una de las páginas de la web, vamos a crear una Hoja de Estilos. La podemos hacer igual que hicimos la página anterior. Abrimos el bloc de notas o notepad.exe de windows
, y sin escribir nada en ella la guardamos con este nombre y extensión: estilo.css. Te aseguro que este archivo (Hoja de Estilos) es mágico, ya lo verás
Ya tenemos una página web y una hoja de estilos (vacia, ya la llenaremos más tarde). Ahora es importante guardar ambos archivos dentro de una carpeta que se puede llamar como querais. Yo la llamaré "EJEMPLO-DIV". Ya he guardado esos dos archivos dentro de ella, haz lo mismo y seguimos.
Siguiente paso?
Para que la página creada pueda leer la hoja de estilos CSS hay que decirle dónde está y como se llama. Esto se hace escribiendo una línea un poco rara dentro del head del archivo index.html. Como ves, en el head suelen ir indicaciones, información de la página, mientras que lo que finalmente se verá en la web será lo que hay dentro del body, no lo del head. Curioso, no?
La línea mágica que hemos de escribir en index.html, entre <head> y </head> (la barrita "/" delante de la palabra significa que ha terminado su definición) es esta:
De esta línea,lo único que quizás cambie en cualquier otra web es lo escrito en rojo, es decir, el nombre y lugar del archivo de la hoja de estilo. Lo demás siempre es así.
Nuestra página web (index.html) hasta el momento queda así:
<head>
<title>Mi Primera Web Con DIVs</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<body>
<div>Este es mi primer div</div>
</body>
</html>
Dentro de href="........." hemos indicado además del nombre del la hoja de estilos el lugar donde index.html debe buscarla. Si dentro de la carpeta EJEMPLO-DIV hubiéramos creado otra llamada BORRAR y hubiéramos guardado el archivo estilo.css dentro, lo que tendríamos que poner entonces sería:
(ESTO NO LO PONGAS EN NUESTRO EJEMPLO)
Eso es lo que se llama la Ruta del Archivo (este botón significa que puedes aprender más sobre ese tema haciendo clic en él).
Más sobre Capas:
