La indentación de los párrafos

Eso si que es una palabra rara. Imagino que proviene de la propiedad "text-indent" que se aplica para establecer un margen a la izquierda solamente de la primera línea de cada párrafo, de modo que ésta queda más metida a la derecha que las demás líneas.

Se aplica colocando "text-indent: XXpx" entre los corchetes del elemento al que se lo queremos aplicar.

Vamos a aplicarlo a todos los párrafos de la parte principal, que eso queda muy bien. Un indentado de 15px creo que es suficiente. Como va a ser una propiedad para los párrafos (p) de dentro de la capa #contenido, incluimos el text-indent en esta línea (lo subrayo para que lo veas claro):

#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}

Ahora guarda la hoja estilo-general.css y haz vista previa de la plantilla para ver como queda. Te gusta? Esto de indentar solo tiene sentido cuando los textos están justificados o alineados a la izquierda. Cuando están centrados no se suele usar, pues no hace falta ese efecto.

Cómo llevamos los códigos?

Para estar seguros de que estamos haciendo el ejemplo según las lecciones aprovecho ahora para dejaros los códigos de la plantilla.html y de la hoja estilo-general.css según han quedado hasta ahora (en realidad lo hago para llenar hueco, que esta página se me había quedado muy cortita, je je je je)

plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>
  <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
  </head>
  <body>
    <div id="global">
      <div id="cabecera">Bienvenidos a mi Web</div>
      <div id="navegacion">Barra de Navegación</div>
      <div id="contenido">
         <div id="menu">
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
      </div>
<p>Esta será la zona principal de la web</p>
<p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<p>Y este es el tercer párrafo. En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
      </div>
      <div id="pie">Este es el pié de página</div>
      </div>
  </body>
</html>

estilo-general.css

* {text-indent:0px; margin:0px; padding:0px; border:0px;}
body {text-align:center;}
#global {width:800px; margin:4px auto;}
#cabecera {background-color:pink;}
#navegacion {background-color:gray;}
#contenido {background-color:orange; width:800px; float:left;}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
#menu {background-color:yellow; width:150px; float:left; text-align:left; margin-right:10px;}
#menu li {list-style:none ; margin: 4px 0px 4px 6px;}
#pie {background-color:brown;}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color:silver;}
a:active {}
p {text-align:justify;}