Hoja de estilo

Este es el ficherito de texto que define la apariencia de nuestra web. Para darle vida tendremos que:

Crear un documento con extensión .css y copiar ahí el estilo.
Relacionar el estilo con el index.html a través de un enlace.
Eliminar el estilo de la fichero html.

Crear

En nuestro editor de texto abriremos un nuevo documento. Allí pegaremos el formato del cuerpo y del pie de página. Guardemos el documento y llamémoslo "estilo.css". Esto es lo que tenemos que poner en ese fichero:

body {
  margin: 0 auto;
  max-width: 42em;
  font-size: 1.4rem;
}

footer {
  text-align: center;
  font-size: 0.9em;
  border-top: 2px solid #3B3C36;
  margin-top: 1rem;
}

Relacionar

Para que nuestro documento html sepa donde ir a buscar el estilo le tenemos que añadir una línea con un enlace en la cabeza, y así lo relacionamos con el "estilo.css".

Ahora nuestra cabeza quedaría así:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>MetaWeb</title>
  <link rel="stylesheet" href="estilo.css">
</head>

Eliminar

Como ahora ya tenemos el estilo en la hoja, podemos borrar el estilo que hemos redactado en el "head" del index.html. Veremos el resultado si guardamos los cambios y refrescamos el navegador. Este es nuestro "index.html" ahora:

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>MetaWeb</title>
  <link rel="stylesheet" href="estilo.css">
</head>

<body>
  <h1>h1 o cabecera uno</h1>
  <p>Esto es un párrafo.</p>

  <h2>h2 o cabecera dos</h2>
  <p>Esto es otro párrafo.</p>

<footer>
<p>Esto es un pie de página centrado y en letra más pequeña.</p>  
</footer>

</body>
</html>

Continuar

Para completar nuestra web, podemos cambiarle los colores, definir la fuente tipográfica y añadir un menú de navegación.

Sigue con los colores y las letras