Para anadir estilos CSS a un codigo HTML hay que crear un archivo con extension .css, al cual llamremos desde nuestra pagina por html mediante la siguiente linea:

Lo que contendra el archivo css relativo al aspecto geneal de la pagina (header y footer) sera lo siguiente:

Esto servira para formar el fondo negro en la parte superior de la pagina.

	#header {
		background: #000 url(../images/header-bg.gif) repeat-x scroll 0 0;
		padding: 30px 15px;
	}

		#header h1 {
			text-indent: -1000em;
			background: transparent url(../images/logo-bg.gif) no-repeat;
			height: 23px;
			margin: 0;
		}

	#wrapper {
		width: 968px;
		margin: 20px auto;
		border: 1px solid #FFF;
	}

	ul#navigation {
		padding: 0;
		margin: 0;
		list-style: none;
		background: transparent url(../images/nav-bg.gif) repeat-x scroll 0 50%;
	}
		#navigation li {
			float: left;
		}
			#navigation li a {
				float: left;
				border-right: 1px solid #FFF;
				padding: 10px 15px;
				font-weight: bold;
				color: #000;
			}
			#navigation .active a, #navigation .active a:hover {
				background: transparent url(../images/nav-bg-active.gif) repeat-x bottom left;
			}

			#navigation li a:hover {
				background: transparent url(../images/nav-bg-roll.gif) repeat-x bottom left;
						}

Esto servira para establecer el tamano y tipo de fuente y para

	#navigation li a {
		float: left;
		border-right: 1px solid #FFF;
		padding: 10px 15px;
		font-weight: bold;
		color: #000;
	}

establecer los margenes, borde, en definitiva el aspecto y la posicion de los botones de las pestanas.

Con esto conseguimos un efecto muy curioso que consiste en mostrar otra imagen diferente cuando la pestana esta activa (active), y una tercera imagen cuando pasamos el raton por encima (hover).

	#navigation .active a, #navigation .active a:hover {
		background: transparent url(../images/nav-bg-active.gif) repeat-x bottom left;
	}

	#navigation li a:hover {
		background: transparent url(../images/nav-bg-roll.gif) repeat-x bottom left;
				}

Con esto posicionaremos el texto “Mikel Tute’s”, que no es texto sino una imagen llamada logo-bg.gif sobre el header negro y gris.

	#header {
		background: #000 url(../images/header-bg.gif) repeat-x scroll 0 0;
		padding: 30px 15px;
	}

		#header h1 {
			background: transparent url(../images/logo-bg.gif) no-repeat;
			height: 23px;
			margin: 0;
		}