CSS

Conectar con un CSS externo

Vamos a empezar a darle varias capas de pintura y a diseñar cada uno de los elementos que hemos introducido en los temas anteriores utilizando CSS. Para ello es necesario habilitar algún sitio donde podamos añadir el código CSS.
En este caso, vamos a preparar dos lugares para ubicar el CSS:

En un documento CSS externo (donde pondremos todos los selectores comunes que se utilizarán en todas las páginas web del sitio web).
Dentro del propio html (donde ubicaremos los selectores que únicamente se utilizarán en ese fichero html).

Primero, tenemos que crear el fichero CSS externo.

Abre un documento nuevo (vacío) con tu editor y guárdalo con el nombre estilos.css dentro de una carpeta llamada css (esta carpeta estará dentro de la carpeta donde tienes guardado el fichero html que estamos creando en estos momentos: index.html).

Ahora vamos a enlazar nuestro fichero index.html con este estilos.css (vacío).

Abre con tu editor index.html y vamos a añadir tres líneas dentro del <head>

<!doctype html>
<html>

  <head>
	<meta charset="utf-8"/>
	<title>Quiénes somos</title>
	<link rel=stylesheet href="css/estilos.css" type="text/css"/>

	<style type="text/css">
	</style>
  </head>

  <body>
     <header>
 	<img src="img/logo.png" align="center">
 	 Aprende jugando, S.L.
     </header>

     <nav>
        <ul>
          <li><img src="img/icono1.png" align="top"><p>
              Quiénes somos</li>
          <li><img src="img/icono2.png" align="top"><p>
              <a href="servicios.html">Servicios</a></li>
          <li><img src="img/icono3.png" align="top"><p>
              <a href="contacto.html">Contacto/a></li>
        </ul>
     </nav>

     <section>
 	 <div>
 	      <h2>Quiénes somos</h2>
 	 </div>
 	      
 	 <article>
 	   <div>
 	      <img src="img/imagen1.png">
 	   </div>
 	      <h3>Con vocación educativa</h3>
 	      Somos una empresa compuesta por <b>maestros, pedagogos,
 	      guionistas y especialistas en las nuevas tecnologías</b>
 	      aplicadas a la educación para ofrecerle los mejores
 	      servicios.
 	      <br>
 	      Anteponemos la educación a la tecnología.
 	 </article>

 	 <article>
 	    <div>
 	        <img src="img/imagen2.png">
 	    </div>
 	      <h3>Con larga experiencia</h3>
 	      Llevamos <b>desde 1998</b> ofreciendo propuestas
 	      diferentes y acciones educativas concretas a escenarios
 	      diversos.
 	      <br>
 	      Diseñamos una solución educativa creativa a su problema
 	      cotidiano.
 	 </article>

 	 <article>
 	    <div>
 	        <img src="img/imagen3.png">
 	    </div>
 	      <h3>Con entusiasmo y motivación</h3>
 	      La <b>motivación</b> y el <b>entusiasmo personal</b>
 	      mueve montañas y es lo que nos hace diferentes al resto.
 	      <br>
 	      Pruébenos y se convencerá..
 	 </article>
   </section>

   <footer>
 	    <h5>
 	       &copy;2015. Aprende jugando, S.L.<br>
 	       c/ del Álamo rojo, 1, local. Barcelona.
 	    </h5>
   </footer>
 </body>
</html>

La primera línea enlaza este documento html con el que se hace referencia "css/estilos.css".

Las dos últimas líneas sirven para delimitar el lugar donde se ubicarán los selectores CSS que sólo afectarán a los elementos de este html.

Si ves exactamente el mismo resultado que en el tema anterior no es un error, ya que visualmente no se aprecia ningún cambio ya que lo único que hemos hecho ha sido ENLAZAR este documento html con un fichero CSS externo que está vacío y con uno interno que también lo está, por lo tanto no se produce ningún cambio.

En el siguiente tema es donde empezaremos a apreciar cambios sustanciales: