59 files changed, 3429 insertions, 0 deletions
diff --git a/files/pt-pt/learn/acessibilidade/index.html b/files/pt-pt/learn/accessibility/index.html
index 0b6cbcefd7..0b6cbcefd7 100644
--- a/files/pt-pt/learn/acessibilidade/index.html
+++ b/files/pt-pt/learn/accessibility/index.html
diff --git a/files/pt-pt/learn/questoes_comuns/como_funciona_a_internet/index.html b/files/pt-pt/learn/common_questions/how_does_the_internet_work/index.html
index d2ba60f9a3..d2ba60f9a3 100644
--- a/files/pt-pt/learn/questoes_comuns/como_funciona_a_internet/index.html
+++ b/files/pt-pt/learn/common_questions/how_does_the_internet_work/index.html
diff --git a/files/pt-pt/learn/questoes_comuns/index.html b/files/pt-pt/learn/common_questions/index.html
index 62deec5d05..62deec5d05 100644
--- a/files/pt-pt/learn/questoes_comuns/index.html
+++ b/files/pt-pt/learn/common_questions/index.html
diff --git a/files/pt-pt/learn/questoes_comuns/qual_e_a_diferenca_entre_pagina_site_servidor_da_web_e_mecanismo_pesquisa/index.html b/files/pt-pt/learn/common_questions/pages_sites_servers_and_search_engines/index.html
index 97655e6edf..97655e6edf 100644
--- a/files/pt-pt/learn/questoes_comuns/qual_e_a_diferenca_entre_pagina_site_servidor_da_web_e_mecanismo_pesquisa/index.html
+++ b/files/pt-pt/learn/common_questions/pages_sites_servers_and_search_engines/index.html
diff --git a/files/pt-pt/learn/questoes_comuns/congiurar_um_servidor_de_testes_local/index.html b/files/pt-pt/learn/common_questions/set_up_a_local_testing_server/index.html
index 389407247d..389407247d 100644
--- a/files/pt-pt/learn/questoes_comuns/congiurar_um_servidor_de_testes_local/index.html
+++ b/files/pt-pt/learn/common_questions/set_up_a_local_testing_server/index.html
diff --git a/files/pt-pt/learn/questoes_comuns/o_que_e_um_nome_de_dominio/index.html b/files/pt-pt/learn/common_questions/what_is_a_domain_name/index.html
index b490ab9789..b490ab9789 100644
--- a/files/pt-pt/learn/questoes_comuns/o_que_e_um_nome_de_dominio/index.html
+++ b/files/pt-pt/learn/common_questions/what_is_a_domain_name/index.html
diff --git a/files/pt-pt/learn/questoes_comuns/o_que_e_um_url/index.html b/files/pt-pt/learn/common_questions/what_is_a_url/index.html
index b61a73433e..b61a73433e 100644
--- a/files/pt-pt/learn/questoes_comuns/o_que_e_um_url/index.html
+++ b/files/pt-pt/learn/common_questions/what_is_a_url/index.html
diff --git a/files/pt-pt/learn/questoes_comuns/o_que_e_um_servidor_da_web/index.html b/files/pt-pt/learn/common_questions/what_is_a_web_server/index.html
index a91ef08d6c..a91ef08d6c 100644
--- a/files/pt-pt/learn/questoes_comuns/o_que_e_um_servidor_da_web/index.html
+++ b/files/pt-pt/learn/common_questions/what_is_a_web_server/index.html
diff --git a/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..b73abb297f
--- /dev/null
+++ b/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,135 @@
+---
+title: Cascata e herança
+slug: Web/CSS/Como_começar/Cascata_e_herança
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
+---
+<p>{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}</p>
+
+<p>Esta página esboça como folhas de estilo interagem numa cascata, e como os elementos subordinados herdam o estilo do elementos primários.</p>
+
+<p>Você alterará à sua folha de estilo de amostra, usando herança para mudar o estilo de muitas partes do seu documento em um passo.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Cascata_e_heran.C3.A7a" name="Informa.C3.A7.C3.A3o:_Cascata_e_heran.C3.A7a">Informação: Cascata e herança</h2>
+
+<p>O estilo final para um elemento pode ser especificado em muitos lugares diferentes, que pode interagir num meio complexo. Esta interação complexa faz CSS poderoso, mas às vezes isto pode deixar confuso e difícil de depurar.</p>
+
+<p>Três códigos principais de informação de estilo formam uma cascata. Eles são:</p>
+
+<ul>
+ <li>O estilo padrão do navegador para a linguagem de marcação</li>
+ <li>O estilo especificado por um usuário que está lendo o documento</li>
+ <li>O estilo ligado ao documento pelo seu autor</li>
+</ul>
+
+<p>O estilo do usuário modifica o estilo padrão do navegador. O estilo do autor do documento então modifica algum outro estilo. Neste tutorial, você é o autor do seu documeto de amostra, e você trabalha somente com folhas de estilo do autor.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Quando você lê este documento no seu navegador Mozilla, parte do estilo que você vê, vem do padrão do seu navegador para HTML.
+    <p>Parte do estilo deve vir das configurações do seu navegador em Opções, ou de um arquivo <code>userConten.css</code> no seu perfil no navegador.</p>
+
+    <p>Parte do seu estilo vem de folhas de estilo ligadas ao documento pelo server do wiki.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ Quando você abre seu documento de amostra no seu navegador, os elementos STRONG são mais fortes do que o resto do texto. Isto vem do estilo padrão do seu navegador para o HTML.</p>
+
+<p>Os elementos STRONG são vermelhos, Isto vem da sua folha de estilo de amostra.</p>
+
+<p>Os elementos STRONG as vezes também herdam muito do estilo de elemento P, pois eles são subordinados. No mesmo caminho, o elemento P herda muito do estilo do elemento BODY.</p>
+
+<p>Para estilos em cascata, o autor das folhas de estilo tem prioridade, depois o leitor das folhas de estilo, e por último o padrão do navegador.</p>
+
+<p>Para estilos em herança, um nó subordinado tem prioridade sobre o estilo que herdou do nó principal.</p>
+
+<p>Estas não são as únicas propriedades que se aplicam. Uma página posterior neste turorial explicará mais.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>CSS às vezes providencia um meio para o leitor anular o estilo do autor do documento, usando a palavra-chave <code>!important</code>.
+    <p>Este meio é para o autor do documento, você não pode sempre predizer exatamente o que os leitores verão.</p>
+
+    <p>Se você quer saber todos os detalhes sobre cascata e herança, veja <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na CSS Specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Usando_heran.C3.A7a" name="A.C3.A7.C3.A3o:_Usando_heran.C3.A7a">Ação: Usando herança</h2>
+
+<p>Edite seu arquivo de amostra CSS.</p>
+
+<p>Adicione esta linha copiando e colando isto. Não importa realmente se você adicionar a linha antes ou depois da que já está lá. Entretando, adicionar isto no topo é mais lógico pois no seu documento o elemento P é primário ao elemento STRONG:</p>
+
+<pre class="brush: css">p {color: blue; text-decoration: underline;}
+</pre>
+
+<p>Agora atualize seu navegador para ver o efeito no seu documento de amostra. O sublinhado afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos STRONG herdaram o estilo sublinhado do elemento primário P.</p>
+
+<p>Mas os elementos STRONG ainda são vermelhos. A cor vermelha é própria do estilo, então isto tem prioridade sobre a cor azul do seu elemento primário P.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;">
+     <caption>Antes</caption>
+     <tbody>
+      <tr>
+       <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table style="border: 2px outset #36b; padding: 1em;">
+     <caption>Depois</caption>
+     <tbody>
+      <tr>
+       <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>Mude sua folha de estilo deixando somente as letras vermelhas sublinhadas:
+    <table style="border: 2px outset #36b; padding: 1em;">
+     <tbody>
+      <tr>
+       <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h2>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Cascata_e_heran%C3%A7a" title="Talk:pt/CSS/Como_começar/Cascata_e_herança">Discussão</a>.</p>
+
+<p>Sua folha de estilo de amostra especifica o estilo para os tags, <code>P</code> e <code>STRONG</code>, mudando o estilo dos elementos correspondentes em todo o seu documento original. A próxima página descreve como espeficar estilos em meios mais seletivos: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Seletores" title="pt/CSS/Como_começar/Seletores">Seletores</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}</p>
diff --git a/files/pt-pt/learn/css/building_blocks/index.html b/files/pt-pt/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..dff3dfb0ac
--- /dev/null
+++ b/files/pt-pt/learn/css/building_blocks/index.html
@@ -0,0 +1,359 @@
+---
+title: Caixas
+slug: Web/CSS/Como_começar/Caixas
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Building_blocks
+translation_of_original: Web/Guide/CSS/Getting_started/Boxes
+---
+<p>{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}</p>
+
+<p>Esta página descreve como você pode usar as CSS para controlar o espaço que um elemento ocupa quando é exibido.</p>
+
+<p>Em seu documento de amostra, você muda o espaçamento e adiciona regras decorativas.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Caixas" name="Informa.C3.A7.C3.A3o:_Caixas">Informação: Caixas</h2>
+
+<p>Quando seu navegador exibe um elemento, o elemento ocupa um espaço. Existem quatro partes do espaço que ele ocupa.</p>
+
+<p>No meio, está o espaço que o elemento precisa para exibir seu conteúdo. Em torno disso, está o enchimento. Em torno disso, está a borda. Em torno disso, está a margem.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #eee;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>A paleta cinza mostra partes da disposição.</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #fff;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>Isto é o que você vê em seu navegador.</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>O enchimento, a borda e a margem podem ter diferentes tamanhos no topo, na direita, em baixo e na esquerda do elemento. Qualquer ou todos estes tamanhos podem ser zero.</p>
+
+<p>O enchimento é sempre da mesma cor do fundo do elemento. Então quando você configura a cor de fundo, você vê a cor aplicada ao próprio elemento e ao seu enchimento. A margem é sempre transparente.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #ded;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>O elemento tem um fundo verde.</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #efe;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>É isto que você vê no seu navegador.</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Bordas" name="Bordas">Bordas</h3>
+
+<p>Você pode usar bordas para decorar elementos com linhas ou caixas.</p>
+
+<p>Para especificar a mesma borda em torno de todo o elemento, use a propriedade <code>border</code>. Especifique a largura (usualmente em pixels para exibir na tela), o estilo, e a cor.</p>
+
+<p>Os estilos são:</p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Você pode também configurar o estilo para <code>none</code> ou <code>hidden</code> para remover a borda explicitamente, ou configurar a cor para <code>transparent</code> para fazer a borda invisível sem mudar a disposição.</p>
+
+<p>Para especificar bordas em um lado de cada vez, use as propriedades: <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, <code>border-left</code>. Você pode usar isto para especificar uma borda em somente um lado, ou diferentes bordas em diferentes lados.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplos</caption>
+ <tbody>
+  <tr>
+   <td>Esta regra configura a cor de fundo e a borda do topo dos elementos do cabeçalho:
+    <div style="width: 40em;">
+    <pre class="eval">
+h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+</pre>
+    </div>
+
+    <p>O resultado deve ser como este:</p>
+
+    <table>
+     <tbody>
+      <tr>
+       <td>
+        <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Cabeçalho elegante</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p><br>
+     Esta regra faz as imagens fáceis de ver dando-as uma borda com um cinza-médio em toda a volta:</p>
+
+    <div style="width: 30em;">
+    <pre class="eval">
+img {border: 2px solid #ccc;}
+</pre>
+    </div>
+
+    <p>O resultado deve ser como este:</p>
+
+    <table>
+     <tbody>
+      <tr>
+       <td>Imagem:</td>
+       <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2528/=Blue-rule.png"></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Margens_e_enchimento" name="Margens_e_enchimento">Margens e enchimento</h3>
+
+<p>Use margens e enchimento para ajustar a posição dos elementos e para criar espaços ao redor deles.</p>
+
+<p>Use a propriedade <code>margin</code> ou a propriedade <code>padding</code> para configurar a largura da margem ou do enchimento respectivamente.</p>
+
+<p>Se você especificar uma largura, isto se aplicará em torno de todo o elemento (topo, direita, baixo e esquerda).</p>
+
+<p>Se você especificar duas larguras, a primeira se aplicará ao topo e à baixo, e a segunda à direita e à esquerda.</p>
+
+<p>Você pode especificar todas as quatro larguras na ordem: topo, direita, baixo, esquerda.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Esta regra diferencia parágrafos com a classe <code>remark</code> dando-os uma borda vermelha em toda a sua volta.
+    <p>O Enchimento em toda a volta separa um pouco a borda do texto.</p>
+
+    <p>Uma margem esquerda identifica o parágrafo relativo ao resto do texto:</p>
+
+    <div style="width: 30em;">
+    <pre class="eval">
+p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+</pre>
+    </div>
+
+    <p>O resultado deve ser como este:</p>
+
+    <table>
+     <tbody>
+      <tr>
+       <td>
+        <p>Aqui está um parágrafo normal.</p>
+
+        <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui está um com observação.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Quando você usa margens e enchimento para ajustar o modo como os elementos são exibidos, suas regras de estilo interagem com o padrão dos navegadores de maneiras que podem ser complexas.
+    <p>Navegadores diferentes exibem os elementos diferentemente. Os resultados podem ser similares antes de sua folha de estilo mudar coisas. Algumas vezes isto pode fazer sua folha de estilo dar resultados surpreendedores.</p>
+
+    <p>Para ter o resultado que você precisa, você pode ter que mudar a marcação do seu documento. A próxima página deste tutorial tem mais informações sobre isto.</p>
+
+    <p>Para informações detalhas sobre enchimento, margens e bordas, veja <a class="external" href="http://www.w3.org/TR/CSS21/box.html">Box model</a> em CSS Specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Adicionando_bordas" name="A.C3.A7.C3.A3o:_Adicionando_bordas">Ação: Adicionando bordas</h2>
+
+<p>Edite seu arquivo CSS. Adicione esta regra para desenhar uma linha até o fim da página sobre cada cabeçalho:</p>
+
+<div style="width: 30em;">
+<pre class="eval">h3 {border-top: 1px solid gray;}
+</pre>
+</div>
+
+<p>Se você pegou o desafio na página anterior, modifique a regra que você criou, se não, adicione esta nova regra para adicionar um espaço em baixo de cada item da lista:</p>
+
+<div style="width: 30em;">
+<pre class="eval">li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+</pre>
+</div>
+
+<p>Atualize seu navegador para ver o resultado:</p>
+
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
+
+    <ul style="">
+     <li style="margin-bottom: 8px;">Ártico</li>
+     <li style="margin-bottom: 8px;">Atlântico</li>
+     <li style="margin-bottom: 8px;">Pacífico</li>
+     <li style="margin-bottom: 8px;">Índico</li>
+     <li style="margin-bottom: 8px;">Antártico</li>
+    </ul>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>Adicione uma regra à sua folha de estilo, fazendo um borda larga em toda a volta dos oceanos em uma cor que te lembre o mar — algo como isto:
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
+
+        <div style="border: 12px solid #69b; padding-left: 1em;">
+        <ul style="">
+         <li style="margin-bottom: 8px;">Ártico</li>
+         <li style="margin-bottom: 8px;">Atlântico</li>
+         <li style="margin-bottom: 8px;">Pacífico</li>
+         <li style="margin-bottom: 8px;">Índico</li>
+         <li style="margin-bottom: 8px;">Antártico</li>
+        </ul>
+        </div>
+
+        <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
+
+        <p><strong>. . .</strong></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>(Não é necessário fazer exatamente com a largura e a cor que usadas aqui.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois" name="O_que_vem_depois">O que vem depois</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Caixas" title="Talk:pt/CSS/Como_começar/Caixas">Discussão</a>.</p>
+
+<p>Especificando margens e enchimento, você modificou a disposição do seu documento. Na próxima página você poderá mudar a disposição do seu documento de outras maneiras: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="pt/CSS/Como_começar/Disposição">Disposição</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}</p>
diff --git a/files/pt-pt/learn/css/building_blocks/selectors/index.html b/files/pt-pt/learn/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..f9d4505614
--- /dev/null
+++ b/files/pt-pt/learn/css/building_blocks/selectors/index.html
@@ -0,0 +1,208 @@
+---
+title: Seletores
+slug: Web/CSS/Como_começar/Seletores
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Building_blocks/Selectors
+translation_of_original: Web/Guide/CSS/Getting_started/Selectors
+---
+<p>{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}</p>
+
+<p>Esta página explica como você pode aplicar estilos seletivamente, e como diferentes tipos de seletor têm propriedades diferentes.</p>
+
+<p>Você adiciona alguns atributos às tags do seu documento de amostra, e usa estes atributos em sua folha de estilo de amostra.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Seletores" name="Informa.C3.A7.C3.A3o:_Seletores">Informação: Seletores</h2>
+
+<p>CSS tem sua própria terminologia para descrever a linguagem CSS. Anteriormente neste tutorial, você criou uma linha em sua folha de estilo com esta:</p>
+
+<div style="width: 30em;">
+<pre>strong {color: red;}
+</pre>
+</div>
+
+<p>Na terminologia das CSS, esta linha inteira é uma <em>regra</em>. Esta regra começa com <code>STRONG</code>, que é um <em>seletor</em>. Isto seleciona que elementos no DOM a regra se aplicará.</p>
+
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>A parte interior das chaves é a <em>declaração</em>.
+    <p>A palavra-chave <code>color</code> é uma <em>propriedade</em>, e <code>red</code> é um <em>valor</em>.</p>
+
+    <p>O ponto-e-vírgula depois do par propriedade-valor separa isto de outros pares propriedade-valor na mesma descrição.</p>
+
+    <p>Este tutorial refere-se a um seletor <code>STRONG</code>, como um seletor de <em>tag</em>. A Especificação das CSS refere-se a isto como um seletor de <em>tipo</em>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Esta página do tutorial explica mais sobre os seletores que você pode usar nas regras das CSS.</p>
+
+<p>Em adição aos nomes de tags, você pode usar valores de atributo nos seletores. Isto permite a você que as regras tornem-se mais específicas.</p>
+
+<p>Dois atributos tem estado especial para as CSS. Eles são <code>class</code> e <code>id</code>.</p>
+
+<p>Use o atributo <code>class</code> em uma tag para nomear a tag com um nome de classe. Isto é, o nome que você escolher para a classe.</p>
+
+<p>Na sua folha de estilo, digite um registro completo (período) antes do nome de classe quando você usá-lo em um seletor.</p>
+
+<p>Use o atributo <code>id</code> em uma tag para nomear a tag com um nome de id. Isto é, o nome que você escolher para o id. O nome do id deve ser único no documento.</p>
+
+<p>Na sua folha de estilo, digite um sinal de número (#) antes do id quando você usá-lo em um seletor.</p>
+
+<table style="border: 1px solid #36b; background-color: #ffe; padding: 1em;">
+ <caption>Exemplos</caption>
+ <tbody>
+  <tr>
+   <td>Este tag HTML tem ambos os atributos <code>class</code> e <code>id</code>.
+    <div style="width: 30em;">
+    <pre>
+&lt;P class="key" id="principal"&gt;
+</pre>
+    </div>
+
+    <p>O id, <code>principal</code>, deve ser o único no documento, mas outras tags no documento podem ter o mesmo nome de classe, <code>key</code>.</p>
+
+    <p>Em uma folha de estilo CSS, esta regra faz todos os elementos da classe <code>key</code> verdes. (Eles podem não ser todos elementos <small>P</small>.)</p>
+
+    <div style="width: 30em;">
+    <pre>
+.key {color: green;}
+</pre>
+    </div>
+
+    <p>Esta regra faz um elemento com o id <code>principal</code> negrito:</p>
+
+    <div style="width: 30em;">
+    <pre>
+#principal {font-weight: bolder;}
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Se mais de uma regra se aplicar a um elemento e especificar a mesma propriedade, então CSS dará prioridade para a regra que tiver o seletor mais específico. Um seletor id é mais específíco que um seletor classe, que por sua vez é mais específico que um seletor tag.</p>
+
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Você pode combinar seletores para fazer um seletor mais específico.
+    <p>Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que tem o nome de classe <code>key</code>. O seletor <code>p.key</code> seleciona somente os elementos P que tiverem o nome de classe <code>key</code>.</p>
+
+    <p>Você não está restrito aos dois atributos especiais, <code>class</code> e <code>id</code>. Você pode especificar outros atributos igualando entre colchetes. Por exemplo, o seletor <code>{{ mediawiki.external('type=button') }}</code> seleciona todos os elementos que tiverem um atributo <code>type</code> com o valor <code>button</code>.</p>
+
+    <p>Uma página posterior deste tutorial (<a href="/pt/CSS/Como_come%C3%A7ar/Tabelas" title="pt/CSS/Como_começar/Tabelas">Tabelas</a>) tem informações sobre seletores complexos baseados em parentescos.</p>
+
+    <p>Para um informação completa sobre seletores, veja <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> na CSS Specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Se sua folha de estilo tiver regras conflitantes e elas estiverem igualmente especificadas, então CSS dará prioridade para a regra que foi especificada por último na folha de estilo.</p>
+
+<p>Quando você tiver um problema com regras conflitantes, tente resolvê-lo fazendo uma das regras mais especificada, então ela terá prioridade. Se você não puder fazer isto, tente mover uma das regras para mais perto do fim da folha de estilo, então esta terá prioridade.</p>
+
+<h3 id="A.C3.A7.C3.A3o:_Usando_seletores_de_classe_e_id" name="A.C3.A7.C3.A3o:_Usando_seletores_de_classe_e_id">Ação: Usando seletores de classe e id</h3>
+
+<p>Edite seu arquivo HTML, e duplique o paragrafo copiando e colando-o. Então adicione os atributos de id e classe na primeira cópia, e um id na segunda cópia como mostrado abaixo. Um alternativa é copiar e colar o arquivo inteiro novamente:</p>
+
+<div style="width: 48em; color: gray;">
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+  &lt;HEAD&gt;
+  &lt;TITLE&gt;Documento de amostra&lt;/TITLE&gt;
+  &lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;
+  &lt;/HEAD&gt;
+  &lt;BODY&gt;
+    &lt;P <strong style="color: black;">id="first"</strong>&gt;
+      &lt;STRONG <strong style="color: black;">class="carrot"</strong>&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;
+    <strong style="color: black;">&lt;P id="second"&gt;
+      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;</strong>
+  &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+
+<p>Agora edite seu arquivo CSS. Substitua os componentes inteiros com:</p>
+
+<div style="width: 40em;">
+<pre>strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+</pre>
+</div>
+
+<p><br>
+ Atualize seu navegador para ver o resultado:</p>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ Você pode tentar re-dispor as linhas no seu arquivo CSS para mostrar que a ordem não muda o efeito.</p>
+
+<p>Os seletores de classe <code>.carrot</code> e <code>.spinach</code> tem prioridade sobre o seletor de tag <code>STRONG</code>.</p>
+
+<p>O seletor id <code>#first</code> tem prioridade sobre a classe o os seletores de tag.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+ <caption>Desafios</caption>
+ <tbody>
+  <tr>
+   <td>Sem mudar seu arquivo HTML, adicione uma única regra para seu arquivo CSS deixando todas as letras iniciais da mesma cor que estão agora, mas fazendo todo o segundo parágrafo aparecer em azul:
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+      </tr>
+      <tr>
+       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>Agora mude a regra que você acabou de adicionar (sem mudar mais nenhuma coisa), para fazer o primeiro parágrafo em azul também:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+      </tr>
+      <tr>
+       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Seletores" title="Talk:pt/CSS/Como_começar/Seletores">Discussão</a>.</p>
+
+<p>Sua folha de estilo de amostra está começando a parecer densa e complicada. A próxima página descreve caminhos para fazer o CSS mais fácil de ler: <strong><a href="/pt/CSS/Como_come%C3%A7ar/CSS_leg%C3%ADvel" title="pt/CSS/Como_começar/CSS_legível">CSS legível</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}</p>
diff --git a/files/pt-pt/learn/css/building_blocks/styling_tables/index.html b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..ff21a00c82
--- /dev/null
+++ b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,655 @@
+---
+title: Tabelas
+slug: Web/CSS/Como_começar/Tabelas
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+translation_of_original: Web/Guide/CSS/Getting_started/Tables
+---
+<p>{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}</p>
+
+<p>Esta página descreve seletores mais avançados, e algumas maneiras específicas para estilizar tabelas.</p>
+
+<p>Você cria um novo documento de amostra contendo uma tabela, e uma folha de estilo para isto.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Mais_seletores" name="Informa.C3.A7.C3.A3o:_Mais_seletores">Informação: Mais seletores</h2>
+
+<p>CSS possui algumas maneiras para selecionar elementos baseadas nas relações entre eles. Você pode usá-las para fazer seletores que sejam mais específicos.</p>
+
+<p>Aqui está um sumário de seletores baseados em relações:</p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="width: 10em;"><strong>Seletor</strong></td>
+   <td><strong>Seleciona</strong></td>
+  </tr>
+  <tr>
+   <td><code>A E</code></td>
+   <td>Qualquer elemento E que seja <em>descendente</em> de um elemento A (isso é: um subitem, ou um subitem de um sub item, <em>etc</em>.)</td>
+  </tr>
+  <tr>
+   <td><code>A &gt; E</code></td>
+   <td>Qualquer elemento E que seja subitem de um elemento A</td>
+  </tr>
+  <tr>
+   <td><code>E:first-child</code></td>
+   <td>Qualque elemento E que seja o primeiro subitem do seu principal</td>
+  </tr>
+  <tr>
+   <td><code>B + E</code></td>
+   <td>Qualquer elemento E que seja o próximo <em>irmão</em> de um elemento B (isso é: o próximo subitem do mesmo principal)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Você pode combinar isto para expressar relações complexas.</p>
+
+<p>Você pode também usar o símbolo <code>*</code> (asterisco) para dizer "qualquer elemento".</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Uma tabela HTML tem um atributo <code>id</code>, mas suas linhas e células não tem identificadores individuais:
+    <div style="width: 30em;">
+    <pre class="eval">
+&lt;TABLE id="data-table-1"&gt;
+...
+&lt;TR&gt;
+&lt;TD&gt;Prefix&lt;/TD&gt;
+&lt;TD&gt;0001&lt;/TD&gt;
+&lt;TD&gt;default&lt;/TD&gt;
+&lt;/TR&gt;
+...
+</pre>
+    </div>
+
+    <p>Estas regras fazem a primeira célula em cada linha em negrito, e a segunda célula em cada linha monoespaçada. Elas afetam somente uma tabela específica no documento:</p>
+
+    <div style="width: 45em;">
+    <ol>
+     <li>data-table-1 td:first-child {font-weight: bolder;}</li>
+     <li>data-table-1 td:first-child + td {font-family: monospace;}</li>
+    </ol>
+    </div>
+
+    <p>O resultado é algo como isto:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <table style="width: 18em; margin-right: 2em;">
+         <tbody>
+          <tr>
+           <td><strong>Prefix</strong></td>
+           <td><code>0001</code></td>
+           <td>default</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>De maneira usual, se você faz um seletor mais específico então você aumenta sua prioridade.
+    <p>Usando estas técnicas, você evita precisar especificar atributos <code>class</code> ou <code>id</code> em muitas tags no seu documento. Em vez disso, CSS faz o trabalho.</p>
+
+    <p>Em grandes projetos onde a velocidade é importante, você pode fazer suas folhas de estilo mais eficientes evitando regras complexas que dependem da relação entre elementos.</p>
+
+    <p>Para detalhes completos sobre seletores, veja <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> em CSS Specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Tabelas" name="Informa.C3.A7.C3.A3o:_Tabelas">Informação: Tabelas</h2>
+
+<p>Uma tabela é um arranjo de informação em uma grade retangular. Algumas tabelas podem ser complexas, e para tabelas complexas diferentes navegadores podem exibir diferentes resultados.</p>
+
+<p>Quando você desenha seu documento, use e a tabela para expressar as relações entre as peças da informação. Então não importará se os diferentes navegadores apresentarem a informação de maneiras levemente diferentes, pois o significado ainda pode ser compreendido.</p>
+
+<p>Não use tabelas de maneiras não usuais para produzir disposições visuais particulares. As técnicas na página anterior deste tutorial (<a href="/pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="pt/CSS/Como_começar/Disposição">Disposição</a>) são melhores para isto.</p>
+
+<h4 id="Estrutura_da_tabela" name="Estrutura_da_tabela">Estrutura da tabela</h4>
+
+<p>Em uma tabela, cada peça de informação é exibida em uma <em>célula</em>.</p>
+
+<p>As células em uma linha horizontal na página compõem uma <em>linha</em>.</p>
+
+<p>Em algumas tabelas, as linhas podem ser agrupadas. Um grupo especial de linhas no começo da tabela é o <em>cabeçalho</em>. Um grupo especial de linhas no final da tabela é o <em>rodapé</em>. As linhas principais na tabela são o <em>corpo</em>, e elas podem também estar em grupos.</p>
+
+<p>As células em uma linha vertical na página compõem uma <em>coluna</em>, mas as colunas têm usos limitados nas tabelas das CSS.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>A tabela de seletores próxima ao topo desta página tem dez células em cinco linhas.
+    <p>A primeira linha é o cabeçalho. As outras quatro linhas são o corpo. Não há um rodapé.</p>
+
+    <p>Ela tem duas colunas.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Este tutorial somente cobre tabelas simples, onde os resultados são razoavelmente previsíveis. Em uma tabela simples, toda célula ocupa somente uma linha e coluna. Você pode usar CSS para tabelas complexas onde células <em>expandam</em> (extendam-se sobre) mais do que uma linha ou coluna, mas tabelas como estas estão fora do escopo deste tutorial básico.</p>
+
+<h3 id="Bordas" name="Bordas">Bordas</h3>
+
+<p>Células não têm margens.</p>
+
+<p>Células têm bordas e enchimento. Por padrão, as bordas são separadas pelo valor da propriedade <code>border-spacing</code> da tabela. Você pode também remover o espaçamento completamente configurando a propriedade <code>border-collapse</code> da tabela para <code>collapse</code>.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Aqui estão três tabelas.
+    <p>A tabela da esquerda tem espaçamento de borda 0.5 em. A tabela do centro tem espaçamento da borda zero. A tabela da direita tem bordas unidas:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td style="padding-right: 2em;">
+        <table style="">
+         <tbody>
+          <tr>
+           <td style="border: 1px solid #c00; text-align: center;">Paus</td>
+           <td style="border: 1px solid #c00; text-align: center;">Copas</td>
+          </tr>
+          <tr>
+           <td style="border: 1px solid #c00; text-align: center;">Ouros</td>
+           <td style="border: 1px solid #c00; text-align: center;">Espadas</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+       <td style="padding-right: 2em;">
+        <table style="">
+         <tbody>
+          <tr>
+           <td style="border: 1px solid #c00; text-align: center;">Paus</td>
+           <td style="border: 1px solid #c00; text-align: center;">Copas</td>
+          </tr>
+          <tr>
+           <td style="border: 1px solid #c00; text-align: center;">Ouros</td>
+           <td style="border: 1px solid #c00; text-align: center;">Espadas</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+       <td style="padding-right: 6em;">
+        <table style="border-collapse: collapse;">
+         <tbody>
+          <tr>
+           <td style="border: 1px solid #c00; text-align: center;">Paus</td>
+           <td style="border: 1px solid #c00; text-align: center;">Copas</td>
+          </tr>
+          <tr>
+           <td style="border: 1px solid #c00; text-align: center;">Ouros</td>
+           <td style="border: 1px solid #c00; text-align: center;">Espadas</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Subt.C3.ADtulos" name="Subt.C3.ADtulos">Subtítulos</h3>
+
+<p>Um <em>subtítulo</em> é uma etiqueta que se aplica à tabela inteira. Por padrão, isto é mostrado no topo da tabela.</p>
+
+<p>Para mover isto para o fim, configure a propriedade <code>caption-side</code> para <code>bottom</code>. A propriedade é herdada, então alternativamente você pode configurar isto na tabela em outro elemento ascendente.</p>
+
+<p>Para estilizar o texto do subtítulo, use qualquer das propriedades usuais para texto.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Esta tabela tem um subtítulo no fim:
+    <div style="width: 30em;">
+    <pre class="eval">
+#demo-table &gt; caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+  }
+</pre>
+    </div>
+
+    <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <table>
+         <caption>Naipes</caption>
+         <tbody>
+          <tr>
+           <td>
+            <table style="border-collapse: collapse;">
+             <tbody>
+              <tr>
+               <td style="border: 1px solid gray; text-align: center;">Paus</td>
+               <td style="border: 1px solid gray; text-align: center;">Copas</td>
+              </tr>
+              <tr>
+               <td style="border: 1px solid gray; text-align: center;">Ouros</td>
+               <td style="border: 1px solid gray; text-align: center;">Espadas</td>
+              </tr>
+             </tbody>
+            </table>
+           </td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="C.C3.A9lulas_vazias" name="C.C3.A9lulas_vazias">Células vazias</h3>
+
+<p>Você pode exibir células vazias (isto é, suas bordas e fundos) especificando <code>empty-cells: show;</code> para o elemento da tabela.</p>
+
+<p>Você pode escondê-los especificando <code>empty-cells:hide;</code>. Então, se um elemento principal tem um fundo e o chama, isto mostra através da célula vazia.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Estas tabelas tem um fundo de verde pálido. Suas células tem um fundo de cinza pálido e bordas de cinza escuro.
+    <p>Na esquerda da tabela, a célula vazia é mostrada. Na direita, é escondida:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td style="padding-right: 2em;">
+        <table style="background-color: #dfd;">
+         <tbody>
+          <tr>
+           <td style="border: 1px solid #555; background-color: #eee;"> </td>
+           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Copas</td>
+          </tr>
+          <tr>
+           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Ouros</td>
+           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Espadas</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+       <td style="padding-right: 6em;">
+        <table style="background-color: #dfd;">
+         <tbody>
+          <tr>
+           <td> </td>
+           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Copas</td>
+          </tr>
+          <tr>
+           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Ouros</td>
+           <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Espadas</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Para informações detalhasdas sobre tabelas, veja <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> em CSS Specification.
+    <p>A informação lá vai além do que há neste tutorial, mas não cobre as diferenças entre os navegadores que podem afetar tabelas complexas.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Estilizando_uma_tabela" name="A.C3.A7.C3.A3o:_Estilizando_uma_tabela">Ação: Estilizando uma tabela</h2>
+
+<p>Faça um novo documento HTML, <code>doc3.html</code>. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:</p>
+
+<div style="width: 48em; height: 12em; overflow: auto;">
+<pre>&lt;DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+&lt;HEAD&gt;
+&lt;TITLE&gt;Documento de amostra 3&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style3.css"&gt;
+&lt;/HEAD&gt;
+&lt;BODY&gt;
+
+&lt;TABLE id="demo-table"&gt;
+&lt;CAPTION&gt;Oceanos&lt;/CAPTION&gt;
+
+&lt;THEAD&gt;
+&lt;TR&gt;
+&lt;TH&gt;&lt;/TH&gt;
+&lt;TH&gt;Área&lt;/TH&gt;
+&lt;TH&gt;Profundidade Média&lt;/TH&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;&lt;/TH&gt;
+&lt;TH&gt;milhões de km&lt;SUP&gt;2&lt;/SUP&gt;&lt;/TH&gt;
+&lt;TH&gt;m&lt;/TH&gt;
+&lt;/TR&gt;
+&lt;/THEAD&gt;
+
+&lt;TBODY&gt;
+&lt;TR&gt;
+&lt;TH&gt;Ártico&lt;/TH&gt;
+&lt;TD&gt;13,000&lt;/TD&gt;
+&lt;TD&gt;1,200&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Atlântico&lt;/TH&gt;
+&lt;TD&gt;87,000&lt;/TD&gt;
+&lt;TD&gt;3,900&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Pacífico&lt;/TH&gt;
+&lt;TD&gt;180,000&lt;/TD&gt;
+&lt;TD&gt;4,000&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Índico&lt;/TH&gt;
+&lt;TD&gt;75,000&lt;/TD&gt;
+&lt;TD&gt;3,900&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Antártico&lt;/TH&gt;
+&lt;TD&gt;20,000&lt;/TD&gt;
+&lt;TD&gt;4,500&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;/TBODY&gt;
+
+&lt;TFOOT&gt;
+&lt;TR&gt;
+&lt;TH&gt;Total&lt;/TH&gt;
+&lt;TD&gt;361,000&lt;/TD&gt;
+&lt;TD&gt;&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Média&lt;/TH&gt;
+&lt;TD&gt;72,000&lt;/TD&gt;
+&lt;TD&gt;3,800&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;/TFOOT&gt;
+
+&lt;/TABLE&gt;
+
+&lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+
+<p>Crie uma nova folha de estilo, <code>style3.css</code>. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:</p>
+
+<div style="width: 48em; height: 12em; overflow: auto;">
+<pre>/*** Estilo para doc3.html (Tabelas) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+  }
+
+#demo-table &gt; caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+  }
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+  }
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+  }
+
+
+/* header */
+#demo-table &gt; thead &gt; tr:first-child &gt; th {
+  text-align: center;
+  color: blue;
+  }
+
+#demo-table &gt; thead &gt; tr + tr &gt; th {
+  font-style: italic;
+  color: gray;
+  }
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+  }
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+  }
+
+#demo-table tbody th:after {
+  content: ":";
+  }
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+  }
+
+#demo-table tfoot th {
+  color: blue;
+  }
+
+#demo-table tfoot th:after {
+  content: ":";
+  }
+
+#demo-table &gt; tfoot td {
+  background-color: #cee;
+  }
+
+#demo-table &gt; tfoot &gt; tr:first-child td {
+  border-top: .2em solid #7a7;
+  }
+</pre>
+</div>
+
+<p>Abra o documento no seu navegador. Deve ser muito similar a este:</p>
+
+<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+ <tbody>
+  <tr>
+   <td>
+    <div>
+    <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceanos</p>
+
+    <div style="border: 1px solid #7a7; background-color: #efe;">
+    <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
+     <tbody>
+      <tr style="text-align: center; color: blue;">
+       <th> </th>
+       <th>Área</th>
+       <th style="padding-left: .5em; padding-right: .5em;">Profundidade média</th>
+      </tr>
+      <tr style="font-style: italic; color: gray;">
+       <th> </th>
+       <th style="padding-left: .5em; padding-right: .5em;">milhões de km<sup>2</sup></th>
+       <th style="padding-left: .5em; padding-right: .5em;">m</th>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em;">Ártico:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em;">Atlântico:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em;">Pacífico:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em;">Índico:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+      </tr>
+      <tr>
+       <th style="padding-left: .5em; padding-right: .5em;">Antártico:</th>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+       <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em; color: blue;">Total:</th>
+       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+      </tr>
+      <tr>
+       <th style="padding-right: .5em; color: blue;">Média:</th>
+       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+      </tr>
+     </tbody>
+    </table>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Compare estas regras em sua folha de estilo com a tabela exibida, para se assegurar de que entende o efeito de cada regra. Se você achou uma regra com a qual não está seguro sobre, descomente-a e atualize o navegador para ver o que acontece.</p>
+
+<p>Aqui estão algumas notas sobre esta tabela:</p>
+
+<ul>
+ <li>O subtítulo encontra-se fora da borda da tabela.</li>
+ <li>Se você tiver um tamanho mínimo do ponto ajustado nas Opções, isto pode afetar o sobre-escrito no km<sup>2</sup>.</li>
+ <li>Existem três células vazias. Duas delas permitem que o fundo da tabela apareça através. A terceira tem um fundo e uma borda no topo.</li>
+ <li>As colunas são adicionadas pela folha de estilos.</li>
+</ul>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+ <caption>Desafios</caption>
+ <tbody>
+  <tr>
+   <td>Mude a folha de estilo para fazer a tabela parecer com isto:
+    <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <div>
+        <div style="border: 1px solid #7a7; background-color: #efe;">
+        <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
+         <tbody>
+          <tr style="text-align: center; color: blue;">
+           <th> </th>
+           <th>Área</th>
+           <th style="padding-left: .5em; padding-right: .5em;">Profundidade média</th>
+          </tr>
+          <tr style="font-style: italic; color: gray;">
+           <th> </th>
+           <th style="padding-left: .5em; padding-right: .5em;">milhões de km<sup>2</sup></th>
+           <th style="padding-left: .5em; padding-right: .5em;">m</th>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Ártico:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Atlântico:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Pacífico:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Índico:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-left: .5em; padding-right: .5em;">Antártico:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Total:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Média:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+          </tr>
+         </tbody>
+        </table>
+        </div>
+
+        <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceanos</p>
+        </div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor combribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Tabelas" title="Talk:pt/CSS/Como_começar/Tabelas">Discussão</a>.</p>
+
+<p>Esta é a última página deste tutorial que foca as propriedades e valores das CSS. Para um sumário completo de propriedades e valores, veja <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> em CSS Specification.</p>
+
+<p>A próxima página mostra novamente o propósito e a estrutura das folhas de estilo CSS: <strong><a href="/pt/CSS/Como_come%C3%A7ar/M%C3%ADdia" title="pt/CSS/Como_começar/Mídia">Mídia</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}</p>
diff --git a/files/pt-pt/learn/css/building_blocks/values_and_units/index.html b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..d5c15375d7
--- /dev/null
+++ b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,341 @@
+---
+title: Cor
+slug: Web/CSS/Como_começar/Cor
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+translation_of_original: Web/Guide/CSS/Getting_started/Color
+---
+<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p>
+
+<p>Esta página explica mais sobre como você pode especificar cores no CSS.</p>
+
+<p>Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Cor" name="Informa.C3.A7.C3.A3o:_Cor">Informação: Cor</h2>
+
+<p>Neste tutorial até agora, você usou um limitado número de cores nomeadas. CSS 2 suporta ao todo 17 cores nomeadas. Alguns dos nomes podem não ser o que você espera:</p>
+
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: black;"> </td>
+   <td>gray</td>
+   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
+   <td>silver</td>
+   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
+  </tr>
+  <tr>
+   <td>primárias</td>
+   <td>red</td>
+   <td style="width: 2em; height: 2em; background-color: red;"> </td>
+   <td>lime</td>
+   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
+   <td>blue</td>
+   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
+  </tr>
+  <tr>
+   <td>secundárias</td>
+   <td>yellow</td>
+   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
+   <td>aqua</td>
+   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
+   <td>fuchsia</td>
+   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>maroon</td>
+   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
+   <td>orange</td>
+   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
+   <td>olive</td>
+   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
+   <td>purple</td>
+   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
+   <td>green</td>
+   <td style="width: 2em; height: 2em; background-color: green;"> </td>
+   <td>navy</td>
+   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
+   <td>teal</td>
+   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Seu navegador pode suportar muitas cores nomeadas, como:
+    <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;">
+     <tbody>
+      <tr>
+       <td>dodgerblue</td>
+       <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
+       <td>peachpuff</td>
+       <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
+       <td>tan</td>
+       <td style="width: 2em; height: 2em; background-color: tan;"> </td>
+       <td>firebrick</td>
+       <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
+       <td>aquamarine</td>
+       <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>Para detalhes sobre esta lista extendida, veja: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ Para uma paleta maior, específica de cores de componentes vermelho, verde ou azul você precisa usar um sinal numérico (#) e três digitos <em>hexadecimais</em> na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#0f0</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#00f</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ Para a paleta total, especifique dois digitos hexadecimais por cada componente:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#ff0000</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#00ff00</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#0000ff</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#ffffff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+ <caption>Exemplos</caption>
+ <tbody>
+  <tr>
+   <td>Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos:
+    <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+     <tbody>
+      <tr>
+       <td>Começe com vermelho puro:</td>
+       <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+       <td><code>#f00</code></td>
+      </tr>
+      <tr>
+       <td>Para tornar isto mais pálido, adicione um pouco de verde e azul:</td>
+       <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
+       <td><code>#f77</code></td>
+      </tr>
+      <tr>
+       <td>Para tornar isto mais alaranjado, adicione um pouquinho mais de verde:</td>
+       <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
+       <td><code>#fa7</code></td>
+      </tr>
+      <tr>
+       <td>Para tornar isto mais escuro, reduza todos os componentes:</td>
+       <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
+       <td><code>#c74</code></td>
+      </tr>
+      <tr>
+       <td>Para reduzir a saturação, faça os componentes mais parecidos:</td>
+       <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
+       <td><code>#c98</code></td>
+      </tr>
+      <tr>
+       <td>Se você quiser deixar todos os componentes iguais, você obterá cinza:</td>
+       <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
+       <td><code>#ccc</code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td>Para uma sombra pastel como azul pálido:
+    <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+     <tbody>
+      <tr>
+       <td>Começe com branco puro:</td>
+       <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+       <td><code>#fff</code></td>
+      </tr>
+      <tr>
+       <td>Reduza um pouco os outros componentes:</td>
+       <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
+       <td><code>#eef</code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens.
+    <p>Por exemplo, este marrom (vermelho escuro):</p>
+
+    <div style="width: 24em;">
+    <pre>
+rgb(128, 0, 0)
+</pre>
+    </div>
+
+    <p><br>
+     Para maiores detalhes sobre como especificar cores, veja: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> na CSS Specification.</p>
+
+    <p>Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> na CSS Specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Propriedades_de_cor" name="Propriedades_de_cor">Propriedades de cor</h3>
+
+<p>Você já usou a propriedade <code>color</code> para textos.</p>
+
+<p>Você também já usou a propriedade <code>background-color</code> para mudar elementos de fundo.</p>
+
+<p>Fundos podem ser configurados para <code>transparent</code> para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>As caixas de <strong>Exemplo</strong> neste tutorial usam este fundo amarelo pálido:
+    <div style="width: 24em;">
+    <pre>
+background-color: #fffff4;
+</pre>
+    </div>
+
+    <p>As caixas de <strong>Mais detalhes</strong> usam esta paleta cinza:</p>
+
+    <div style="width: 24em;">
+    <pre>
+background-color: #f4f4f4;
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor" name="A.C3.A7.C3.A3o:_Usando_c.C3.B3digos_de_cor">Ação: Usando códigos de cor</h2>
+
+<p>Edite seu arquivo CSS. Faça a mudança mostrada aqui em negrito, para dar às letras iniciais um fundo azul pálido. (O layout e os comentários no seu arquivo irão provavelmente diferir do arquivo mostrado aqui. Mantenha o layout e os comentários como você preferir.)</p>
+
+<div style="width: 32em;">
+<pre class="eval">/*** CSS Tutorial: Página de Cor ***/
+
+/* Fonte da Página */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* Parágrafos */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* Letras Iniciais */
+strong {
+  color: red;
+  <strong>background-color: #ddf;</strong>
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+</pre>
+</div>
+
+<p>Atualize seu navegador para ver o resultado:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado.
+    <p>(Isto não pode ser feito exatamente, mas você pode deixar parecido. Para fazer isso exatamente você precisa do código com seis dígitos, e você precisa olhar a Especificação CSS ou usar uma ferramenta gráfica para converter as cores.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Cor" title="Talk:pt/CSS/Como_começar/Cor">Discussão</a>.</p>
+
+<p>Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.</p>
+
+<p>A próxima página explica como você pode fazer exceções para separar rigorosamente: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}</p>
diff --git a/files/pt-pt/learn/css/css_layout/index.html b/files/pt-pt/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..0612aad9b5
--- /dev/null
+++ b/files/pt-pt/learn/css/css_layout/index.html
@@ -0,0 +1,453 @@
+---
+title: Disposição
+slug: Web/CSS/Como_começar/Disposição
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/CSS_layout
+translation_of_original: Web/Guide/CSS/Getting_started/Layout
+---
+<p>{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}</p>
+
+<p>Esta página descreve algumas maneiras para ajustar a disposição do seu documento.</p>
+
+<p>Você muda a disposição do seu documento de amostra...</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Disposi.C3.A7.C3.A3o" name="Informa.C3.A7.C3.A3o:_Disposi.C3.A7.C3.A3o">Informação: Disposição</h2>
+
+<p>Você pode usar as CSS para especificar vários efeitos visuais que mudam a disposição do seu documento. Algumas técnicas para especificação da disposição são avançadas,e além do alcance deste tutorial básico.</p>
+
+<p>Quando você desenha uma disposição que aparece similar em vários navegadores, sua folha de estilo interage com a folha de estilo padrão do navegador e o motor de disposição em alguns caminhos pode se tornar complexo. Isto é também uma matéria avançada, além do alcance deste tutorial básico.</p>
+
+<p>Esta página descreve algumas técnicas simples que você pode tentar.</p>
+
+<h4 id="Estrutura_do_documento" name="Estrutura_do_documento">Estrutura do documento</h4>
+
+<p>Se você quer controlar a disposição do seu documento, então você pode ter que mudar sua estrutura.</p>
+
+<p>A linguagem de marcação do seu documento pode ter tags com propósito geral para criar a estrutura. Por exemplo, no HTML você pode usar a tag <code>DIV</code> para criar a estrutura.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>No seu documento de amostra, os parágrafos numerados sob o segundo título não tem um "recipiente" próprio.
+    <p>Sua folha de estilo não pode desenhar uma borda ao redor destes parágrafos, porque não há elemento especificado no seletor.</p>
+
+    <p>Para fixar este problema estrutural, você pode adicionar uma tag <code>DIV</code> em torno dos parágrafos. Esta tag é única, então isto pode ser identificado por um atributo <code>id</code>:</p>
+
+    <div style="width: 40em; color: gray;">
+    <pre class="eval">
+&lt;H3 class="numbered"&gt;Parágrafos numerados&lt;/H3&gt;
+<strong style="color: black;">&lt;DIV id="numbered"&gt;</strong>
+&lt;P class="numbered"&gt;Lorem ipsum&lt;/P&gt;
+&lt;P class="numbered"&gt;Dolor sit&lt;/P&gt;
+&lt;P class="numbered"&gt;Amet consectetuer&lt;/P&gt;
+&lt;P class="numbered"&gt;Magna aliquam&lt;/P&gt;
+&lt;P class="numbered"&gt;Autem veleum&lt;/P&gt;
+<strong style="color: black;">&lt;/DIV&gt;</strong>
+</pre>
+    </div>
+
+    <p>Agora sua folha de estilo pode use uma regra para especificar bordas em tordo de ambas as listas:</p>
+
+    <div style="width: 30em;">
+    <pre class="eval">
+ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+  }
+</pre>
+    </div>
+
+    <p>O resultado deve ser como este:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
+
+        <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
+        <ul style="">
+         <li>Ártico</li>
+         <li>Atlântico</li>
+         <li>Pacífico</li>
+         <li>Índico</li>
+         <li>Antártico</li>
+        </ul>
+        </div>
+
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
+
+        <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
+        <p><strong>1: </strong>Lorem ipsum</p>
+
+        <p><strong>2: </strong>Dolor sit</p>
+
+        <p><strong>3: </strong>Amet consectetuer</p>
+
+        <p><strong>4: </strong>Magna aliquam</p>
+
+        <p><strong>5: </strong>Autem veleum</p>
+        </div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Tamanhos_das_unidades" name="Tamanhos_das_unidades">Tamanhos das unidades</h3>
+
+<p>Anteriormente neste tutorial, você especificou tamanhos em pixels (<code>px</code>). Estes são apropriados para alguns propósitos em um dispositivo de exposição como uma tela de computador. Mas quando o usuário muda o tamanho da fonte, sua disposição pode ficar errada.</p>
+
+<p>Para muitos propósitos é melhor especificar tamanhos com porcentagem ou em ems (<code>em</code>). Um em é nominalmente o tamanho da fonte corrente (a largura de uma letra m). Quando o usuário muda o tamanho da fonte, sua disposição ajusta-se automaticamente.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>A borda da esquerda deste texto tem o tamanho especificado em pixels.
+    <p>A borda da direita tem o tamanho especificado em ems. No seu navegador, mude o tamanho da fonte para ver como a borda da direita se ajusta mas a borda da esquerda não:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <div style="">Redimensione-me por favor</div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Para outros dispositivos, outras unidades de comprimento são apropriadas.
+    <p>Há mais informação sobre isto em uma página anterior deste tutorial.</p>
+
+    <p>Para detalhes completos sobre os valores e unidades que você pode usar, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> em CSS Specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Disposi.C3.A7.C3.A3o_do_texto" name="Disposi.C3.A7.C3.A3o_do_texto">Disposição do texto</h3>
+
+<p>Duas propriedades especificam como o conteúdo de um elemento é alinhado. Você pode usá-las para ajustes simples na disposição:</p>
+
+<ul>
+ <li><code>text-align</code></li>
+</ul>
+
+<dl>
+ <dd>Alinha o conteúdo. Use um destes valores: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd>
+</dl>
+
+<ul>
+ <li><code>text-indent</code></li>
+</ul>
+
+<dl>
+ <dd>Indenta o conteúdo, colocando o espaço que você especificar.</dd>
+</dl>
+
+<p>Estas propriedades aplicam-se a qualquer conteúdo como texto no elemento, não somente ao texto atual. Lembre-se que elas são herdadas pelo elemento filho, então você pode ter que desativá-las nos elementos filhos para não se surpreender com os resultados.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Para centralizar títulos:
+    <div style="width: 30em;">
+    <pre class="eval">
+h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+  }
+</pre>
+    </div>
+
+    <p>Resulta em:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) Os oceanos</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>Em um documento HTML, o conteúdo que você vê abaixo do título não é contido estruturalmente pelo título. Então quando você alinha um título como isto, as tags abaixo do título não são afetadas pela herança.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Flutuantes" name="Flutuantes">Flutuantes</h3>
+
+<p>A propriedade <code>float</code> força um elemento para a esquerda ou direita. Isto é uma maneira simples de controlar sua posição e tamanho.</p>
+
+<p>O resto do conteúdo do documento normalmente flui ao redor do elemento flutuado. Você pode controlar isto usando a propriedade <code>clear</code> em outros elementos para fazê-los permanecer sem flutuantes.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Em seu documento de amostra, as listas esticam através da janela. Você pode prevenir isto flutuando-os para a esquerda.
+    <p>Para manter os títulos no lugar, você precisa também especificar que eles permaneçam limpos de flutuantes à sua esquerda:</p>
+
+    <div style="width: 30em;">
+    <pre class="eval">
+ul, #numbered {float: left;}
+h3 {clear: left;}
+</pre>
+    </div>
+
+    <p>O resultado deve se parecer com isto:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
+
+        <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
+        <ul style="">
+         <li>Ártico</li>
+         <li>Atlântico</li>
+         <li>Pacífico</li>
+         <li>Índico</li>
+         <li>Antártico</li>
+        </ul>
+        </div>
+
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
+
+        <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
+        <p><strong>1: </strong>Lorem ipsum</p>
+
+        <p><strong>2: </strong>Dolor sit</p>
+
+        <p><strong>3: </strong>Amet consectetuer</p>
+
+        <p><strong>4: </strong>Magna aliquam</p>
+
+        <p><strong>5: </strong>Autem veleum</p>
+        </div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>(Um pequeno enchimento é necessário à direita das caixas, onde a borda fica muito perto do texto.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Posicionamento" name="Posicionamento">Posicionamento</h3>
+
+<p>Você pode especificar a posição dos elementos de quatro maneiras, especificando a propriedade <code>position</code> e um dos valores seguintes:</p>
+
+<p>Estas são propriedades avançadas. É possível usá-las de maneiras simples — esta é a razão pela qual elas são mencionadas neste tutorial básico. Mas usando-as para disposições complexas pode-se dificultar.</p>
+
+<ul>
+ <li><code>relative</code></li>
+</ul>
+
+<dl>
+ <dd>A posição do elemento é alterada relativamente à sua posição normal.</dd>
+ <dd>Use-o para mover um elemento por uma quantidade especificada. Às vezes você pode usar a margem do elemento para obter o mesmo efeito.</dd>
+</dl>
+
+<ul>
+ <li><code>fixed</code></li>
+</ul>
+
+<dl>
+ <dd>A posição do elemento é fixa.</dd>
+ <dd>Especifique a posição do elemento relativa à janela do documento. Mesmo que o resto do documento seja rolado, o elemento permanece fixo.</dd>
+</dl>
+
+<ul>
+ <li><code>absolute</code></li>
+</ul>
+
+<dl>
+ <dd>A posição do documento é fixada relativamente a um elemento pai.</dd>
+ <dd>Somente um elemento pai que esteja posicionado com <code>relative</code>, <code>fixed</code> ou <code>absolute</code> o fará.</dd>
+</dl>
+
+<dl>
+ <dd>Você pode tornar qualquer elemento principal apropriado, especificando <code>position: relative;</code> sem especificar qualquer movimento.</dd>
+</dl>
+
+<ul>
+ <li><code>static</code></li>
+</ul>
+
+<dl>
+ <dd>O padrão. Use este valor caso precise desativar a posição explicitamente.</dd>
+</dl>
+
+<p>Agora, com estes valores da propriedade <code>position</code> (exeto para <code>static</code>), especifique uma ou mais propriedades: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> para identificar onde você quer que o elemento apareça, e talvez também seu tamanho.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Para posicionar dois elementos no topo, crie um "recipiente" principal em seu documento com os dois elementos dentre dele:
+    <div style="width: 30em;">
+    <pre class="eval">
+&lt;DIV id="parent-div"&gt;
+&lt;P id="forward"&gt;/&lt;/P&gt;
+&lt;P id="back"&gt;\&lt;/P&gt;
+&lt;/DIV&gt;
+</pre>
+    </div>
+
+    <p>Na sua folha de estilo, faça a posição principal <code>relative</code>. Ela não precisa que seja especificado qualquer movimento atual. Faça a posição subordinada <code>absolute</code>:</p>
+
+    <div style="width: 30em;">
+    <pre>
+#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+  }
+
+#forward, #back {
+  position: absolute;
+  margin:0px;
+  top: 0px;
+  left: 0px;
+  }
+
+#forward {
+  color: blue;
+  }
+
+#back {
+  color: red;
+  }
+</pre>
+    </div>
+
+    <p>O resultado deve ser como isto, com a contra barra (\) sobre a barra (/):</p>
+
+    <div style="position: relative; left: .33em; font: bold 300% sans-serif;">
+    <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>
+
+    <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
+    </div>
+
+    <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;">
+     <tbody>
+      <tr>
+       <td> </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>A história completa sobre posicionamento toma dois complexos capítulos em CSS Specification: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> e <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.
+    <p>Se você está desenhando folhas de estilo para trabalharem em vários navegadores, então você também precisa levar em conta as diferenças na maneira em que os navegadores interpretam o padrão, e talvez bugs em algumas versões de alguns navegadores.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Especificando_a_disposi.C3.A7.C3.A3o" name="A.C3.A7.C3.A3o:_Especificando_a_disposi.C3.A7.C3.A3o">Ação: Especificando a disposição</h2>
+
+<p>Mude seu documento de amostra e sua folha de estilo usando os exemplos anteriores nas seções <strong>Estrutura do documento</strong> e <strong>Flutuantes</strong>.</p>
+
+<p>No exemplo dos <strong>Flutuantes</strong>, adicione enchimento para separar o texto da borda direita por 0,5 em.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>Mude seu documento de amostra, adicionando esta tag perto do fim, somente antes de <code>&lt;/BODY&gt;</code>
+    <pre>
+&lt;IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
+</pre>
+
+    <p>Se você não baixou o arquivo de imagem anteriormente neste tutorial, baixe-o agora:</p>
+
+    <table style="border: 2px solid #ccc;">
+     <tbody>
+      <tr>
+       <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>Prediga onde a imagem irá aparecer no seu documento. Então atualize seu navegador para ver se você estava certo.</p>
+
+    <p>Adicione uma regra à sua folha de estilo que fixe a imagem no topo e a direita do seu documento.</p>
+
+    <p>Atualize seu navegador e diminua o tamanho da janela. Cheque se a imagem permanece no topo e a direita mesmo que você role seu documento:</p>
+
+    <div style="position: relative; width: 29.5em; height: 18em;">
+    <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>
+
+    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
+    <ul style="">
+     <li>Ártico</li>
+     <li>Atlântico</li>
+     <li>Pacífico</li>
+     <li>Índico</li>
+     <li>Antártico</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p>
+
+    <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+    </div>
+
+    <p style=""> </p>
+
+    <div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="Talk:pt/CSS/Como_começar/Disposição">Discussão</a>.</p>
+
+<p>A próxima página descreve seletores para regras mais avançadas das CSS, e algumas maneiras específicas de estilizar tabelas: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Tabelas" title="pt/CSS/Como_começar/Tabelas">Tabelas</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}</p>
diff --git a/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html b/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..08ede46aa3
--- /dev/null
+++ b/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,188 @@
+---
+title: CSS legível
+slug: Web/CSS/Como_começar/CSS_legível
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
+---
+<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p>
+
+<p>Esta página discute o estilo e a gramática da linguagem CSS.</p>
+
+<p>Você muda a maneira em que seu arquivo de amostra CSS é exibido, para torná-lo mais legível.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel" name="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel">Informação: CSS legível</h2>
+
+<p>Você pode adicionar espaço em branco e comentários na sua folha de estilo para fazê-la mais legível. Você pode também juntar seletores de grupo, quando as mesmas regras de estilo se aplicam aos elementos selecionados em meios diferentes.</p>
+
+<h3 id="Espa.C3.A7o_em_branco" name="Espa.C3.A7o_em_branco">Espaço em branco</h3>
+
+<p>Espaços em branco significam espaços reais, tabs e quebras de linha. Você pode adicionar espaços em branco para tornar suas folhas de estilo mais legíveis.</p>
+
+<p>Seu arquivo de amostra de CSS atualmente tem uma regra por linha, e quase o mínimo de espaço em branco. Em uma uma folha de estilo complexa esta disposição pode dificultar a leitura, dificultando também a manutenção da sua folha de estilo.</p>
+
+<p>A disposição que você escolhe é usualmente um preferência pessoal, mas se suas folhas de estilo são parte de projetos compartilhados, estes projetos podem ter suas próprias convenções.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplos</caption>
+ <tbody>
+  <tr>
+   <td>Algumas pessoas gostam de uma diposição compacta que temos usado, somente dividindo a linha quando ela se torna muito longa:
+    <pre>
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+
+    <p>Algumas pessoas preferem uma propriedade-valor por linha:</p>
+
+    <div style="width: 45em;">
+    <pre class="eval">
+.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+    </div>
+
+    <p>Algumas pessoas usam tabs – dois espaços, quatro espaços, ou um tab são comuns:</p>
+
+    <div style="width: 45em;">
+    <pre class="eval">
+.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+    </div>
+
+    <p>Algumas pessoas gostam de enfileirar a linha verticalmente (mas é difícil de manter uma disposição assim):</p>
+
+    <div style="width: 45em;">
+    <pre class="eval">
+.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+    </div>
+
+    <p>Algumas pessoas usam tabs para a disposição. Algumas pessoas usam somente espaços.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Coment.C3.A1rios" name="Coment.C3.A1rios">Comentários</h3>
+
+<p>Comentários em CSS começam com <code>/*</code> e terminam com <code>*/</code>.</p>
+
+<p>Você pode usar comentários para fazer comentários reais na sua folha de estilo, e também para <em>descomentar</em> partes que estiverem temporariamente para propósito de testes.</p>
+
+<p>Para comentar parte da folha de estilo, coloque a parte em um comentário então o navegador ignorará isso. Tome cuidado onde você começa e termina o seu comentário. O resto da sua folha de estilo ainda deve ter a sintaxe correta.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>
+    <div style="width: 45em;">
+    <pre class="eval">
+/* Estilo para a letra C inicial no primeiro parágrafo */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Seletores_agrupados" name="Seletores_agrupados">Seletores agrupados</h3>
+
+<p>Quando muitos elementos tiverem o mesmo estilo, você pode especificar um grupo de seletores, separando-os com comentários. A declaração se aplica a todos os elementos selecionados.</p>
+
+<p>Em outra parte da sua folha de estilo você pode especificar os mesmos seletores, de novo individualmente, para aplicar estilo individual às suas regras.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Esta regra faz os elementos <small>H1</small>, <small>H2</small> and <small>H3</small> da mesma cor.
+    <p>Isto é conveniente para especificar a cor em somente um lugar, no caso em que precisa ser alterado.</p>
+
+    <div style="width: 30em;">
+    <pre class="eval">
+/* cores para os cabeçalhos */
+h1, h2, h3 {color: navy;}
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo" name="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo">Ação: Adicionando comentários e melhorando o arranjo</h2>
+
+<p>Edite seu arquivo CSS, e assegure-se que ele tem todas as regras nele (em qualquer ordem):</p>
+
+<div style="width: 30em;">
+<pre class="eval">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+</div>
+
+<p>Faça isto mais legível rearranjando isto em um meio que possa ser achado lógicamente, adicionando espaços em branco e comentários da maneira que você achar melhor.</p>
+
+<p>Salve o arquivo e atualize a tela do seu navegador, assegure-se que as mudanças que você fez não afetaram o modo como a folha de estilo trabalha:</p>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>Comente parte de sua folha de estilo, sem mudar qualquer coisa, para fazer a primeira letra de seu documento vermelha:
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+      </tr>
+      <tr>
+       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>(Existe mais de uma maneira de fazer isto.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/CSS_leg%C3%ADvel" title="Talk:pt/CSS/Como_começar/CSS_legível">Discussão</a>.</p>
+
+<p>Seu documento de amostra usou o texto em itálico e o texto com sublinhado. A próxima página descreve mais caminhos para especificar a aparência do texto no seu documento: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Estilos_de_texto" title="pt/CSS/Como_começar/Estilos_de_texto">Estilos de texto</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p>
diff --git a/files/pt-pt/learn/css/first_steps/how_css_works/index.html b/files/pt-pt/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..bd667439ff
--- /dev/null
+++ b/files/pt-pt/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,130 @@
+---
+title: Como o CSS trabalha
+slug: Web/CSS/Como_começar/Como_o_CSS_trabalha
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
+---
+<p>{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}</p>
+
+<p>Esta página explica como o CSS trabalha no seu navegador. Você analiza seu documento de amostra, reavaliando os detalhes do seu estilo.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Como_o_CSS_trabalha" name="Informa.C3.A7.C3.A3o:_Como_o_CSS_trabalha">Informação: Como o CSS trabalha</h2>
+
+<p>Quando o Mozilla exibe um documento, é necessário combinar o conteúdo do documento com seu estilo de informação. Então o documento é processado em dois estágios:</p>
+
+<ul>
+ <li>No primeiro estágio, o Mozilla converte a linguagem de marcação e o CSS em <em>DOM</em> (Document Object Model - Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Isto combina o conteúdo do documento com seu estilo.</li>
+</ul>
+
+<ul>
+ <li>No segundo estágio, o Mozilla exibe o DOM.</li>
+</ul>
+
+<p>Uma linguagem de marcação usa tags para definir a estrutura do documento. Uma tag pode armazenar outras tags entre seu início e fim.</p>
+
+<p>Um DOM tem a estrutura como a de uma árvore. Cada tag e período do texto na linguagem de marcação torna-se um <em>nó</em> na estrutura da árvore. Os nós do DOM não são armazenadores. Em substituição, eles são primários aos nós subordinados.</p>
+
+<p>Os nós que correspondem a tags também são conhecidos por <em>elementos</em>.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>No seu documento de amostra, a tag <code>&lt;p&gt;</code> e seu fim <code>&lt;/p&gt;</code> criam um armazenamento:
+    <div style="width: 24em;">
+    <pre class="eval">
+&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+    </div>
+
+    <p>No DOM, o corespondente ao nó P é um primário. Os subordinados são os nós <small>STRONG</small> e os nós do texto. Os nós <small>STRONG</small> são os primários, e os nós do texto são os subordinados.</p>
+
+    <div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;">
+    <p><span style="color: black;">P</span> ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">C</span>"<br>
+     │<br>
+     ├─"<span style="color: black;">ascading</span>"<br>
+     │<br>
+     ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>"<br>
+     │<br>
+     ├─"<span style="color: black;">tyle</span>"<br>
+     │<br>
+     ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>"<br>
+     │<br>
+     └─"<span style="color: black;">heets</span>"</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>O entendimento do DOM ajuda-o a projetar, depurar e manter seu CSS, pois o DOM é onde o seu CSS e o conteúdo do documento se unem.</p>
+
+<h2 id="A.C3.A7.C3.A3o:_Analizando_um_DOM" name="A.C3.A7.C3.A3o:_Analizando_um_DOM">Ação: Analizando um DOM</h2>
+
+<p>Para analizar um DOM, você precisa de um software especial. Aqui, você usa o <a href="/pt/DOM_Inspector" title="pt/DOM_Inspector">DOM Inspector</a> (DOMi) da Mozilla para analizar um DOM.</p>
+
+<p>Use seu navegador Mozilla para abrir seu documento simples.</p>
+
+<p>Na barra de menu do seu navegador, escolha Ferramentas – DOM Inspector, ou talvez Ferramentas – Desenvolvimento Web – DOM Inspector.</p>
+
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Se seu navegador Mozilla não tem o DOMi, você pode reinstalá-lo assegurando-se de escolher para instalar o componente de ferramentas da web. Então retorne a este tutorial.
+    <p>Se você não quiser instalar o DOMi, você pode pular esta seção e ir diretamente para a próxima página. Pulando esta seção você não interfere com o resto deste tutorial.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ No DOMi, expanda os nós do seu documento clicando em suas flechas.</p>
+
+<p><strong>Nota:</strong> O espaçamento em seu arquivo HTML faz com que o DOMi mostre alguns nós de texto vazios, que você pode ignorar.</p>
+
+<p>O resultado deve ser parecido com isto, dependendo do que você tenha expandido:</p>
+
+<table style="border: 2px outset #36b; padding: 0 0 0 2em;">
+ <tbody>
+  <tr>
+   <td>
+    <div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;">
+    <p>│<br>
+     <span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span> │ │ │ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span> │ │ └<span style="color: darkblue;">#text</span> │ ├╴<span style="color: darkblue;">#text</span> │ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span> │ │</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Quando você seleciona algum nó, você pode usar o painel direito do DOMi para achar mais sobre ele. Por exemplo, quando você seleciona um nó do texto, DOMi mostra para você o texto no painel da direita.</p>
+
+<p>Quando você seleciona um elemento nó, DOMi o analiza e fornece uma enorme quantidade de informações no seu painel direito. A informação sobre estilo é somente uma parte das informações que ele fornece.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>No DOMi, clique no nó <small>STRONG</small>.
+    <p>Use o painel direito do DOMi para achar onde fica a cor do nó (vermelho) e onde sua aparência é mais forte que o texto normal (negrito).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Como_o_CSS_trabalha" title="Talk:pt/CSS/Como_começar/Como_o_CSS_trabalha">Discussão</a>.</p>
+
+<p>Se você tomou o desafio, você viu o estilo da informação em mais de um lugar interagir para criar o estilo final para um elemento.</p>
+
+<p>A próxima página explica mais sobre estas interações: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Cascata_e_heran%C3%A7a" title="pt/CSS/Como_começar/Cascata_e_herança">Cascata e herança</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}</p>
diff --git a/files/pt-pt/learn/css/first_steps/index.html b/files/pt-pt/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..fa514756bd
--- /dev/null
+++ b/files/pt-pt/learn/css/first_steps/index.html
@@ -0,0 +1,92 @@
+---
+title: Como começar
+slug: Web/CSS/Como_começar
+tags:
+  - CSS
+  - 'CSS:Como_começar'
+  - Todas_as_Categorias
+translation_of: Learn/CSS/First_steps
+translation_of_original: Web/Guide/CSS/Getting_started
+---
+<p> </p>
+
+<h3 id="Introdu.C3.A7.C3.A3o" name="Introdu.C3.A7.C3.A3o">Introdução</h3>
+
+<p>Este tutorial o introduz às CSS (Cascading Style Sheets - Folhas de Estilo em Cascata).</p>
+
+<p>Este tutorial o orienta nos recursos básicos de CSS com exemplos práticos que você pode experimentar sozinho em seu computador. Ele é dividido em duas partes:</p>
+
+<ul>
+ <li>A Parte I ilustra os recursos básicos das CSS que funcionam nos navegadores Mozilla e também na maioria dos navegadores modernos.</li>
+</ul>
+
+<ul>
+ <li>A Parte II contém alguns exemplos de recursos especiais que funcionam no Mozilla, mas não necessariamente em outros ambientes.</li>
+</ul>
+
+<p>Este tutorial é baseado na <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specification</a>.</p>
+
+<h4 id="Quem_deve_ler_este_tutorial.3F" name="Quem_deve_ler_este_tutorial.3F">Quem deve ler este tutorial?</h4>
+
+<p>Este tutorial é direcionado para iniciantes em CSS, mas você também poderá usá-lo caso tenha alguma experiência em CSS.</p>
+
+<p>Se você é um iniciante em CSS, leia a Parte I deste tutorial para entender CSS e aprender a usá-lo. Em seguida, leia a Parte II para entender o escopo de CSS no Mozilla.</p>
+
+<p>Se você conhece CSS, poderá ignorar as partes desse tutorial que já conhece e ler apenas as partes que lhe interessam.</p>
+
+<p>Se você já tem experiência em CSS mas não no Mozilla, pode ir direto para a Parte II.</p>
+
+<h4 id="O_que_voc.C3.AA_precisa_antes_de_come.C3.A7ar.3F" name="O_que_voc.C3.AA_precisa_antes_de_come.C3.A7ar.3F">O que você precisa antes de começar?</h4>
+
+<p>Para melhor aproveitar este tutorial, você precisa de um editor de arquivos de texto e um navegador Mozilla (Firefox, Mozilla Suite ou Seamonkey). Você também deve saber como utilizá-los de um modo básico.</p>
+
+<p>Se não deseja editar arquivos, você pode apenas ler o tutorial e observar as imagens, mas este não é o melhor modo de aprendizado.</p>
+
+<p>Poucas partes deste tutorial podem requerer outro software Mozilla. Essas partes são opcionais. Você pode ignorar essas partes se não desejar fazer o download de outro software Mozilla.</p>
+
+<p><strong>Nota:</strong> As CSS oferece modos de se trabalhar com cores, de modo que partes deste tutorial dependem de cores. Você poderá utilizar essas partes facilmente somente se tiver um monitor colorido e uma visão colorida normal.</p>
+
+<h4 id="Como_utilizar_este_tutorial" name="Como_utilizar_este_tutorial">Como utilizar este tutorial</h4>
+
+<p>Para utilizar este tutorial, leia cuidadosamente as páginas e em seqüência. Se perder uma página, você poderá ter dificuldades para entender as páginas posteriores.</p>
+
+<p>Em cada página, utilize a seção<em>Informações</em> para entender como o CSS funciona. Utilize a seção<em>Ações</em> para tentar usar o CSS em seu próprio computador.</p>
+
+<p>Para testar seus conhecimentos, faça o teste ao final de cada página. As soluções para alguns testes são reveladas nas páginas posteriores no tutorial.</p>
+
+<p>Para se aprofundar em CSS, leia as informações nas caixas entituladas<em>Mais detalhes</em>. Utilize os links para localizar informações referentes às CSS.</p>
+
+<h3 id="Tutorial_Parte_I" name="Tutorial_Parte_I">Tutorial Parte I</h3>
+
+<p>Um guia passo-a-passo para CSS.</p>
+
+<ol>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/O_que_%c3%a9_CSS">O que é CSS</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Porque_usar_CSS">Porque usar CSS</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Como_o_CSS_trabalha">Como o CSS trabalha</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Cascata_e_heran%c3%a7a">Cascata e herança</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Seletores">Seletores</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/CSS_leg%c3%advel">CSS legível</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Estilos_de_texto">Estilos de texto</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Cor">Cor</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Conte%c3%bado">Conteúdo</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Listas">Listas</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Caixas">Caixas</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Disposi%c3%a7%c3%a3o">Disposição</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Tabelas">Tabelas</a></strong></li>
+ <li><strong><a href="/pt-PT/docs/Web/CSS/Como_começar/Mídia">Média</a></strong></li>
+</ol>
+
+<h3 id="Tutorial_Parte_II" name="Tutorial_Parte_II">Tutorial Parte II</h3>
+
+<p>Exemplos que mostram o escopo da CSS no Mozilla.</p>
+
+<ol>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/JavaScript">JavaScript</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/XBL_bindings">XBL bindings</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Interfaces_de_usu%c3%a1rio_XUL">Interfaces de usuário XUL</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Gr%c3%a1ficos_SVG">Gráficos SVG</a></strong></li>
+ <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Dados_XML">Dados XML</a></strong></li>
+</ol>
+
+<p>{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>
diff --git a/files/pt-pt/learn/css/howto/faq_de_css/index.html b/files/pt-pt/learn/css/howto/css_faq/index.html
index 357e271657..357e271657 100644
--- a/files/pt-pt/learn/css/howto/faq_de_css/index.html
+++ b/files/pt-pt/learn/css/howto/css_faq/index.html
diff --git a/files/pt-pt/learn/css/howto/generated_content/index.html b/files/pt-pt/learn/css/howto/generated_content/index.html
new file mode 100644
index 0000000000..523c408aad
--- /dev/null
+++ b/files/pt-pt/learn/css/howto/generated_content/index.html
@@ -0,0 +1,188 @@
+---
+title: Conteúdo
+slug: Web/CSS/Como_começar/Conteúdo
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<p>{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}</p>
+
+<p>Esta página descreve algumas maneiras que você pode usar no CSS para adicionar conteúdo quando um documento é exibido.</p>
+
+<p>Você modifica sua folha de estilo para adicionar conteúdo de texto e uma imagem.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Conte.C3.BAdo" name="Informa.C3.A7.C3.A3o:_Conte.C3.BAdo">Informação: Conteúdo</h2>
+
+<p>Uma das vantagens importantes das CSS é que ele o ajuda a separar o estilo do documento do seu conteúdo. Mas há situações onde faz sentido especificar certo conteúdo como parte de sua folha de estilo, não como parte do seu documento.</p>
+
+<p>O conteúdo especificado em uma folha de estilo pode consistir em texto ou imagens. Você especifica o conteúdo em sua folha de estilo quando o conteúdo tem uma ligação próxima à estrutura do documento.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Especificar o conteúdo em uma folha de estilo pode causar complicações. Por exemplo, você pode ter versões diferentes da língua do seu documento que compartilham uma folha de estilo. Se parte da folha de estilo tem que ser traduzida, isto mostra que você precisa por estas partes da folha de estilo em arquivos separados e arrumá-los para então ligá-los com a versão apropriada da língua do seu documento.
+    <p>Estas complicações não surgem se o conteúdo que você especificou consistir em símbolos ou imagens que se aplicam em todas as línguas e culturas.</p>
+
+    <p><br>
+     O conteúdo especificado em uma folha de estilo não se tornará parte do DOM.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Conte.C3.BAdo_do_texto" name="Conte.C3.BAdo_do_texto">Conteúdo do texto</h3>
+
+<p>CSS pode inserir um texto antes ou depois de um elemento. Para especificar isto, faça uma regra e adicione <code>:before</code> ou <code>:after</code> ao seletor. Na declaração, especifique a propriedade <code>content</code> com o conteúdo do texto como seu valor.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Esta regra adiciona o texto <span style="font-weight: bold; color: navy;">Referência:</span> antes de todo elemento com a classe <code>ref</code>:
+    <div style="width: 30em;">
+    <pre class="eval">
+.ref:before {
+  font-weight: bold;
+  color: navy;
+  content: "Referência: ";
+  }
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>O caractere de configuração de uma folha de estilo é por padrão o UTF-8, mas isto pode ser especificado na ligação, na própria folha de estilo ou por outras maneiras. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> na CSS Specification.
+    <p>Caracteres individuais podem às vezes ser especificados por um mecanismo de escape que use o contra barra (\) com o caráter de escape. Por exemplo, \265B é um símbolo do xadrez para a rainha preta ♛. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> e também <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> em CSS Specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Conte.C3.BAdo_da_imagem" name="Conte.C3.BAdo_da_imagem">Conteúdo da imagem</h3>
+
+<p>Para adicionar uma imagem antes ou depois de um elemento, você pode especificar a URL de um arquivo de imagem no valor da propriedade <code>content</code>.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Esta regra adiciona um espaço e um ícone depois de cada ligação da classe <code>glossary</code>:
+    <div style="width: 45em;">
+    <pre class="eval">
+a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ Para adicionar uma imagem ao fundo de um elemento, especifique a URL de um arquivo de imagem no valor da propriedade <code>background</code>. Isto é uma propriedade que especifica a cor do fundo, a imagem, como a imagem repete, e alguns outros detalhes.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Esta regra configura o fundo de um elemento específico, usando uma URL para especificar um arquivo de imagem.
+    <p>O seletor especifica o id do elemento. O valor <code>no-repeat</code> faz a imagem aparecer apenas uma vez:</p>
+
+    <div style="width: 50em;">
+    <pre class="eval">
+#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Para informações sobre propriedades individuais que afetam o fundo, e sobre outras opções que você pode especificar para as imagens de fundo, veja <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">The background</a> na CSS Specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Adicionando_uma_imagem_de_fundo" name="A.C3.A7.C3.A3o:_Adicionando_uma_imagem_de_fundo">Ação: Adicionando uma imagem de fundo</h2>
+
+<p>Esta imagem é um quadrado branco com uma linha azul em baixo. Baixe o arquivo desta imagem no mesmo diretório do seu arquivo CSS:</p>
+
+<table style="border: 2px solid #ccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2528/=Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Por exemplo, clique com o botão direito sobre isto para abrir o menu de contexto, então escolha Salvar Imagem Como... e especifique o diretório que você está usando para este tutorial.)</p>
+
+<p>Edite o seu arquivo CSS e adicione esta regra ao corpo, configurando a imagem de fundo para a página inteira.</p>
+
+<div style="width: 40em;">
+<pre class="eval">background: url("Blue-rule.png");
+</pre>
+</div>
+
+<p>O valor <code>repeat</code> é o padrão, então isto não precisa ser especificado. A imagem é repetida horizontal e verticalmente, dando a aparência parecida com a de um papel de escrita com linhas:</p>
+
+<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/2527/=Blue-rule-ground.png"></p>
+
+<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+<div style="font-style: italic; width: 24em;">
+<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
+</div>
+
+<div style="font-style: normal; padding-top: 2px; height: 8em;">
+<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
+</div>
+</div>
+</div>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>Baixe esta imagem:
+    <table style="border: 2px solid #ccc;">
+     <tbody>
+      <tr>
+       <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>Adicione uma regra à sua folha de estilo então isto mostrará a imagem no começo de cada linha:</p>
+
+    <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+    <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/2527/=Blue-rule-ground.png"></p>
+
+    <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+    <div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
+
+    <div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Uma maneira comum de adicionar conteúdo à folha de estilo é marcar os itens em listas. Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="Talk:pt/CSS/Como_começar/Conteúdo">Discussão</a>.</p>
+
+<p>A próxima página descreve como especificar o estilo para elementos de listas: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Listas" title="pt/CSS/Como_começar/Listas">Listas</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}</p>
diff --git a/files/pt-pt/learn/css/styling_text/fundamentals/index.html b/files/pt-pt/learn/css/styling_text/fundamentals/index.html
new file mode 100644
index 0000000000..373688d00f
--- /dev/null
+++ b/files/pt-pt/learn/css/styling_text/fundamentals/index.html
@@ -0,0 +1,158 @@
+---
+title: Estilos de texto
+slug: Web/CSS/Como_começar/Estilos_de_texto
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Styling_text/Fundamentals
+translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
+---
+<p>{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}</p>
+
+<p>Esta página dá mais exemplos de estilos de texto.</p>
+
+<p>Você modifica sua folha de estilo de amostra para usar diferentes fontes.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Estilos_de_texto" name="Informa.C3.A7.C3.A3o:_Estilos_de_texto">Informação: Estilos de texto</h2>
+
+<p>CSS tem várias propriedades para estilos de texto.</p>
+
+<p>Há uma conveniente propriedade de abreviação de caracteres/palavras que facilitam a escrita, <code>font</code>, que você pode usar para especificar várias coisas de uma vez — por exemplo:</p>
+
+<ul>
+ <li>Negrito, itálico e letras minúsculas</li>
+ <li>O tamanho</li>
+ <li>A altura da linha</li>
+ <li>O tipo da fonte</li>
+</ul>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>
+    <div style="width: 40em;">
+    <pre class="eval">
+p {font: italic 75%/125% "Comic Sans MS", cursive;}
+</pre>
+    </div>
+
+    <p>Esta regra coloca várias propriedades da fonte, fazendo todos os parágrafos em itálico.</p>
+
+    <p>O tamanho da fonte é três quartos (75%) do tamanho em cada elemento do paragrafo principal e a altura da linha é 125% (um pouco mais espaçada que o normal).</p>
+
+    <p>O tipo da fonte é Comic Sans MS, mas se a fonte não estiver disponível então o navegador usará sua fonte cursiva padrão (escrita a mão).</p>
+
+    <p>A regra tem o efeito colateral de desativar o negrito e as letras minúsculas (colocando-os no estilo <code>normal</code>)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Tipos_de_fonte" name="Tipos_de_fonte">Tipos de fonte</h3>
+
+<p>Você não pode predizer quais fontes os leitores do seu documento terão. Então quando você especifica tipos de fonte é uma boa idéia colocar uma lista de alternativas em ordem de preferência.</p>
+
+<p>Acabe a lista com um dos tipos de fontes internas padrão: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> ou <code>monospace</code>. (Algumas destas podem ser configuradas nas Opções do seu navegador.)</p>
+
+<p>Se o tipo não for suportado por algumas características no documento, então o navegador pode substituí-lo por um tipo diferente. Por exemplo, o documento pode conter caracteres especiais que a fonte não suporte. Se o navegador puder encontrar outra fonte que tenha os caracteres, então ele usará a outra fonte.</p>
+
+<p>Para especificar um tipo de fonte por conta própria, use a propriedade <code>font-family</code>.</p>
+
+<h3 id="Tamanho_da_fonte" name="Tamanho_da_fonte">Tamanho da fonte</h3>
+
+<p>Leitores que usam os navegadores Mozilla podem configurar o tamanho padrão das fontes em Opções, e mudar o tamanho do texto quando lêem uma página, isso a torna boa para você usá-la com tamanho relativos onde você puder.</p>
+
+<p>Você pode usar alguns valores internos para o tamanho das fontes, como: <code>small</code>, <code>medium</code> e <code>large</code>. Você pode também usar valores relativos para o tamanho das fontes do elemento primário, como: <code>smaller</code>, <code>larger</code>, <code>150%</code> ou <code>1.5em</code>.</p>
+
+<p>Se necessário você pode especificar um tamanho atual, como: <code>12px</code> (12 pixels) para um instrumento de exibição ou <code>12pt</code> (12 pontos) para uma impressora. Este tamanho é nominalmente a largura de uma letra m, mas fontes variam na maneira do tamanho, você vê relatos do tamanho que você especifica.</p>
+
+<p>Para especificar um tamanho de fonte por conta própria, use a propriedade <code>font-size</code>.</p>
+
+<h3 id="Altura_da_linha" name="Altura_da_linha">Altura da linha</h3>
+
+<p>A altura da linha especifica o espaçamento entre linhas. Se seu documento tem longos parágrafos com muitas linhas, um espaçamento mais largo que o normal faz com que a leitura seja mais fácil, especialmente se o tamanho da fonte for pequeno.</p>
+
+<p>Para especificar a altura da linha por conta própria, use a propriedade <code>line-height</code>.</p>
+
+<h3 id="Decora.C3.A7.C3.A3o" name="Decora.C3.A7.C3.A3o">Decoração</h3>
+
+<p>A propriedade separada <code>text-decoration</code> pode especificar outros estilos, como <code>underline</code> ou <code>line-through</code>. Você pode configurar isto para <code>none</code> removendo explicitamente qualquer decoração.</p>
+
+<h3 id="Outras_propriedades" name="Outras_propriedades">Outras propriedades</h3>
+
+<p>Para especificar itálico por conta própria, use <code>font-style: italic;</code><br>
+ Para especificar negrito por conta própria, use <code>font-weight: bold;</code><br>
+ Para especificar letras minúsculas por conta própria, use <code>font-variant: small-caps;</code></p>
+
+<p>Para tornar qualquer destes valores individualmente desativado, você pode especificar o valor <code>normal</code> ou <code>inherit</code>.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Você pode especificar os estilos do texto em uma variedade de outras maneiras.
+    <p>Por exemplo, algumas propriedades mencionadas aqui têm outros valores que podem ser usados.</p>
+
+    <p>Em uma folha de estilo complexa, evite usar a propriedade de abreviação de caracteres/palavras que facilitam a escrita <code>font</code>, por causa de seus efeitos colaterais (o re-escolher de outras propriedades individuais).</p>
+
+    <p>Para maiores detalhes sobre as propriedades relacionadas às fontes, veja <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> na especificação do CSS. Para maiores detalhes sobre decoração de textos, veja <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Especificando_fontes" name="A.C3.A7.C3.A3o:_Especificando_fontes">Ação: Especificando fontes</h2>
+
+<p>Para um documento de amostra, você pode escolher a fonte do elemento <small>BODY</small> e o resto do documento herda as configurações.</p>
+
+<p>Edite seu arquivo CSS. Adicione esta regra para mudar a fonte completamente. O topo do arquivo CSS é um local lógico para isto, mas isto terá o mesmo efeito em qualquer lugar que for posicionado:</p>
+
+<div style="width: 40em;">
+<pre class="eval">body {font: 16px "Comic Sans MS", cursive;}
+</pre>
+</div>
+
+<p>Adicione um comentário à regra, e deixe um espaço em branco para fazer sua disposição preferido.</p>
+
+<p>Atualize seu navegador para ver o efeito. Se o seu sistema tem Comic Sans MS, ou outra fonte cursiva que não suporta itálico, então seu navegador escolhe um tipo diferente de fonte para o texto em itálico na primeira linha:</p>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Da barra de menu do seu navegador, escolha Exibir – Tamanho do Texto – Aumentar. Mesmo que o estilo especificado seja 16 pixels, um usuário lendo o documento pode mudar o tamanho.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>Sem mudar mais nada, faça todas as seis letras iniciais duas vezes o tamanho na fonte serifada padrão do navegador:
+    <table>
+     <tbody>
+      <tr>
+       <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+      </tr>
+      <tr>
+       <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Estilos_de_texto" title="Talk:pt/CSS/Como_começar/Estilos_de_texto">Discussão</a>.</p>
+
+<p>Seu documento de amostra está pronto para usar várias cores nomeadas. A próxima página lista os nomes das cores padrão e explica como você pode especificar outras: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Cor" title="pt/CSS/Como_começar/Cor">Cor</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}</p>
diff --git a/files/pt-pt/learn/css/estilo_de_texto/index.html b/files/pt-pt/learn/css/styling_text/index.html
index 5d00bc90c5..5d00bc90c5 100644
--- a/files/pt-pt/learn/css/estilo_de_texto/index.html
+++ b/files/pt-pt/learn/css/styling_text/index.html
diff --git a/files/pt-pt/learn/css/styling_text/styling_lists/index.html b/files/pt-pt/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..cff2108b51
--- /dev/null
+++ b/files/pt-pt/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,362 @@
+---
+title: Listas
+slug: Web/CSS/Como_começar/Listas
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Styling_text/Styling_lists
+translation_of_original: Web/Guide/CSS/Getting_started/Lists
+---
+<p>{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}</p>
+
+<p>Esta página descreve como você pode usar as CSS para especificar a aparência das listas.</p>
+
+<p>Você cria um novo documento de amostra contendo listas, e uma nova folha de estilo que estiliza as listas.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Listas" name="Informa.C3.A7.C3.A3o:_Listas">Informação: Listas</h2>
+
+<p>Se você resolveu o desafio da última página (<strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong>), então você viu como você pode adicionar conteúdo antes de qualquer elemento para mostrar isto como o item de uma lista.</p>
+
+<p>CSS proporciona propriedades especiais que foram designadas para listas. Geralmente é mais conveniente usar estas propriedades sempre que você puder.</p>
+
+<p>Para especificar o estilo para uma lista, use a propriedade <code>list-style</code> para especificar o tipo de marcador.</p>
+
+<p>O seletor nas regras do seu CSS pode selecionar qualquer um dos elementos na sua lista de itens (por exemplo, <code>LI</code>), ou isto pode selecionar o elemento primário da lista (por exemplo, <code>UL</code>). Então os elementos da lista herdam o estilo.</p>
+
+<h3 id="Listas_n.C3.A3o_ordenadas" name="Listas_n.C3.A3o_ordenadas">Listas não ordenadas</h3>
+
+<p>Em uma lista <em>não ordenada</em>, cada item da lista é marcado da mesma maneira.</p>
+
+<p>CSS tem três tipos de marcador. Aqui está como seu navegador os mostra:</p>
+
+<ul style="padding-left: 2em;">
+ <li style=""><code>disc</code></li>
+ <li style=""><code>circle</code></li>
+ <li style=""><code>square</code></li>
+</ul>
+
+<p>Alternativamente, você pode especificar a URL de uma imagem.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Estas regras especificam diferentes marcadores para diferentes classes de itens da lista:
+    <div style="width: 30em;">
+    <pre class="eval">
+li.open {list-style: circle;}
+li.closed {list-style: disc;}
+</pre>
+    </div>
+
+    <p>Quando estas classes são usadas em uma lista, elas distinguem entre os itens aberto (open) e fechado (closed):</p>
+
+    <div style="width: 30em;">
+    <pre class="eval">
+&lt;UL&gt;
+  &lt;LI class="open"&gt;Lorem ipsum&lt;/LI&gt;
+  &lt;LI class="closed"&gt;Dolor sit&lt;/LI&gt;
+  &lt;LI class="closed"&gt;Amet consectetuer&lt;/LI&gt;
+  &lt;LI class="open"&gt;Magna aliquam&lt;/LI&gt;
+  &lt;LI class="closed"&gt;Autem veleum&lt;/LI&gt;
+&lt;/UL&gt;
+</pre>
+    </div>
+
+    <p>O resultado será parecido com:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <ul style="padding-right: 6em;">
+         <li style="">Lorem ipsum</li>
+         <li style="">Dolor sit</li>
+         <li style="">Amet consectetuer</li>
+         <li style="">Magna aliquam</li>
+         <li style="">Autem veleum</li>
+        </ul>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Listas_ordenadas" name="Listas_ordenadas">Listas ordenadas</h3>
+
+<p>Em uma lista <em>ordenada</em>, cada item da lista é marcado diferentemente para mostrar a posição em seqüência.</p>
+
+<p>Use a propriedade <code>list-style</code> para especificar o tipo de marcador:</p>
+
+<ul style="padding-left: 2em;">
+ <li style=""><code>decimal</code></li>
+ <li style=""><code>lower-roman</code></li>
+ <li style=""><code>upper-roman</code></li>
+ <li style=""><code>lower-latin</code></li>
+ <li style=""><code>upper-latin</code></li>
+</ul>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Esta regra especifica os elementos <small>OL</small> com a classe <code>info</code>, os itens são identificados com letras maiúsculas.
+    <div style="width: 30em;">
+    <pre class="eval">
+ol.info {list-style: upper-latin;}
+</pre>
+    </div>
+
+    <p>Os elementos <small>LI</small> na lista herdam este estilo:</p>
+
+    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <ul>
+         <li style="padding-right: 6em;">Lorem ipsum</li>
+         <li style="padding-right: 6em;">Dolor sit</li>
+         <li style="padding-right: 6em;">Amet consectetuer</li>
+         <li style="padding-right: 6em;">Magna aliquam</li>
+         <li style="padding-right: 6em;">Autem veleum</li>
+        </ul>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>A propriedade <code>list-style</code> é uma propriedade "abreviada". Em folhas de estilo complexas você pode preferir usar propriedades separadas para configurar valores separados. Para detalhes sobre estas propriedades separadas, e mais detalhes sobre como as CSS especificam listas, veja <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Lists</a> na CSS Specification.
+    <p>Se você está usando a linguagem de marcação como o HTML que proporciona tags convecionais para listas não ordenadas (<small>UL</small>) e ordenadas (<small>OL</small>), então é bom praticar usando tags da maneira que foi explicado. Contudo, você pode usar as CSS para fazer <small>UL</small> mostrar ordenado e <small>OL</small> para mostrar não ordenado se você precisar.</p>
+
+    <p>Os navegadores diferem no modo como implementam os estilos das listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Contadores" name="Contadores">Contadores</h3>
+
+<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
+<p><strong>Note: </strong> Alguns navegadores não suportam contadores.</p>
+</div>
+
+<p>Você pode usar contadores para numerar quaisquer elementos, não somente itens listados. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</p>
+
+<p>Para especificar uma numeração, você precisa de um <em>contador</em> com um nome que você especifica.</p>
+
+<p>Em alguns elementos antes da contagem começar, re-inicie o contador com a propriedade <code>counter-reset</code> e o nome do seu contador. O principal dos elementos que você estiver contando é um bom lugar para isto, mas você pode usar qualquer elemento que esteja antes da lista de itens.</p>
+
+<p>Em cada elemento que o contador incrementar, use a propriedade <code>counter-increment</code> e o nome do seu contador.</p>
+
+<p>Para mostrar seu contador, adicione <code>:before</code> ou <code>:after</code> ao seletor e use a propriedade <code>content</code> (como fez na página anterior, <strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong>).</p>
+
+<p>No valor da propriedade <code>content</code>, especifique <code>counter()</code> com o nome do seu contador. Opcionalmente especifique um tipo. Os tipos são como na seção passada em <strong>Listas ordenadas</strong>.</p>
+
+<p>Normalmente o elemento que mostra o contador também incrementa isto.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>Esta regra inicializa um contador para cada elemento <small>H3</small> com a classe <code>numbered</code>:
+    <div style="width: 30em;">
+    <pre class="eval">
+h3.numbered {counter-reset: mynum;}
+</pre>
+    </div>
+
+    <p>Esta regra mostra e incrementa o contador para cada elemento <small>P</small> com a classe <code>numbered</code>:</p>
+
+    <div style="width: 30em;">
+    <pre class="eval">
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+</pre>
+    </div>
+
+    <p>O resultado se parece com isto:</p>
+
+    <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td><strong>Cabeçalho</strong>
+
+        <p><strong>1: </strong>Lorem ipsum</p>
+
+        <p><strong>2: </strong>Dolor sit</p>
+
+        <p><strong>3: </strong>Amet consectetuer</p>
+
+        <p><strong>4: </strong>Magna aliquam</p>
+
+        <p><strong>5: </strong>Autem veleum</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Você não pode usar contadores a menos que você saiba que todos os que lêem o seu documento têm um navegador que os suporta.
+    <p>Se você puder usar contadores, eles tem a vantagem de que você pode estilizar os contadores separadamente da lista de itens. No exemplo anterior, os contadores estão em negrito mas a os itens da lista não.</p>
+
+    <p>Você pode também usar contadores em meios mais complexos — por exemplo, para numerar seções, cabeçalhos, sub-cabeçalhos e parágrafos em documentos formais. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> em CSS Specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Listas_denominadas" name="A.C3.A7.C3.A3o:_Listas_denominadas">Ação: Listas denominadas</h2>
+
+<p>Crie um novo documento HTML, <code>doc2.html</code>. Copie e cole o conteúdo daqui, tendo certeza de que você rola o mouse para pegar tudo isto:</p>
+
+<div style="width: 48em; height: 12em; overflow: auto;">
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+&lt;HEAD&gt;
+&lt;TITLE&gt;Documento de amostra 2&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style2.css"&gt;
+&lt;/HEAD&gt;
+&lt;BODY&gt;
+
+&lt;H3 id="oceans"&gt;Os oceanos&lt;/H3&gt;
+&lt;UL&gt;
+&lt;LI&gt;Ártico&lt;/LI&gt;
+&lt;LI&gt;Atlântico&lt;/LI&gt;
+&lt;LI&gt;Pacífico&lt;/LI&gt;
+&lt;LI&gt;Índico&lt;/LI&gt;
+&lt;LI&gt;Antártico&lt;/LI&gt;
+&lt;/UL&gt;
+
+&lt;H3 class="numbered"&gt;Numbered paragraphs&lt;/H3&gt;
+&lt;P class="numbered"&gt;Lorem ipsum&lt;/P&gt;
+&lt;P class="numbered"&gt;Dolor sit&lt;/P&gt;
+&lt;P class="numbered"&gt;Amet consectetuer&lt;/P&gt;
+&lt;P class="numbered"&gt;Magna aliquam&lt;/P&gt;
+&lt;P class="numbered"&gt;Autem veleum&lt;/P&gt;
+
+&lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+
+<p>Faça uma nova folha de estilo, <code>style2.css</code>. Copie e cole o conteúdo daqui:</p>
+
+<div style="width: 48em;">
+<pre class="eval">/* parágrafos numerados */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+</pre>
+</div>
+
+<p>Se a disposição e o comentário não estiver ao seu gosto, mude-os.</p>
+
+<p>Abra o documento no seu navegador. Se o seu navegador suporta contadores, você verá algo semelhante ao exemplo abaixo. Se o seu navegador não suporta contadores, então você não verá os números (e provavelmente nem sequer os dois pontos (:)):</p>
+
+<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Os oceanos</p>
+
+    <ul style="">
+     <li>Ártico</li>
+     <li>Atlântico</li>
+     <li>Pacífico</li>
+     <li>Índico</li>
+     <li>Antártico</li>
+    </ul>
+
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Parágrafos numerados</p>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;">
+ <caption>Desafios</caption>
+ <tbody>
+  <tr>
+   <td>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais Romanos de i até v:
+    <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Os oceanos</p>
+
+        <ul style="">
+         <li>Ártico</li>
+         <li>Atlântico</li>
+         <li>Pacífico</li>
+         <li>Índico</li>
+         <li>Antártico</li>
+        </ul>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p><br>
+     Se o seu navegador suporta contadores, mude sua folha de estilo para identificar o cabeçalho com letras maiúsculas em parênteses como isto:</p>
+
+    <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+     <tbody>
+      <tr>
+       <td>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) Os oceanos</p>
+
+        <p><strong>. . .</strong></p>
+
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Parágrafos numerados</p>
+
+        <p><strong>. . .</strong></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Listas" title="Talk:pt/CSS/Como_começar/Listas">Discussão</a>.</p>
+
+<p>Quando seu navegador exibe seu documento de amostra, cria espaços ao redor dos elementos quando eles são exibidos na página.</p>
+
+<p>A próxima página descreve como você pode usar as CSS para trabalhar com formas subjacentes de elementos: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Caixas" title="pt/CSS/Como_começar/Caixas">Caixas</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}</p>
diff --git a/files/pt-pt/learn/comecar_com_a_web/css_basico/index.html b/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html
index 9b401915f7..9b401915f7 100644
--- a/files/pt-pt/learn/comecar_com_a_web/css_basico/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/css_basics/index.html
diff --git a/files/pt-pt/learn/comecar_com_a_web/lidar_com_ficheiros/index.html b/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html
index 6489964938..6489964938 100644
--- a/files/pt-pt/learn/comecar_com_a_web/lidar_com_ficheiros/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/dealing_with_files/index.html
diff --git a/files/pt-pt/learn/comecar_com_a_web/como_funciona_a_web/index.html b/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html
index 69fe6b79fa..69fe6b79fa 100644
--- a/files/pt-pt/learn/comecar_com_a_web/como_funciona_a_web/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/how_the_web_works/index.html
diff --git a/files/pt-pt/learn/comecar_com_a_web/html_basicos/index.html b/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html
index 4601e08092..4601e08092 100644
--- a/files/pt-pt/learn/comecar_com_a_web/html_basicos/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/html_basics/index.html
diff --git a/files/pt-pt/learn/comecar_com_a_web/index.html b/files/pt-pt/learn/getting_started_with_the_web/index.html
index 59a4431592..59a4431592 100644
--- a/files/pt-pt/learn/comecar_com_a_web/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/index.html
diff --git a/files/pt-pt/learn/comecar_com_a_web/installing_basic_software/index.html b/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html
index ebc5ddd3e3..ebc5ddd3e3 100644
--- a/files/pt-pt/learn/comecar_com_a_web/installing_basic_software/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/installing_basic_software/index.html
diff --git a/files/pt-pt/learn/comecar_com_a_web/elementar_de_javascript/index.html b/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html
index fec3caaf51..fec3caaf51 100644
--- a/files/pt-pt/learn/comecar_com_a_web/elementar_de_javascript/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/javascript_basics/index.html
diff --git a/files/pt-pt/learn/comecar_com_a_web/publicar_o_seu_site_da_web/index.html b/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html
index 7e99504b95..7e99504b95 100644
--- a/files/pt-pt/learn/comecar_com_a_web/publicar_o_seu_site_da_web/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/publishing_your_website/index.html
diff --git a/files/pt-pt/learn/comecar_com_a_web/a_web_e_os_padroes_da_web/index.html b/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
index 928a960b97..928a960b97 100644
--- a/files/pt-pt/learn/comecar_com_a_web/a_web_e_os_padroes_da_web/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
diff --git a/files/pt-pt/learn/comecar_com_a_web/apresentacao_do_meu_site/index.html b/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
index a5eacc3afa..a5eacc3afa 100644
--- a/files/pt-pt/learn/comecar_com_a_web/apresentacao_do_meu_site/index.html
+++ b/files/pt-pt/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
diff --git a/files/pt-pt/learn/html/como/adicionar_um_mapa_de_zona_clicavel_numa_imagem/index.html b/files/pt-pt/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
index d70dd147fc..d70dd147fc 100644
--- a/files/pt-pt/learn/html/como/adicionar_um_mapa_de_zona_clicavel_numa_imagem/index.html
+++ b/files/pt-pt/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
diff --git a/files/pt-pt/learn/html/como/index.html b/files/pt-pt/learn/html/howto/index.html
index abbfb425f3..abbfb425f3 100644
--- a/files/pt-pt/learn/html/como/index.html
+++ b/files/pt-pt/learn/html/howto/index.html
diff --git a/files/pt-pt/learn/html/introducao_ao_html/formatacao_avancada_texto/index.html b/files/pt-pt/learn/html/introduction_to_html/advanced_text_formatting/index.html
index 882f2eec7b..882f2eec7b 100644
--- a/files/pt-pt/learn/html/introducao_ao_html/formatacao_avancada_texto/index.html
+++ b/files/pt-pt/learn/html/introduction_to_html/advanced_text_formatting/index.html
diff --git a/files/pt-pt/learn/html/introducao_ao_html/criar_hiperligacoes/index.html b/files/pt-pt/learn/html/introduction_to_html/creating_hyperlinks/index.html
index 502bfda4cf..502bfda4cf 100644
--- a/files/pt-pt/learn/html/introducao_ao_html/criar_hiperligacoes/index.html
+++ b/files/pt-pt/learn/html/introduction_to_html/creating_hyperlinks/index.html
diff --git a/files/pt-pt/learn/html/introducao_ao_html/depurar_html/index.html b/files/pt-pt/learn/html/introduction_to_html/debugging_html/index.html
index 9515ff4f37..9515ff4f37 100644
--- a/files/pt-pt/learn/html/introducao_ao_html/depurar_html/index.html
+++ b/files/pt-pt/learn/html/introduction_to_html/debugging_html/index.html
diff --git a/files/pt-pt/learn/html/introducao_ao_html/estrutura_documento_website/index.html b/files/pt-pt/learn/html/introduction_to_html/document_and_website_structure/index.html
index 059f26a497..059f26a497 100644
--- a/files/pt-pt/learn/html/introducao_ao_html/estrutura_documento_website/index.html
+++ b/files/pt-pt/learn/html/introduction_to_html/document_and_website_structure/index.html
diff --git a/files/pt-pt/learn/html/introducao_ao_html/iniciacao_html/index.html b/files/pt-pt/learn/html/introduction_to_html/getting_started/index.html
index 981b23e556..981b23e556 100644
--- a/files/pt-pt/learn/html/introducao_ao_html/iniciacao_html/index.html
+++ b/files/pt-pt/learn/html/introduction_to_html/getting_started/index.html
diff --git a/files/pt-pt/learn/html/introducao_ao_html/index.html b/files/pt-pt/learn/html/introduction_to_html/index.html
index 6e2ac788fd..6e2ac788fd 100644
--- a/files/pt-pt/learn/html/introducao_ao_html/index.html
+++ b/files/pt-pt/learn/html/introduction_to_html/index.html
diff --git a/files/pt-pt/learn/html/introducao_ao_html/demarcar_uma_carta/index.html b/files/pt-pt/learn/html/introduction_to_html/marking_up_a_letter/index.html
index 0545b789e0..0545b789e0 100644
--- a/files/pt-pt/learn/html/introducao_ao_html/demarcar_uma_carta/index.html
+++ b/files/pt-pt/learn/html/introduction_to_html/marking_up_a_letter/index.html
diff --git a/files/pt-pt/learn/html/introducao_ao_html/estruturar_pagina_de_conteudo/index.html b/files/pt-pt/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
index 1f6310a395..1f6310a395 100644
--- a/files/pt-pt/learn/html/introducao_ao_html/estruturar_pagina_de_conteudo/index.html
+++ b/files/pt-pt/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
diff --git a/files/pt-pt/learn/html/introducao_ao_html/os_metadados_de_head_em_html/index.html b/files/pt-pt/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
index 099166b821..099166b821 100644
--- a/files/pt-pt/learn/html/introducao_ao_html/os_metadados_de_head_em_html/index.html
+++ b/files/pt-pt/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
diff --git a/files/pt-pt/learn/html/multimedia_e_integracao/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/index.html
index 724e0ca3f5..724e0ca3f5 100644
--- a/files/pt-pt/learn/html/multimedia_e_integracao/index.html
+++ b/files/pt-pt/learn/html/multimedia_and_embedding/index.html
diff --git a/files/pt-pt/learn/html/multimedia_and_embedding/pagina_de_boas_vindas_da_mozilla/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
index aad765e97a..aad765e97a 100644
--- a/files/pt-pt/learn/html/multimedia_and_embedding/pagina_de_boas_vindas_da_mozilla/index.html
+++ b/files/pt-pt/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
diff --git a/files/pt-pt/learn/html/multimedia_e_integracao/conteudo_de_audio_e_vídeo/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
index 2ab6414459..2ab6414459 100644
--- a/files/pt-pt/learn/html/multimedia_e_integracao/conteudo_de_audio_e_vídeo/index.html
+++ b/files/pt-pt/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
diff --git a/files/pt-pt/learn/html/tables/avancada/index.html b/files/pt-pt/learn/html/tables/advanced/index.html
index 79f6bf801b..79f6bf801b 100644
--- a/files/pt-pt/learn/html/tables/avancada/index.html
+++ b/files/pt-pt/learn/html/tables/advanced/index.html
diff --git a/files/pt-pt/learn/html/tables/basicos/index.html b/files/pt-pt/learn/html/tables/basics/index.html
index 98908322c9..98908322c9 100644
--- a/files/pt-pt/learn/html/tables/basicos/index.html
+++ b/files/pt-pt/learn/html/tables/basics/index.html
diff --git a/files/pt-pt/learn/html/tables/avaliacao_estruturar_os_dados_dos_planetas/index.html b/files/pt-pt/learn/html/tables/structuring_planet_data/index.html
index 70fbf3601a..70fbf3601a 100644
--- a/files/pt-pt/learn/html/tables/avaliacao_estruturar_os_dados_dos_planetas/index.html
+++ b/files/pt-pt/learn/html/tables/structuring_planet_data/index.html
diff --git a/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html
new file mode 100644
index 0000000000..f752fdbf6c
--- /dev/null
+++ b/files/pt-pt/learn/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -0,0 +1,160 @@
+---
+title: JavaScript
+slug: Web/CSS/Como_começar/JavaScript
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+translation_of_original: Web/Guide/CSS/Getting_started/JavaScript
+---
+<p>{{ PreviousNext("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}</p>
+
+<p>Esta é a Parte II do tutorial. A Parte II contém alguns exemplos que mostram o escopo do CSS no Mozilla.</p>
+
+<p>Cada página na Parte II ilustra como o CSS interage com algumas outras tecnologias. Estas páginas não são desenhadas para ensinar como usar estas outras tecnologias. Vá para outros tutorias para aprender isto em detalhes.</p>
+
+<p>Em vez disso, estas páginas são desenhadas para ilustrar os muitos usos do CSS. Para usar estas páginas, você deve ter um conhecimento em CSS, mas você não precisa qualquer conhecimento em outras tecnologias.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_JavaScript" name="Informa.C3.A7.C3.A3o:_JavaScript">Informação: JavaScript</h2>
+
+<p>JavaScript é uma <em>linguagem de programação</em>. Quando você usa alguma aplicação Mozilla (por exemplo, seu naverador Mozilla) muito do código que o seu computador roda é escrito em JavaScript.</p>
+
+<p>JavaScript pode interagir com folhas de estilo, permitindo a você escrever programas que mudem o estilo do documento dinamicamente.</p>
+
+<p>Existem três maneiras para fazer isto:</p>
+
+<ul>
+ <li>Trabalhando com uma lista de folhas de estilo no documento — por exemplo: adicionando, removendo ou modificando uma folha de estilo.</li>
+ <li>Trabalhando com as regras de uma folha de estilo — por exemplo: adicionando, removendo ou modificando uma regra.</li>
+ <li>Trabalhando com um elemento individual no DOM — modificando seu estilo independentemente da folha de estilo do seu documento.</li>
+</ul>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Para mais informações sobre JavaScript no Mozilla, veja a página <a href="/pt/JavaScript" title="pt/JavaScript">JavaScript</a> neste wiki.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_de_JavaScript" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_de_JavaScript">Ação: Uma demonstração de JavaScript</h2>
+
+<p>Criei um novo documento HTML, <code>doc5.html</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p>
+
+<div style="width: 48em; height: 12em; overflow: auto;">
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+
+&lt;HEAD&gt;
+&lt;TITLE&gt;Como Começar Mozilla CSS - Demonstração JavaScript&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style5.css"&gt;
+&lt;SCRIPT type="text/javascript" src="script5.js"&gt;&lt;/SCRIPT&gt;
+&lt;/HEAD&gt;
+
+&lt;BODY&gt;
+&lt;H1&gt;JavaScript de amostra&lt;/H1&gt;
+
+&lt;DIV id="square"&gt;&lt;/DIV&gt;
+
+&lt;BUTTON type="button" onclick="doDemo(this);"&gt;Clique Aqui&lt;/BUTTON&gt;
+
+&lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+
+<p>Crie um novo arquivo CSS, <code>style5.css</code>. Copie e cole o conteúdo daqui:</p>
+
+<div style="width: 48em;">
+<pre>/*** Demonstração JavaScript ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+  }
+
+button {
+  padding: .5em 2em;
+  }
+</pre>
+</div>
+
+<p>Crie um novo arquivo de texo, <code>script5.js</code>. Copie e cole o conteúdo daqui:</p>
+
+<div style="width: 48em;">
+<pre>// Demonstração JavaScript
+function doDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "#fa4"
+  button.setAttribute("disabled", "true")
+  setTimeout(clearDemo, 2000, button)
+  }
+
+function clearDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "transparent"
+  button.removeAttribute("disabled")
+  }
+</pre>
+</div>
+
+<p>Abra o documento no seu navegador e pressione o botão.</p>
+
+<p>Este wiki não suporta o JavaScript nas páginas, então não é possível mostrar a demonstração aqui. Deve se parecer como isto, antes e depois de você pressionar o botão:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><strong>Demonstração JavaScript</strong></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><strong>Demonstração JavaScript</strong></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Notas sobre esta demonstração:</p>
+
+<ul>
+ <li>O documento HTML é ligado à folha de estilo normalmente, e também é ligado ao script.</li>
+ <li>O script trabalha com elementos individuais no DOM. Isto modifica o estilo dos quadrados diretamente, porém, modifica o estilo do botão indiretamente mudando um atributo.</li>
+ <li>Em JavaScript, <code>document.getElementById("square")</code> é similar em função ao seletor CSS <code>#square</code>.</li>
+ <li>Em JavaScript, <code>backgroundColor</code> corresponde à propriedade <code>background-color</code> do CSS.</li>
+ <li>Seu navegador tem uma regra construída das CSS para <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> que muda a aparência do botão quando ele está desabilitado.</li>
+</ul>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>Mude o script de modo que o quadrado salte para a direita em 20 em quando sua cor mudar, e salte para trás mais tarde.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/JavaScript" title="Talk:pt/CSS/Como_começar/JavaScript">Discussão</a>.</p>
+
+<p>Nesta demonstração, o documento HTML linka o script mesmo que somente o elemento button use o script. Mozilla extende o CSS para que possa ser ligado ao código JavaScript (e também conteúdo e outras folhas de estilo) para elementos selecionados. A próxima página demonstra isto: <strong><a href="/pt/CSS/Como_come%C3%A7ar/XBL_bindings" title="pt/CSS/Como_começar/XBL_bindings">XBL bindings</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:Mídia", "CSS:Como começar:XBL bindings") }}</p>
diff --git a/files/pt-pt/learn/javascript/primeiros_passos/index.html b/files/pt-pt/learn/javascript/first_steps/index.html
index 02041b3355..02041b3355 100644
--- a/files/pt-pt/learn/javascript/primeiros_passos/index.html
+++ b/files/pt-pt/learn/javascript/first_steps/index.html
diff --git a/files/pt-pt/learn/no-servidor/django/index.html b/files/pt-pt/learn/server-side/django/index.html
index 295b1e80b4..295b1e80b4 100644
--- a/files/pt-pt/learn/no-servidor/django/index.html
+++ b/files/pt-pt/learn/server-side/django/index.html
diff --git a/files/pt-pt/learn/no-servidor/express_nodejs/configurar_um_meio_de_desenvolvimento_node/index.html b/files/pt-pt/learn/server-side/express_nodejs/development_environment/index.html
index 242d0be946..242d0be946 100644
--- a/files/pt-pt/learn/no-servidor/express_nodejs/configurar_um_meio_de_desenvolvimento_node/index.html
+++ b/files/pt-pt/learn/server-side/express_nodejs/development_environment/index.html
diff --git a/files/pt-pt/learn/no-servidor/express_nodejs/index.html b/files/pt-pt/learn/server-side/express_nodejs/index.html
index 1c7e7413ec..1c7e7413ec 100644
--- a/files/pt-pt/learn/no-servidor/express_nodejs/index.html
+++ b/files/pt-pt/learn/server-side/express_nodejs/index.html
diff --git a/files/pt-pt/learn/no-servidor/express_nodejs/introduction/index.html b/files/pt-pt/learn/server-side/express_nodejs/introduction/index.html
index c39acc6f1d..c39acc6f1d 100644
--- a/files/pt-pt/learn/no-servidor/express_nodejs/introduction/index.html
+++ b/files/pt-pt/learn/server-side/express_nodejs/introduction/index.html
diff --git a/files/pt-pt/learn/no-servidor/index.html b/files/pt-pt/learn/server-side/index.html
index b8cc8d35f7..b8cc8d35f7 100644
--- a/files/pt-pt/learn/no-servidor/index.html
+++ b/files/pt-pt/learn/server-side/index.html
diff --git a/files/pt-pt/learn/no-servidor/servidor_node_sem_framework/index.html b/files/pt-pt/learn/server-side/node_server_without_framework/index.html
index 85bd786b58..85bd786b58 100644
--- a/files/pt-pt/learn/no-servidor/servidor_node_sem_framework/index.html
+++ b/files/pt-pt/learn/server-side/node_server_without_framework/index.html
diff --git a/files/pt-pt/learn/tools_and_testing/teste_cruzado_de_navegador/acessibilidade/index.html b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
index c50c8854ba..c50c8854ba 100644
--- a/files/pt-pt/learn/tools_and_testing/teste_cruzado_de_navegador/acessibilidade/index.html
+++ b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
diff --git a/files/pt-pt/learn/tools_and_testing/teste_cruzado_de_navegador/index.html b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/index.html
index f788649424..f788649424 100644
--- a/files/pt-pt/learn/tools_and_testing/teste_cruzado_de_navegador/index.html
+++ b/files/pt-pt/learn/tools_and_testing/cross_browser_testing/index.html