[Tutorial]Configurar template minima 3 colunas parte 1 e 2

-Nota: Neste tutorial iremos utilizar o código que se encontra no tópico [Tutorial]Código do Template Minima de 3 Colunas. Por isso faça o download deste arquivo.

Neste tópico iremos começar a criar e personalizar nosso template minima 3 colunas.

Abra o código do template;
Localize Body;
Iremos encontrar o seguinte código:

Código:

body {
  }

1º Passo: Definir o plano de fundo do site. Para isso coloque dentro do código acima o uma das seguinte opções:
1ª Opção:

background:#Código da sua Cor;

2ª Opção:

background:url(Link da sua Imagem);

2º Passo: Definir se irá ou não ter uma borda. Utilize o seguinte código:
1ª Opção (Sem margem)

border:0px;

2ª Opção (Com margem)

border:2px #000000 solid;

LEGENDA:
Cor Laranja: Define a largura da margem;
Cor Verde: Define a cor da margem;
Cor Azul: Define o estilo da margem;

Bom, do "1º Passo" eu escolhi a "1ª Opção" e do "2º Passo" eu escolhi a "1ª Opção". Então o código body ira ficar assim:

Código:

body {
  background:#ffffff;
  margin:0px;
  }

---

Agora vamos personalizar o Header.

Localize agora Header-Wrapper;
O código que encontramos foi:

Código:

#header-wrapper {
  }

1º Passo: Definir o plano de fundo do site. Para isso coloque dentro do código acima o uma das seguinte opções:
1ª Opção:

background:#Código da sua Cor;

2ª Opção:

background:url(Link da sua Imagem);

2º Passo: Definir largura e altura do nosso cabeçalho. Para isso faça:

width:1024px;
height:250px;

LEGENDA:
Cor Azul: Defina a largura do seu cabeçalho conforme queira.

3º Passo: Definir se irá ou não ter uma borda. Utilize o seguinte código:
1ª Opção (Sem margem)

border:0px;

2ª Opção (Com margem)

border:2px #000000 solid;

4º Passo: Coloque e personalize os seguintes campos:

margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;

LEGENDA:
Cor Vermelha: Define margem ao seu cabeçalho. Caso não saiba como usa-las leia o tutorial: Básico da Linguagem CSS & HTML - Parte 2 - Personalização - Posicionamento

Eu escolhi no "1º Passo" a "1ª Opção". "No 3º passo" a "2ª Opção" e no "4º Passo" deixei como esta.
Meu Código do header-wrapper vai ficar da seguinte maneira:

Código:

#header-wrapper {
  background:#fff000;
  width:1024px;
  height:250px;
  border: 2px #000000 solid;
  margin-top:0px;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  }

- Continuação do Tutorial parte 1

Localize agora o código abaixo:

Código:

#outer-wrapper {
}

Coloque o código abaixo depois de { e antes de }

---

background: url(Link da Imagem) repeat;
width: 982px;
border: 0px #000000 solid;
margin: 0 auto;

- As partes em vermelhas é que devem ser obrigatório a edição, e as partes em Azul apenas devem ser mudadas caso você queira.

- Se você já tem um conhecimento sobre códigos, poderá editar o código acima. Caso não tenha, por favor consulte os tutoriais abaixo para poder editar o código.

Tutoriais:
- Para personalizar o background e o margin consulte este tutorial.
- Para personalizar o width consulte este tutorial.

---