Estilo

Para dar un estilo más personalizado a nuestra web le podemos añadir unas líneas para modificar algunos elementos del HTML: "body" y "footer".

Cuerpo

En el "body" se podemos añadir los márgenes y el ancho de la página así como el tamaño de la letra.

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

Pies

En el "footer", centraremos el texto y haremos la letra un poco más pequeña. Además, incluiremos una línea separatoria y un poco de margen superior por cuestiones estéticas.

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

En "border-top" está definida una línia de 2 píxeles de grosor: "solid" define que sea contínua. Y "dotted" la haría con puntitos. Lo que va después de la etiqueta es el código del color, llamado "aceituna negra".

"em" significa que es proporcional. Como el tamaño establecido en el cuerpo es 1.4rem, si definimos 0.9em en otro elemento, la letra se mostrará más pequeña proporcionalmente.

Ejemplo

Si incluyéramos estas líneas en nuestro ejemplo, quedaría anidado en la cabeza, y es una información que no se muestra a los ojos.

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>MetaWeb</title>

<style>
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;
}
</style>

</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>

Para ver el resultado, hay que guardar los cambios y refrescar la página del navegador.

Continuar

A medida que vamos ampliando la personalización del estilo, el documento HTML queda muy largo, así que va bien separar el texto del estilo. Ya que estamos, anímate a crear una pequeña hoja de estilo. Se trata de crear otro fichero de texto pero en lugar de extensión html tiene extensión css.

Crea una hoja de estilo