Pequeña duda CSS

Buenas! Estaba interesado en aprender HTML5 pero vi que no tenia ninguna base previa así decidí buscar un curso html y css entonces di con este curso:

http://www.cristalab.com/curso-html/

Creo que estaría bien aprender html4 por que es una base para el 5 no se si estoy en lo cierto. Bueno el punto es que estuve practicando un poco y me tope con un pequeño problemita a ver si alguno me ayuda a resolverlo:

Esta es mi web:


Estaba buscando la forma de eliminar el espacio entre el container-header y el footer-container (Dice "Esto" en rojo".

Codigos:
-index
-hoja de estilos

Lo otro es si no hay problema que empiece con el html 5 de una vez o practique mucho mas el html4 que me recomiendan?

Lo que podrias hacer es agregar un Reset CSS (Para resetear los estilos del navegador) o simplemente escribir lo siguiente

Código CSS :

*{margin:0;padding:0;}

Y problema resuelto en cuanto a los espacios. Ahora si aprender o no HTML5?
Pasate por este post que escribio Freddie, creo que podes aclarar un poco tus dudas.

HTML5 esta en prueva, la mayoria de los navegadores viejos no lo soportan ( No que a mi me interesen esos buscadores ) pero los mas nuevos si lo soportan, yo te recomendaria que aprendieses XHTML ( no e escuchado el termino "HTML4" en ningun lado ) , lo que yo se lo eh aprendido con libros ( XHTML Dog, Learn HTML and CSS with W3C School & otros ) asi como CSS3 el cual esta en la misma situacion que HTML4, puedes aprenderlos, pero es no todos los buscadores lo van a soportar, Aprende XHTML y CSS y despues que tengas esos claros, entocnes muevete HTML5 y CSS3 . Para eliminar el espacio solo tienes que agregar una regla en el archivo CSS, que es lo que Chitin te explico, solo para expandir el "margin" es el espacio entre un bloque y otro, y el "padding" es el espacio hasta el borde del bloque.

Al final puse las lineas de código al style y se quitaron los espacios en blanco los debía poner así, no?

Código CSS :

#header {
   background-color:#069;
   color:#FFF;
   width: 700px;
   height:100px;
   text-align:center;
   font-family: "Comic Sans MS", Arial, sans-serif;
   font-size:24px;
   margin:0px;
   padding-top:1px;
}
]#footer {
   background-color:#069;
   color:#FFF;
   text-align:center;
   font-family: "Comic Sans MS", Arial, sans-serif;
   font-size:24px;
   width:700px;
   height:100px;
   margin:0px;
   padding-bottom:1px;
   clear:none;
}

Les pregunto por que me quedo la astilla de la duda jajaja. Gracias por sus opiniones sobre el html 5 pues decidí seguir con el curso de xhtml cuando ya crea que e adquirido buen conocimiento sobre este pasare al html5.

Creo que Daniel tiene una leve trastorno en distinguir la diferencia entre un browser y un buscador .
Creo que deberías empezar a revisar html5 ya que varias cosas de html4 fueros eliminadas en html5

Bueno hoy quise empezar una web desde cero claro apoyándome de las guías de referencias de css2 y esto fue lo que salio:



Lo único que no es mio es el menu superior que lo busque por internet y di con ese, gracias por sus comentarios.

La diferencia entre "browser" y "buscador" ? Perdon pero segun mi entendimiento: browser ( ingles ) = buscador ( español ). HTML5 no descalifica las revisiones anteriores... ahi tags que fueron descalificados en XHTML y continuan descalificadoes en HTML5, la diferencia esque HTML5 agrega tags nuevos y una declaracion de documento nueva, lo que quiero decir es que es mas seguro y facil empesar desde una base estable (XHTML).

jeje lo que @gamernoob quizo decir era "diferenciar era entre buscador y navegador".

Y si, creo que @Danniiel está un poco confundido. No es que la mayoría de los navegadores viejos no soporten HTML5, es que las empresas no son adivinas y por ende van actualizando sus productos según las tendencias de la tecnología. Pero, existen scripts que ayudan a navegadores antiguos a interpretar las etiquetas HTML5, al igual que algunos efectos CSS3...

Aprender HTML5? Sí hazlo. La recomendación es aprende las bases de XHTML para que sepas como organizar y optimizar el código (reglas de XML).

En el transcurso de tu aprendizaje separa definitivamente la parte estructural de la parte visual. Todo lo que tenga que ver con la parte estética se maneja con CSS. Entonces si ves alguna etiqueta (HTML) que se use explicitamente para afectar la parte visual del sitio... ya esta en desuso (font, b, i, atributos como bgcolor...).

En lo personal deje de usar el reset de Erick Meyer, ya que sobre-escribía todas las propiedades del navegador, y luego yo con mi código las volvía a sobre-escribir...
Solo inserto como primera línea lo que posteo @Chitin, borrar espaciados de todos los elementos. Después voy generando mis propios estilos.

x) Ahora hablamos claro, navegador y buscador ( hablando de un search engine ) si con cosas distintas, Yo no creo que no se deba aprender y usar HTML5 Y CSS3 aquí y ahora, solo opino que para alguien que empieza a sumergirse en este mundo es mejor empezar por lo que ya esta probado y establecido.

Bueno, lógicamente tiene que aprender HTML desde lo más básico

p - es para insertar párrafos
h1 - es para insertar el título principal

b - es para asignar un formato de texto en negrita...
i - es para asignar un formato de texto en italica...

Ya que aprendiste eso, debes des-aprenderlo. Negrita e italica es parte visual...
Sí solo que quieres es solo resaltar una palabra (ponerla en bold) pero que no tenga cierta importancia en el párrafo, lo haces con css:
[html}<span class="bold">palabra en negrita</span>[/html]
Sí esa palabra la quieres resaltar por tener alguna importancia, existen etiquetas semánticas.

Código HTML :

<strong>palabra que quiero resaltar</strong>

*strong (fuerza en inglés) - en español... darle importancia a algún texto. (estilo por default: negrita).

Las etiquetas traen sus propios estilos, si no quiero resaltar strong con negrita, sino remarcado entonces pongo

Código CSS :

strong{
  background-color: rgb(255,255,200);
  font-weight: normal;
}

Son varios conceptos.
Te lo repito de nuevo. Parte visual con CSS. Parte estructural y semántica con HTML.

Cualquier duda por acá estamos

Yo creo que CSS es fabuloso estoy tratando de hacer una web que hice de boceto y hasta ahora va de maravilla y sin tocar el photoshop para hacer una sola imagen.

Una pregunta estuve viendo un tutorial de html y quería ponerle un separador entre el bloque de contenido y el sidebar y encontre este codigo:
[HTML] <HR width="50%" align="center" /> [/HTML

Código CSS :

hr {
color: #f8b500;
height: 0px;
border:1px dashed;
} 

Como haria para que este separador se viera en vertical?

Disculpen tanta molestia

mejor una la propiedad margin:

la forma correcta de tu ejemplo sería

Código CSS :

hr{
  border: 0 dashed #F8B500;
  border-width: 1px 0 0 0;
  width: 50%;
}

Lo que quieres es una línea vertical, a cualquier elemento le puedes asignar un borde.

si tienes 2 divs

Código HTML :

<div id="left">Div izquierdo</div>
<div id="right">Div derecho</div>

Código CSS :

div{
  height: 200px;
  width: 200px;
}
#left{
  float: left;
}
#right{
  border-left: 1px dashed #F8B500;
  float: right;
}

Y con eso muestras la línea vertical.

Otra cosa sería una regla que separa columnas (column-rule)

Bueno aquí esta el progreso de la web:


Los espacios en blanco están hechos en css también solo que falta rellenarlos, pero veo que a medida que estoy haciendo la web tengo mucho código basura y mal estructurado así que voy a a buscar algún libro, manual o curso de xhtml y css mas completo que el de la web.

Gracias por su ayuda y comentarios.

Esa línea "dasheada" para mi gusto... yo se la quitaría (tienes todos tus elementos con borde negro), pero bueno, son tus gustos.

Para simular el contenido usa lorem ipsum

Saludos Jorge

Si ya se la quite solo quería saber como poner las barras verticales, una pregunta es que como soy nuevo en este mundo me gustaría saber que puedo hacer ahora, que otro lenguaje puedo aprender para complementar el html+css es que me puse a pensar "Aja y ahora que?" jejeje.

Se que me falta mucho por aprender en el html y css pero me gustaría ir aprendiendo otro para complementar y así mejorar simultáneamente en ambos lenguajes.

javascript con alguno de sus frameworks para manipular el DOM (jquery es el mas usado)