unslug pt-br: move

13 files changed, 1152 insertions, 0 deletions

diff --git a/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..b3988ca69b
--- /dev/null
+++ b/files/pt-br/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,345 @@
+---
+title: Cascade and inheritance
+slug: Aprender/CSS/Construindo_blocos/Cascade_and_inheritance
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>O objetivo desta lição é desenvolver sua compreensão para alguns dos conceitos mais fundamentais de CSS - cascata, especificidade e herança - que controlam como o CSS é aplicado ao HTML e como os conflitos são resolvidos.</p>
+
+<p>Embora esta lição possa parecer menos pouco relevante e mais acadêmico do que algumas outras partes do curso, a compreensão desses itens (cascata, especificidade e herança), poupará muito tempo no futuro! Recomendamos que você trabalhe nesta seção com cuidado e verifique se entendeu os conceitos antes de prosseguir.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Aprender sobre cascata e especificidade, e como funciona a herança em CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Regras_de_Conflitos">Regras de Conflitos</h2>
+
+<p>CSS - <strong>Cascading Style Sheets</strong>, <em>cascata</em> (a primeira palavra) é muito importante compreender - a maneira como a<em> cascata </em>se comporta é a chave para entender <strong>CSS</strong>.</p>
+
+<p>Em algum momento, você estará trabalhando em um projeto e descobrirá que o CSS que você pensou que deveria ser aplicado a um elemento não está funcionando. Normalmente, o problema é que você criou duas regras que poderiam se aplicar ao mesmo elemento. A cascata e o conceito intimamente relacionado com especificidade que são mecanismos que controlam qual regra se aplica quando existe tal conflito. A regra que define o estilo do seu elemento pode não ser a esperada, portanto, você precisa entender como esses mecanismos funcionam.</p>
+
+<p>Também é importante aqui é o conceito de <strong>herança</strong>, o que significa que algumas propriedades CSS por padrão herdam os valores definidos no elemento pai do elemento atual, e outras não. Isso também pode causar algum comportamento que você não esperava.</p>
+
+<p>Vamos começar dando uma olhada rápida nas nestes itens com os quais estamos lidando (cascata, especificidade e herança), então vamos ver como elas interagem entre si e com o CSS. Isso pode parecer um conjunto de conceitos difíceis de entender, mas a medida que você pratica mais a escrita de CSS, o funcionamento vai se tornando mais óbvio para você.</p>
+
+<h3 id="The_cascade_-_A_Cascata">The cascade - A Cascata</h3>
+
+<p>Stylesheets <strong>cascade (Cascata)</strong> — em um nível muito simples, significa que a ordem das regras CSS é importante; quando se aplicam duas regras com especificidade igual, a que vier por último no CSS é a que será usada.</p>
+
+<p>No exemplo abaixo, temos duas regras que podem ser aplicadas ao h1. O h1 acaba tendo a cor azul - essas regras têm um seletor idêntico e, portanto, carregam a mesma especificidade, portanto, o último na ordem de origem vence.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+
+<h3 id="Specificity_-_Especificidade">Specificity - Especificidade</h3>
+
+<p>A especificidade é como o navegador decide/verifica qual regra se aplica se várias regras têm seletores diferentes, que poderiam ser aplicadas ao mesmo elemento. É basicamente uma medição de qual das regras/caracteristicas específica será a mais indicada/específica de um seletor:</p>
+
+<ul>
+ <li>
+  <p>Um seletor de elemento é menos específico - ele selecionará todos os elementos daquele tipo que aparecem em uma página - portanto, obterá uma pontuação mais baixa.</p>
+ </li>
+ <li>Um seletor de classe é mais específico - ele selecionará apenas os elementos em uma página que possuem um valor de atributo de classe específico - portanto, obterá uma pontuação mais alta.</li>
+</ul>
+
+<p>Hora do exemplo! Abaixo, temos novamente duas regras que podem ser aplicadas ao h1. O h1 abaixo acaba sendo colorido em vermelho - o seletor de classe dá a sua regra uma especificidade mais alta e, portanto, será aplicada mesmo que a regra com o seletor de elemento apareça mais abaixo na ordem de origem.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+
+<p>Explicaremos a pontuação de especificidade mais tarde.</p>
+
+<h3 id="Inheritance_-_Herança">Inheritance - Herança</h3>
+
+<p>A herança também precisa ser entendida neste contexto - alguns valores de propriedade CSS definidos em elementos pais são herdados por seus elementos filhos e outros não.</p>
+
+<p>Por exemplo, se você definir uma cor e uma família de fontes em um elemento, todos os elementos dentro dele também serão estilizados com essa cor e fonte, a menos que você tenha aplicado cores e valores de fonte diferentes diretamente a eles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+
+<p>Algumas propriedades não herdam - por exemplo, se você definir um {{cssxref ("width")}} de 50% em um elemento, todos os seus descendentes não terão uma largura de 50% da largura de seus pais. Se fosse esse o caso, CSS seria muito frustrante de usar!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Nas páginas de referência de propriedade CSS do MDN, você pode encontrar uma caixa de informações técnicas, geralmente na parte inferior da seção de especificações, que lista uma série de pontos de dados sobre essa propriedade, incluindo se ela é herdada ou não. Veja o <a href="/en-US/docs/Web/CSS/color#Specifications">color property Specifications section</a> (seção de especificações de propriedade de cor) , por exemplo.</p>
+</div>
+
+<h2 id="Entendendo_como_os_conceitos_funcionam_juntos">Entendendo como os conceitos funcionam juntos</h2>
+
+<p>Esses três conceitos juntos controlam que caractersticas CSS se aplicam a qual elemento; nas seções a seguir, veremos como eles funcionam juntos. Às vezes pode parecer um pouco complicado, mas você começará a entende-los conforme for ficando mais experiente com CSS, e você sempre poderá consultar os detalhes se esquecer! Mesmo os desenvolvedores experientes não se lembram de todos os detalhes.</p>
+
+<p>O vídeo a seguir mostra como você pode usar o Firefox DevTools para inspecionar a cascata, a especificidade de uma página e muito mais:</p>
+
+<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p>
+
+<h2 id="Entendendo_Herança">Entendendo Herança</h2>
+
+<p>Começaremos com herança. No exemplo abaixo, temos um {{HTMLElement ("ul")}}, com dois níveis de listas não ordenadas aninhadas dentro dele. Demos ao &lt;ul&gt; externo uma borda, preenchimento e uma cor de fonte.</p>
+
+<p>A cor foi aplicada aos filhos diretos, mas também aos filhos indiretos - os filhos imediatos &lt;li&gt; são aqueles dentro da primeira lista aninhada. Em seguida, adicionamos uma classe especial à segunda lista aninhada e aplicamos uma cor diferente a ela. Isso então é herdado por meio de seus filhos.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+
+<p>Coisas como larguras (conforme mencionado acima), margens, preenchimento e bordas não são herdadas. Se uma borda fosse herdada pelos filhos de nossa lista, cada lista e cada item da lista ganhariam uma borda - provavelmente não é um efeito que desejaríamos!</p>
+
+<p>Quais propriedades são herdadas por padrão e quais não são, depende do bom senso.</p>
+
+<h3 id="Controlando_Herança">Controlando Herança</h3>
+
+<p>CSS fornece quatro valores especiais de propriedades universais para controlar a herança. Cada propriedade CSS aceita esses valores.</p>
+
+<p>{{cssxref("inherit")}}</p>
+
+<p>    Define o valor da propriedade aplicada a um elemento selecionado para ser o mesmo de          seu elemento pai. Efetivamente, isso "ativa a herança".</p>
+
+<p>{{cssxref("initial")}}</p>
+
+<dl>
+ <dd>Define o valor da propriedade aplicada a um elemento selecionado para o valor inicial dessa propriedade.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>Restaura a propriedade com seu valor natural, o que significa que se a propriedade é herdada naturalmente, ela age como herdada, caso contrário, ela age como inicial.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Temos um comando mais recente, {{cssxref("revert")}}, mas nem todos os navegadores suportam</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: veja {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}}para obter mais informações sobre como cada um deles funcionam.</p>
+</div>
+
+<p>Podemos ver uma lista de links e explorar como funcionam os valores universais. O exemplo ao vivo abaixo permite que você brinque com o CSS e veja o que acontece quando você faz alterações. Usar/modificar o código é realmente a melhor maneira de se familiarizar com HTML e CSS.</p>
+
+<p>Por exemplo:</p>
+
+<ol>
+ <li>O segundo item da lista tem a classe my-class-1 aplicada. Isso define a cor do elemento &lt;a&gt; aninhado dentro para herdar. Se você remover a regra, como ela muda a cor do link?</li>
+ <li>Você consegue entende por que o terceiro e o quarto links são da mesma cor? Verifique a descrição dos valores acima se não.</li>
+ <li>Qual dos links mudará de cor se você definir uma nova cor para o elemento &lt;a&gt; - por exemplo, um {color: red; }?</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p>
+
+<h3 id="Redefinindo_todos_os_Valores_de_Propriedade">Redefinindo todos os Valores de Propriedade</h3>
+
+<p>A propriedade abreviada CSS <em><strong>all</strong></em> pode ser usada para aplicar um desses valores de herança a (quase) todas as propriedades de uma vez. Seu valor pode ser qualquer um dos valores de herança (herdar, inicial, não definido ou reverter). É uma maneira conveniente de desfazer as alterações feitas nos estilos para que você possa voltar a um ponto de partida conhecido antes de iniciar novas alterações.</p>
+
+<p>No exemplo abaixo, temos duas aspas em bloco. O primeiro tem um estilo aplicado ao próprio elemento blockquote, o segundo tem uma classe aplicada ao <em>blockquote</em> que define o valor de <strong>all (todos)</strong> como <strong>unset (indefinido)</strong>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+
+<p>Tente definir o valor de todos para alguns dos outros valores disponíveis e observe qual é a diferença.</p>
+
+<h2 id="Compreendendo_Cascata">Compreendendo Cascata</h2>
+
+<p>Agora entendemos por que um parágrafo aninhado profundamente na estrutura do seu HTML tem a mesma cor do CSS aplicado ao corpo e, a partir das lições introdutórias, entendemos como alterar o CSS aplicado a algo em qualquer ponto do documento - seja atribuindo CSS a um elemento ou criando uma classe. Agora daremos uma olhada apropriada em como a cascata define quais regras CSS se aplicam quando mais de uma coisa pode estilizar um elemento.</p>
+
+<p>Há três fatores a serem considerados, listados aqui em ordem crescente de importância. Os posteriores anulam os anteriores:</p>
+
+<ol>
+ <li><strong>Ordem da Fonte</strong></li>
+ <li><strong>Especificidade</strong></li>
+ <li><strong>Importância</strong></li>
+</ol>
+
+<p>Vamos dar uma olhada neles para ver como os navegadores descobrem exatamente o que CSS deve ser aplicado.</p>
+
+<h3 id="Ordem_da_Fonte_origem">Ordem da Fonte (origem)</h3>
+
+<p>Já vimos como a ordem da fonte é importante para a cascata. Se você tiver mais de uma regra, que tenha exatamente o mesmo peso, a que vier por último no CSS será a vencedora. Você pode pensar nisso como regras que estão mais próximas do próprio elemento, sobrescrevendo as anteriores, até que a última vença e dê estilo ao elemento.</p>
+
+<h3 id="Especificidade"><strong>Especificidade</strong></h3>
+
+<p>Depois de compreender o fato de que a ordem da fonte é importante, em algum momento você se deparará com uma situação em que saberá que uma regra vem depois na folha de estilo, mas uma regra anterior conflitante é aplicada. Isso ocorre porque a regra anterior tem uma especificidade mais alta - é mais específica e, portanto, está sendo escolhida pelo navegador como a que deve estilizar o elemento.<br>
+ <br>
+ Como vimos anteriormente nesta lição, um seletor de classe tem mais peso do que um seletor de elemento, portanto, as propriedades definidas na classe substituirão aquelas aplicadas diretamente ao elemento.<br>
+ <br>
+ Algo a se notar aqui é que, embora estejamos pensando em seletores e nas regras que são aplicadas ao que eles selecionam, não é a regra inteira que é substituída, apenas as propriedades que são iguais.</p>
+
+<p>Esse comportamento ajuda a evitar a repetição em seu CSS. Uma prática comum é definir estilos genéricos para os elementos básicos e, em seguida, criar classes para aqueles que são diferentes. Por exemplo, abaixo definimos estilos genéricos para títulos de nível 2 e, em seguida, criamos algumas classes que alteram apenas algumas das propriedades e valores. Os valores definidos inicialmente são aplicados a todos os títulos, depois os valores mais específicos são aplicados aos títulos com as classes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+
+<p>Vamos agora dar uma olhada em como o navegador calculará a especificidade. Já sabemos que um seletor de elemento tem baixa especificidade e pode ser substituído por uma classe. Essencialmente, um valor em pontos é concedido a diferentes tipos de seletores, e somar esses pontos dá a você o peso daquele seletor específico, que pode então ser avaliado em relação a outras combinações potenciais.</p>
+
+<p>A quantidade de especificidade que um seletor tem é medida usando quatro valores (ou componentes) diferentes, que podem ser considerados como milhares, centenas, dezenas e uns - quatro dígitos únicos em quatro colunas:</p>
+
+<ol>
+ <li><strong>Thousands</strong>: marque um nesta coluna se a declaração estiver dentro de um atributo {{htmlattrxref ("style")}}, também conhecido como estilos embutidos. Essas declarações não têm seletores, portanto, sua especificidade é sempre simplesmente 1000.</li>
+ <li><strong>Hundreds</strong>: marque um nesta coluna para cada seletor de ID contido no seletor geral.</li>
+ <li><strong>Tens</strong>: marque um nesta coluna para cada seletor de classe, seletor de atributo ou pseudoclasse contido no seletor geral.</li>
+ <li><strong>Ones</strong>: marque um nesta coluna para cada seletor de elemento ou pseudoelemento contido dentro do seletor geral.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: O Seletor universal (<code>*</code>), combinadores (<code>+</code>, <code>&gt;</code>, <code>~</code>, ' '), e pseudo-classe de negação (<code>:not</code>) não tem efeito de especificidade.</p>
+</div>
+
+<p>A tabela a seguir mostra alguns exemplos isolados para colocá-lo no clima. Experimente passar por eles e certifique-se de entender por que eles têm a especificidade que demos a eles. Ainda não cobrimos os seletores em detalhes, mas você pode encontrar detalhes de cada seletor em MDN  <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors reference</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Thousands</th>
+   <th scope="col">Hundreds</th>
+   <th scope="col">Tens</th>
+   <th scope="col">Ones</th>
+   <th scope="col">Total specificity</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifier</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>No selector, with a rule inside an element's {{htmlattrxref("style")}} attribute</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Antes de prosseguirmos, vejamos um exemplo em ação.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
+
+<p>Então, o que está acontecendo aqui? Em primeiro lugar, estamos interessados ​​apenas nas primeiras sete regras deste exemplo e, como você notará, incluímos seus valores de especificidade em um comentário antes de cada uma.</p>
+
+<ul>
+ <li>Os dois primeiros seletores estão competindo pelo estilo da cor de fundo do link - o segundo vence e torna a cor de fundo azul porque tem um seletor de ID extra na cadeia: sua especificidade é 201 vs. 101.</li>
+ <li>O terceiro e o quarto seletores estão competindo pelo estilo da cor do texto do link - o segundo vence e torna o texto branco porque embora tenha um seletor de elemento a menos, o seletor ausente é trocado por um seletor de classe, que vale dez, em vez do que um. Portanto, a especificidade vencedora é 113 contra 104.</li>
+ <li>Os seletores 5 a 7 estão competindo pelo estilo da borda do link quando pairados. O seletor seis claramente perde para cinco com uma especificidade de 23 contra 24 - ele tem um seletor de elemento a menos na cadeia. O seletor sete, no entanto, vence o cinco e o seis - ele tem o mesmo número de sub-seletores na cadeia que cinco, mas um elemento foi trocado por um seletor de classe. Portanto, a especificidade vencedora é 33 contra 23 e 24.</li>
+</ul>
+
+<ol>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Este foi apenas um exemplo aproximado para facilitar a compreensão. Na realidade, cada tipo de seletor tem seu próprio nível de especificidade que não pode ser substituído por seletores com um nível de especificidade inferior. Por exemplo, um milhão de seletores de <strong>classe</strong> combinados não seriam capazes de sobrescrever as regras de um seletor de <strong>id</strong>.</p>
+
+<p>Uma forma mais precisa de avaliar a especificidade seria pontuar os níveis de especificidade individualmente começando do mais alto e passando para o mais baixo quando necessário. Somente quando há um empate entre as pontuações do seletor dentro de um nível de especificidade, você precisa avaliar o próximo nível abaixo; caso contrário, você pode desconsiderar os seletores de nível de especificidade inferior, pois eles nunca podem substituir os níveis de especificidade mais altos.</p>
+</div>
+
+<h3 id="!_Importante">! Importante</h3>
+
+<p>Existe uma parte especial do CSS que você pode usar para ignorar todos os cálculos acima, no entanto, você deve ter muito cuidado ao usá-la -! Importante. Isso é usado para tornar uma determinada propriedade e valor a coisa mais específica, substituindo assim as regras normais da cascata.<br>
+ <br>
+ Dê uma olhada neste exemplo onde temos dois parágrafos, um dos quais tem um ID.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
+
+<p>Vamos examinar isso para ver o que está acontecendo - tente remover algumas das propriedades para ver o que acontece e se você tiver dificuldade de entender:</p>
+
+<ol>
+ <li>Você verá que os valores da terceira regra {{cssxref ("color")}} e {{cssxref ("padding")}} foram aplicados, mas o {{cssxref ("background-color")}} não foram?. Por quê? Na verdade, todos os três devem ser aplicados, porque as regras posteriores na ordem de origem geralmente substituem as regras anteriores.</li>
+ <li>No entanto, as regras acima vencem, porque os seletores de classe têm uma especificidade mais alta do que os seletores de elemento.</li>
+ <li>Ambos elementos tem {{htmlattrxref("class")}} de <code>better (melhor)</code>, mas o segundo tem um <strong>id</strong> {{htmlattrxref("id")}} que é mais forte. Como os IDs têm uma especificidade ainda maior do que as classes (você só pode ter um elemento com cada ID exclusivo em uma página, mas muitos elementos com a mesma classe - os seletores de ID são muito específicos no que se destinam), a cor de fundo vermelha e A borda preta de 1 pixel deve ser aplicada ao segundo elemento, com o primeiro elemento recebendo a cor de fundo cinza, e sem borda, conforme especificado pela classe.</li>
+ <li>O segundo elemento obtém a cor de fundo vermelha, mas sem borda. Por quê? Por causa da declaração! Important na segunda regra - incluindo isso depois de border: none significa que essa declaração vai superar o valor de border na regra anterior, embora o ID tenha uma especificidade mais alta.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: A única maneira de sobrescrever essa declaração! Importante seria incluir outra declaração! Importante em uma declaração com a mesma especificidade posteriormente na ordem de origem, ou uma com uma especificidade mais alta.</p>
+</div>
+
+<p>É útil saber que! Important existe para que você saiba o que é quando o encontrar no código de outras pessoas. No entanto, recomendamos enfaticamente que você nunca o use, a menos que seja absolutamente necessário. ! mudanças importantes na maneira como a cascata normalmente funciona, portanto, pode tornar a depuração de problemas CSS realmente difícil de resolver, especialmente em uma folha de estilo grande.</p>
+
+<p>Uma situação em que você pode ter que usá-lo é quando você está trabalhando em um CMS onde você não pode editar os módulos CSS principais e você realmente deseja sobrescrever um estilo que não pode ser sobrescrito de nenhuma outra maneira. Mas, sério, não use se você puder evitar.</p>
+
+<h2 id="O_Efeito_da_Localização_CSS">O Efeito da Localização CSS</h2>
+
+<p>Por fim, também é útil observar que a importância de uma declaração CSS depende em qual folha de estilo ela é especificada - é possível que os usuários definam folhas de estilo personalizadas para substituir os estilos do desenvolvedor, por exemplo, o usuário pode ser deficiente visual e deseja para definir o tamanho da fonte em todas as páginas da Web que eles visitam com o dobro do tamanho normal para permitir uma leitura mais fácil.</p>
+
+<h2 id="Resumindo">Resumindo</h2>
+
+<p>As declarações conflitantes serão aplicadas na seguinte ordem, com as posteriores substituindo as anteriores:</p>
+
+<ol>
+ <li>Declarações nas folhas de estilo do agente do usuário (por exemplo, os estilos padrão do navegador, usados quando nenhum outro estilo está definido).</li>
+ <li>Declarações normais em folhas de estilo do usuário (estilos personalizados definidos por um usuário).</li>
+ <li>Declarações normais em folhas de estilo do autor (esses são os estilos definidos por nós, os desenvolvedores da web).</li>
+ <li>Declarações importantes nas folhas de estilo do autor</li>
+ <li>
+  <p>Declarações importantes nas folhas de estilo do usuário</p>
+
+  <p>Faz sentido que as folhas de estilo dos desenvolvedores da web substituam as folhas de estilo do usuário, para que o design possa ser mantido conforme pretendido, mas às vezes os usuários têm bons motivos para substituir os estilos do desenvolvedor da web, conforme mencionado acima - isso pode ser feito usando! Important em suas regras.<br>
+    </p>
+ </li>
+</ol>
+
+<h2 id="Teste_suas_Habilidades!">Teste suas Habilidades!</h2>
+
+<p>Abordamos muito neste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir - consulte <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>.</p>
+
+<h2 id="O_que_vem_a_seguir">O que vem a seguir?</h2>
+
+<p>Se você entendeu a maior parte deste artigo, então muito bem - você começou a se familiarizar com a mecânica fundamental do CSS. A seguir, veremos os seletores em detalhes.</p>
+
+<p>Se você não entendeu totalmente a cascata, a especificidade e a herança, não se preocupe! Esta é definitivamente a coisa mais complicada que abordamos até agora no curso e é algo que até mesmo os desenvolvedores profissionais da Web às vezes acham complicado. Aconselhamos que você volte a este artigo algumas vezes à medida que avança no curso e continue pensando a respeito.</p>
+
+<p>Volte aqui se você começar a encontrar problemas estranhos com estilos que não se aplicam conforme o esperado. Pode ser um problema de especificidade.</p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/pt-br/learn/css/building_blocks/index.html b/files/pt-br/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..b79de8baa0
--- /dev/null
+++ b/files/pt-br/learn/css/building_blocks/index.html
@@ -0,0 +1,83 @@
+---
+title: Construindo blocos CSS
+slug: Aprender/CSS/Construindo_blocos
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Este módulo continua onde <a href="/en-US/docs/Learn/CSS/First_steps">Primeiros passos em CSS</a> parou — agora que você já ganhou familiaridade com a linguagem e sua sintaxe, e já tem alguma experiência básica usando-a, é hora de mergulhar um pouco mais fundo. Este módulo analisa a conceitos de cascata e herança , todos os tipos de seletores que temos disponíveis, unidades, dimensionamentos, estilos de fundo e bordas, depuração, e muito mais.</p>
+
+<p class="summary">O objetivo aqui é lhe prover com um conjunto de ferramentas para construir um código CSS competente e ajuda-lo a entender toda a teoria essencial, antes de passarmos para tópicos mais específicos como <a href="/en-US/docs/Learn/CSS/Styling_text">Estilização de texto</a> e <a href="/en-US/docs/Learn/CSS/CSS_layout">Modelo CSS</a>.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Antes de iniciar este módulo, você deve ter:</p>
+
+<ol>
+ <li>Familiaridade básica com uso de computadores, e usar a Web passivamente (por exemplo. apenas olhar, consumindo o conteúdo.)</li>
+ <li>Um ambiente de trabalho básico configurado conforme detalhado em <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalando software básico</a>, e um entendimento de como criar e gerenciar arquivos, como detalhado em <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Lidando com arquivos</a>.</li>
+ <li>Familiaridade básica com HTML, como foi discutido no módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a>.</li>
+ <li>Um entendimento do básico em CSS, como o mostrado no módulo  <a href="/en-US/docs/Learn/CSS/First_steps">Primeiros Passos com CSS</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você estiver usando um computador/tablet/outro dispositivo onde você não puder criar seus próprios arquivos, você pode tentar rodar (a maioria) os códigos de exemplo em um programa de codificação online como o <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<p>Este módulo contém os seguintes artigos, que cobrem a maioria das partes essenciais da linguagem CSS. Ao longo do caminho você encontrará vários exercícios para testar seu entendimento.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascata e Herança</a></dt>
+ <dd>O objetivo desta lição é desenvolver seu entendimento de alguns dos conceitos mais fundamentais do CSS — a cascata, especificidade e herança — que controlam como o CSS será aplicado ao HTML e como conflitos são resolvidos.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Seletores CSS</a></dt>
+ <dd>Há uma ampla variedade de seletores CSS disponíveis, permitindo uma fina precisão ao selecionar elementos para estilizar. Neste artigo e em seus sub-artigos, examinaremos os diferentes tipos em detalhes, vendo como eles funcionam. Os sub-artigos são os seguintes:
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tipo, classe e seletores de ID</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Seletores de atributo</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes e pseudo-elementos</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinadores</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">O modelo de caixa</a> (Ou Box Model)</dt>
+ <dd>Tudo em CSS está dentro de caixas, e entender essas caixas é a chave para estar apto a criar layouts (modelos) em CSS, ou alinhar itens com outros itens. Nesta lição,trataremos mais propriamente sobre Modelo de Caixa CSS, afim de que você possa passar para tarefas de Layout mais complexas com um entendimento de como isto funciona e a terminologia relacionada a este modelo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Planos de fundo e bordas</a></dt>
+ <dd>Nesta lição, examinaremos algumas das coisas criativas que você pode fazer com os planos de fundo e as bordas do CSS. Desde a criação de gradientes, imagens de plano de fundo e cantos arredondados, planos de fundo e bordas são a resposta para muitas questões de estilo em CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Manipulando diferentes direções de texto</a></dt>
+ <dd>Nos últimos anos, o CSS evoluiu para oferecer melhor suporte a diferentes direções de conteúdo, incluindo o conteúdo da direita para a esquerda, mas também de cima para baixo (como o japonês) - essas diferentes direções são chamadas de modos de escrita. À medida que você progride em seu estudo e começa a trabalhar com o layout, o entendimento dos <strong>modos de escrita</strong> será muito útil para você; portanto, os apresentaremos neste artigo..</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Transbordando conteúdo</a></dt>
+ <dd>Nesta lição, examinaremos outro conceito importante em CSS - overflow, efeito de transbordar. O overflow é o que acontece quando há muito conteúdo para ser contido adequadamente dentro de uma "caixa". Neste guia, você aprenderá o que é e como gerenciá-lo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valores CSS e unidades</a></dt>
+ <dd>Cada propriedade usada em CSS tem um valor ou um conjunto de valores que são permitidos para uma dada propriedade, veremos alguns dos valores e unidades mais comuns em uso.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionando itens em CSS</a></dt>
+ <dd>Nas várias lições até agora, você encontrou várias maneiras de dimensionar itens em uma página da Web usando CSS. É importante entender o tamanho dos diferentes recursos do seu design e, nesta lição, resumiremos as várias maneiras pelas quais os elementos obtêm um tamanho via CSS e definiremos alguns termos de dimensionamento que ajudarão você no futuro.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imagens, mídia, e elementos de formulário</a></dt>
+ <dd>Nesta lição, veremos como certos elementos especiais são tratados no CSS. Imagens, outras mídias e elementos de formulário se comportam de maneira um pouco diferente em termos de sua capacidade de estilizá-los com CSS do que as caixas regulares. Compreender o que é e o que não é possível pode poupa-lo de algumas frustrações, e esta lição destacará algumas das principais coisas que você precisa saber.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Estilizando Tabelas</a></dt>
+ <dd>Estilizar uma tabela HTML não é o trabalho mais fascinante do mundo, mas às vezes todos nós precisamos fazê-lo. Este artigo fornece um guia para melhorar a aparência das tabelas HTML, com algumas técnicas específicas de estilo de tabela destacadas.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurando CSS</a></dt>
+ <dd>Às vezes, ao escrever CSS, você encontrará um problema em que seu CSS parece não estar fazendo o que você espera. Este artigo fornecerá orientações sobre como depurar um problema de CSS e mostrará como os DevTools (ferramentas de desenvolvedor) incluídos em todos os navegadores modernos podem ajudá-lo a descobrir o que está acontecendo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizando seu CSS</a></dt>
+ <dd>Ao começar a trabalhar com folhas de estilo e em projetos maiores, você descobrirá que manter um grande arquivo CSS pode ser desafiador. Neste artigo, examinaremos brevemente algumas práticas recomendadas para escrever seu CSS para facilitar a manutenção e algumas das soluções que você encontrará em uso por outras pessoas para ajudar a melhorar a capacidade de manutenção.</dd>
+</dl>
+
+<h2 id="Avaliações">Avaliações</h2>
+
+<p>Deseja testar suas habilidades de CSS? As avaliações a seguir testarão sua compreensão do CSS abordado nos guias acima.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Entendimento fundamental de CSS</a></dt>
+ <dd>Esta avaliação testará seu entendimento da sintaxe básica, seletores, especificidade, modelo caixa, e mais.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Criando uma carta timbrada ideal</a></dt>
+ <dd>Se você deseja causar uma boa impressão, escrever uma carta em papel timbrado bonito pode ser um bom começo. Nesta avaliação, desafiaremos você a criar um modelo online para obter essa aparência.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Caixa de estilo atraente</a></dt>
+ <dd>Aqui você aprenderá a usar o estilo de plano de fundo e borda para criar uma caixa agradável.</dd>
+</dl>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Efeitos de estilo avançados</a></dt>
+ <dd>Este artigo funciona como uma caixa de truques, fornecendo uma introdução a alguns recursos avançados de estilo interessantes, como sombras de caixa, modos de mesclagem e filtros.</dd>
+</dl>
diff --git a/files/pt-br/learn/css/building_blocks/the_box_model/index.html b/files/pt-br/learn/css/building_blocks/the_box_model/index.html
new file mode 100644
index 0000000000..841540a8f0
--- /dev/null
+++ b/files/pt-br/learn/css/building_blocks/the_box_model/index.html
@@ -0,0 +1,343 @@
+---
+title: The box model
+slug: Aprender/CSS/Construindo_blocos/The_box_model
+translation_of: Learn/CSS/Building_blocks/The_box_model
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Tudo em CSS tem um quadro em torno de si, e entender estes quadros é chave para ser capaz de criar arranjos ( layouts ) com CSS, ou para alinhar itens com outros itens. Nesta lição, olharemos de modo apropiado para o modelo de caixas do CSS ( CSS Box Model ), de forma que você possa montar arranjos mais complexos com um melhor entendimento de como ele funciona e da terminologia relacionada.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Familiaridade básica em utilizar computadores, ambiente de trabalho básico configurado conforme detalhado em<a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">software básico instalado</a>, conhecimento básico de como <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos"> criar e gerenciar arquivos</a>, básico de HTML ( <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a>), e uma idéia de como o  CSS funciona (ensinado em <a href="/en-US/docs/Learn/CSS/First_steps">CSS primeiros passos</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender sobre o Modelo de Caixa do CSS, o que faz o modelo de caixa e como trocar para um modelo alternativo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Block_and_inline_boxes">Block and inline boxes</h2>
+
+<p>In CSS we broadly have two types of boxes — <strong>block boxes</strong> and <strong>inline boxes</strong>. These characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page:</p>
+
+<p>If a box is defined as a block, it will behave in the following ways:</p>
+
+<ul>
+ <li>The box will break onto a new line.</li>
+ <li>The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.</li>
+ <li>The {{cssxref("width")}} and {{cssxref("height")}} properties are respected.</li>
+ <li>Padding, margin and border will cause other elements to be pushed away from the box</li>
+</ul>
+
+<p>Unless we decide to change the display type to inline, elements such as headings (e.g. <code>&lt;h1&gt;</code>) and <code>&lt;p&gt;</code> all use <code>block</code> as their outer display type by default.</p>
+
+<p>If a box has an outer display type of <code>inline</code>, then:</p>
+
+<ul>
+ <li>The box will not break onto a new line.</li>
+ <li>The {{cssxref("width")}} and {{cssxref("height")}} properties will not apply.</li>
+ <li>Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.</li>
+ <li>Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.</li>
+</ul>
+
+<p>The <code>&lt;a&gt;</code> element, used for links, <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code> are all examples of elements that will display inline by default.</p>
+
+<p>The type of box applied to an element is defined by {{cssxref("display")}} property values such as <code>block</code> and <code>inline</code>, and relates to the <strong>outer</strong> value of <code>display</code>.</p>
+
+<h2 id="Além_disto_Tipos_de_exibição_display_internos_e_externos">Além disto: Tipos de exibição ( display ) internos e externos</h2>
+
+<p>Nesse ponto, é melhor também explicar os tipos de exibição interna ( <strong>inner </strong>) e externa ( <strong>outer )</strong>. Como mencionado acima, as caixas em CSS têm um tipo de exibição externa, que detalha se a caixa é em bloco ou em linha.</p>
+
+<p>Caixas possuem também um tipo de display <em>inner</em>, que determina como elementos dentro da caixa são posicionados. Por default, os elementos dentro de uma caixa são posicionados em um fluxo normal ( <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">normal flow</a> </strong>), significando que eles se comportam como qualquer outro bloco e elementos inline (como explicado acima).</p>
+
+<p>We can, however, change the inner display type by using <code>display</code> values like <code>flex</code>. If we set <code>display: flex;</code> on an element, the outer display type is <code>block</code>, but the inner display type is changed to <code>flex</code>. Any direct children of this box will become flex items and will be laid out according to the rules set out in the <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> spec, which you'll learn about later on.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide to <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout</a>.</p>
+</div>
+
+<p>When you move on to learn about CSS Layout in more detail, you will encounter <code>flex</code>, and various other inner values that your boxes can have, for example <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+
+<p>Block and inline layout, however, is the default way that things on the web behave — as we said above, it is sometimes referred to as <em>normal flow</em>, because without any other instruction, our boxes lay out as block or inline boxes.</p>
+
+<h2 id="Examples_of_different_display_types">Examples of different display types</h2>
+
+<p>Let's move on and have a look at some examples. Below we have three different HTML elements, all of which have an outer display type of <code>block</code>. The first is a paragraph, which has a border added in CSS. The browser renders this as a block box, so the paragraph begins on a new line, and expands to the full width available to it.</p>
+
+<p>The second is a list, which is laid out using <code>display: flex</code>. This establishes flex layout for the items inside the container, however, the list itself is a block box and — like the paragraph — expands to the full container width and breaks onto a new line.</p>
+
+<p>Below this, we have a block-level paragraph, inside which are two <code>&lt;span&gt;</code> elements. These elements would normally be <code>inline</code>, however, one of the elements has a class of block, and we have set it to <code>display: block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+
+<p>We can see how <code>inline</code> elements behave in this next example. The <code>&lt;span&gt;</code> elements in the first paragraph are inline by default and so do not force line breaks.</p>
+
+<p>We also have a <code>&lt;ul&gt;</code> element which is set to <code>display: inline-flex</code>, creating an inline box around some flex items.</p>
+
+<p>Finally, we have two paragraphs both set to <code>display: inline</code>. The inline flex container and paragraphs all run together on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements.</p>
+
+<p><strong>In the example, you can change <code>display: inline</code> to <code>display: block</code> or <code>display: inline-flex</code> to <code>display: flex</code> to toggle between these display modes.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+
+<p>You will encounter things like flex layout later in these lessons; the key thing to remember for now is that changing the value of the <code>display</code> property can change whether the outer display type of a box is block or inline, which changes the way it displays alongside other elements in the layout. </p>
+
+<p>In the rest of the lesson, we will concentrate on the outer display type.</p>
+
+<h2 id="What_is_the_CSS_box_model">What is the CSS box model?</h2>
+
+<p>The full CSS box model applies to block boxes, inline boxes only use some of the behavior defined in the box model. The model defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on the page. To add some additional complexity, there is a standard and an alternate box model.</p>
+
+<h3 id="Parts_of_a_box">Parts of a box</h3>
+
+<p>Making up a block box in CSS we have the:</p>
+
+<ul>
+ <li><strong>Content box</strong>: The area where your content is displayed, which can be sized using properties like {{cssxref("width")}} and {{cssxref("height")}}.</li>
+ <li><strong>Padding box</strong>: The padding sits around the content as white space; its size can be controlled using {{cssxref("padding")}} and related properties.</li>
+ <li><strong>Border box</strong>: The border box wraps the content and any padding. Its size and style can be controlled using {{cssxref("border")}} and related properties.</li>
+ <li><strong>Margin box</strong>: The margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. Its size can be controlled using {{cssxref("margin")}} and related properties.</li>
+</ul>
+
+<p>The below diagram shows these layers:</p>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<h3 id="The_standard_CSS_box_model">The standard CSS box model</h3>
+
+<p>In the standard box model, if you give a box a <code>width</code> and a <code>height</code> attribute, this defines the width and height of the <em>content box</em>. Any padding and border is then added to that width and height to get the total size taken up by the box. This is shown in the image below.</p>
+
+<p>If we assume that the box has the following CSS defining <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code>:</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+</pre>
+
+<p>The space taken up by our box using the standard box model will actually be 410px (350 + 25 + 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box.</p>
+
+<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The margin is not counted towards the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the border — it does not extend into the margin.</p>
+</div>
+
+<h3 id="The_alternative_CSS_box_model">The alternative CSS box model</h3>
+
+<p>You might think it is rather inconvenient to have to add up the border and padding to get the real size of the box, and you would be right! For this reason, CSS had an alternative box model introduced some time after the standard box model. Using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding and border. The same CSS as used above would give the below result (width = 350px, height = 150px).</p>
+
+<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+
+<p>By default, browsers use the standard box model. If you want to turn on the alternative model for an element you do so by setting <code>box-sizing: border-box</code> on it. By doing this you are telling the browser to take the border box as the area defined by any size you set.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  box-sizing: border-box;
+} </code></pre>
+
+<p>If you want all of your elements to use the alternative box model, and this is a common choice among developers, set the <code>box-sizing</code> property on the <code>&lt;html&gt;</code> element, then set all other elements to inherit that value, as seen in the snippet below. If you want to understand the thinking behind this, see <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: An interesting bit of history — Internet Explorer used to default to the alternative box model, with no mechanism available to switch.</p>
+</div>
+
+<h2 id="Playing_with_box_models">Playing with box models</h2>
+
+<p>In the below example, you can see two boxes. Both have a class of <code>.box</code>, which gives them the same <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code>. The only difference is that the second box has been set to use the alternative box model.</p>
+
+<p><strong>Can you change the size of the second box (by adding CSS to the <code>.alternate</code> class) to make it match the first box in width and height?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find a solution for this task <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">here</a>.</p>
+</div>
+
+<h3 id="Use_browser_DevTools_to_view_the_box_model">Use browser DevTools to view the box model</h3>
+
+<p>Your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> can make understanding the box model far easier. If you inspect an element in Firefox's DevTools, you can see the size of the element plus its margin, padding, and border. Inspecting an element in this way is a great way to find out if your box is really the size you think it is!</p>
+
+<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+
+<h2 id="Margins_padding_and_borders">Margins, padding, and borders</h2>
+
+<p>You've already seen the {{cssxref("margin")}}, {{cssxref("padding")}}, and {{cssxref("border")}} properties at work in the example above. The properties used in that example are <strong>shorthands</strong> and allow us to set all four sides of the box at once. These shorthands also have equivalent longhand properties, which allow control over the different sides of the box individually.</p>
+
+<p>Let's explore these properties in more detail.</p>
+
+<h3 id="Margin">Margin</h3>
+
+<p>The margin is an invisible space around your box. It pushes other elements away from the box. Margins can have positive or negative values. Setting a negative margin on one side of your box can cause it to overlap other things on the page. Whether you are using the standard or alternative box model, the margin is always added after the size of the visible box has been calculated.</p>
+
+<p>We can control all margins of an element at once using the {{cssxref("margin")}} property, or each side individually using the equivalent longhand properties:</p>
+
+<ul>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+</ul>
+
+<p><strong>In the example below, try changing the margin values to see how the box is pushed around due to the margin creating or removing space (if it is a negative margin) between this element and the containing element.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+
+<h4 id="Margin_collapsing">Margin collapsing</h4>
+
+<p>A key thing to understand about margins is the concept of margin collapsing. If you have two elements whose margins touch, and both margins are positive, those margins will combine to become one margin, which is the size of the largest individual margin. If one or both margins are negative, the amount of negative value will subtract from the total.</p>
+
+<p>In the example below, we have two paragraphs. The top paragraph has a <code>margin-bottom</code> of 50 pixels. The second paragraph has a <code>margin-top</code> of 30 pixels. The margins have collapsed together so the actual margin between the boxes is 50 pixels and not the total of the two margins.</p>
+
+<p><strong>You can test this by setting the <code>margin-top</code> of paragraph two to 0. The visible margin between the two paragraphs will not change — it retains the 50 pixels set in the <code>bottom-margin</code> of paragraph one. If you set it to -10px, you'll see that the overall margin becomes 40px — it subtracts from the 50px.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+
+<p>There are a number of rules that dictate when margins do and do not collapse. For further information see the detailed page on <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">mastering margin collapsing</a>. The main thing to remember for now is that margin collapsing is a thing that happens. If you are creating space with margins and don't get the space you expect, this is probably what is happening.</p>
+
+<h3 id="Borders">Borders</h3>
+
+<p>The border is drawn between the margin and the padding of a box. If you are using the standard box model, the size of the border is added to the <code>width</code> and <code>height</code> of the box. If you are using the alternative box model then the size of the border makes the content box smaller as it takes up some of that available <code>width</code> and <code>height</code>.</p>
+
+<p>For styling borders, there are a large number of properties — there are four borders, and each border has a style, width and color that we might want to manipulate.</p>
+
+<p>You can set the width, style, or color of all four borders at once using the {{cssxref("border")}} property.</p>
+
+<p>To set the properties of each side individually, you can use:</p>
+
+<ul>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+</ul>
+
+<p>To set the width, style, or color of all sides, use the following:</p>
+
+<ul>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+</ul>
+
+<p>To set the width, style, or color of a single side, you can use one of the most granular longhand properties:</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+</ul>
+
+<p><strong>In the example below we have used various shorthands and longhands to create borders. Have a play around with the different properties to check that you understand how they work. The MDN pages for the border properties give you information about the different styles of border you can choose from.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+
+<h3 id="Padding">Padding</h3>
+
+<p>The padding sits between the border and the content area. Unlike margins you cannot have negative amounts of padding, so the value must be 0 or a positive value. Any background applied to your element will display behind the padding, and it is typically used to push the content away from the border.</p>
+
+<p>We can control the padding on each side of an element individually using the {{cssxref("padding")}} property, or each side individually using the equivalent longhand properties:</p>
+
+<ul>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+</ul>
+
+<p><strong>If you change the values for padding on the class <code>.box</code> in the example below you can see that this changes where the text begins in relation to the box.</strong></p>
+
+<p><strong>You can also change the padding on the class <code>.container,</code> which will make space between the container and the box. Padding can be changed on any element, and will make space between its border and whatever is inside the element.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+
+<h2 id="The_box_model_and_inline_boxes">The box model and inline boxes</h2>
+
+<p>All of the above applies fully to block boxes. Some of the properties can apply to inline boxes too, such as those created by a <code>&lt;span&gt;</code> element.</p>
+
+<p>In the example below, we have a <code>&lt;span&gt;</code> inside a paragraph and have applied a <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, and <code>padding</code> to it. You can see that the width and height are ignored. The vertical margin, padding, and border are respected but they do not change the relationship of other content to our inline box and so the padding and border overlaps other words in the paragraph. Horizontal padding, margins, and borders are respected and will cause other content to move away from the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+
+<h2 id="Using_display_inline-block">Using display: inline-block</h2>
+
+<p>There is a special value of <code>display</code>, which provides a middle ground between <code>inline</code> and <code>block</code>. This is useful for situations where you do not want an item to break onto a new line, but do want it to respect <code>width</code> and <code>height</code> and avoid the overlapping seen above.</p>
+
+<p>An element with <code>display: inline-block</code> does a subset of the block things we already know about:</p>
+
+<ul>
+ <li>The <code>width</code> and <code>height</code> properties are respected.</li>
+ <li><code>padding</code>, <code>margin</code>, and <code>border</code> will cause other elements to be pushed away from the box.</li>
+</ul>
+
+<p>It does not, however, break onto a new line, and will only become larger than its content if you explicitly add <code>width</code> and <code>height</code> properties.</p>
+
+<p><strong>In this next example, we have added <code>display: inline-block</code> to our <code>&lt;span&gt;</code> element. Try changing this to <code>display: block</code> or removing the line completely to see the difference in display models.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+
+<p>Where this can be useful is when you want to give a link to a larger hit area by adding <code>padding</code>. <code>&lt;a&gt;</code> is an inline element like <code>&lt;span&gt;</code>; you can use <code>display: inline-block</code> to allow padding to be set on it, making it easier for a user to click the link.</p>
+
+<p>You see this fairly frequently in navigation bars. The navigation below is displayed in a row using flexbox and we have added padding to the <code>&lt;a&gt;</code> element as we want to be able to change the <code>background-color</code> when the <code>&lt;a&gt;</code> is hovered. The padding appears to overlap the border on the <code>&lt;ul&gt;</code> element. This is because the <code>&lt;a&gt;</code> is an inline element.</p>
+
+<p><strong>Add <code>display: inline-block</code> to the rule with the <code>.links-list a</code> selector, and you will see how it fixes this issue by causing the padding to be respected by other elements.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Test your skills: The Box Model</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's most of what you need to understand about the box model. You may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout.</p>
+
+<p>In the next lesson, we will take a look at how <a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">backgrounds and borders</a> can be used to make your plain boxes look more interesting.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/pt-br/learn/css/css_layout/intro_leiaute_css/index.html b/files/pt-br/learn/css/css_layout/introduction/index.html
index 9314e8efd3..9314e8efd3 100644
--- a/files/pt-br/learn/css/css_layout/intro_leiaute_css/index.html
+++ b/files/pt-br/learn/css/css_layout/introduction/index.html
diff --git a/files/pt-br/learn/css/css_layout/layout_de_varias_colunas/index.html b/files/pt-br/learn/css/css_layout/multiple-column_layout/index.html
index 2605843ff4..2605843ff4 100644
--- a/files/pt-br/learn/css/css_layout/layout_de_varias_colunas/index.html
+++ b/files/pt-br/learn/css/css_layout/multiple-column_layout/index.html
diff --git a/files/pt-br/learn/css/css_layout/fluxo_normal/index.html b/files/pt-br/learn/css/css_layout/normal_flow/index.html
index c27a403fa7..c27a403fa7 100644
--- a/files/pt-br/learn/css/css_layout/fluxo_normal/index.html
+++ b/files/pt-br/learn/css/css_layout/normal_flow/index.html
diff --git a/files/pt-br/learn/css/first_steps/iniciando/index.html b/files/pt-br/learn/css/first_steps/getting_started/index.html
index a9a5218e98..a9a5218e98 100644
--- a/files/pt-br/learn/css/first_steps/iniciando/index.html
+++ b/files/pt-br/learn/css/first_steps/getting_started/index.html
diff --git a/files/pt-br/learn/css/first_steps/como_css_e_estruturado/index.html b/files/pt-br/learn/css/first_steps/how_css_is_structured/index.html
index 4084647920..4084647920 100644
--- a/files/pt-br/learn/css/first_steps/como_css_e_estruturado/index.html
+++ b/files/pt-br/learn/css/first_steps/how_css_is_structured/index.html
diff --git a/files/pt-br/learn/css/first_steps/o_que_e_css/index.html b/files/pt-br/learn/css/first_steps/what_is_css/index.html
index 41980dfee6..41980dfee6 100644
--- a/files/pt-br/learn/css/first_steps/o_que_e_css/index.html
+++ b/files/pt-br/learn/css/first_steps/what_is_css/index.html
diff --git a/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html b/files/pt-br/learn/css/howto/css_faq/index.html
index f3febd4637..f3febd4637 100644
--- a/files/pt-br/learn/css/howto/css_perguntas_frequentes/index.html
+++ b/files/pt-br/learn/css/howto/css_faq/index.html
diff --git a/files/pt-br/learn/css/index.html b/files/pt-br/learn/css/index.html
new file mode 100644
index 0000000000..f5004d47f3
--- /dev/null
+++ b/files/pt-br/learn/css/index.html
@@ -0,0 +1,61 @@
+---
+title: Aprenda a estilizar HTML utilizando CSS
+slug: Aprender/CSS
+tags:
+  - CSS
+  - Folha de Estilos
+  - Iniciante
+  - especificação
+translation_of: Learn/CSS
+---
+<p class="summary">Cascading Stylesheets — ou {{glossary("CSS")}} — é a primeira tecnologia que você deve aprender após o {{glossary("HTML")}}. Enquanto o HTML é utilizado para definir a estrutura e semântica do seu conteúdo, o CSS é usado para estilizá-lo e desenhá-lo. Por exemplo, você pode usar o CSS para alterar a fonte, cor, tamanho e espaçamento do seu conteúdo, dividí-lo em multiplas colunas, ou adicionar animações e outros recursos decorativos.</p>
+
+<h2 id="Percurso_de_aprendizagem">Percurso de aprendizagem</h2>
+
+<p>Você deveria aprender o básico de HTML antes de tentar algo com CSS. Nós recomendamos que você comece através da nossa <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a>.Neste módulo você irá aprender sobre:</p>
+
+<ul>
+ <li>CSS, começando com a <a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">introdução ao CSS</a></li>
+ <li><a href="/en-US/Learn/HTML#Modules">Módulos HTML </a>mais avançados</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, e como utiliza-lo para adicionar funcionalidade dinâmica as páginas da web</li>
+</ul>
+
+<p>Uma vez que voce entendeu os Fundamentos do HTML, Nós recomendamos que você aprenda HTML e CSS ao mesmo tempo, movendo-se para trás e para frente entre os dois temas. Isso por que HTML é muito mais interessante com CSS e você não pode aprender realmente CSS sem conhecer HTML.</p>
+
+<p>Antes de iniciar este tópico, você também deve ter ao menos familiaridade com o uso de computadores, e utilizar a Web passivamente (isto é, apenas navegando e consumindo conteúdo.) Você deve ter uma configuração básica de ambiente de trabalho, conforme detalhado no <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalando o software básico</a>, e entender como criar e gerenciar arquivos, conforme detalhado em <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Lidando com arquivos</a> — ambos são partes do nosso <a href="/en-US/docs/Learn/Getting_started_with_the_web">Como começar com a web</a> módulo completo de iniciante.</p>
+
+<p>É recomendável que você trabalhe através do <a href="/en-US/docs/Learn/Getting_started_with_the_web">Como começar com a web</a> antes de começar este tema. Contudo, não é absolutamente necessário; ja que muito do que é abordado no artigo básico de CSS também é coberto em nossa <a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">introdução ao CSS</a>, embora com muito mais detalhes.</p>
+
+<h2 id="Módulos">Módulos</h2>
+
+<p>Este tópico contém os seguintes módulos em uma ordem sugerida para trabalhar através deles. Você deve definitivamente começar com o primeiro.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">Introdução ao CSS</a></dt>
+ <dd>Este módulo é uma introdução com as noções básicas de como CSS funciona, incluindo seletores e propriedades, escrever regras CSS, aplicando CSS para HTML, como especificar comprimento, cor e outras unidades em CSS, controlar cascatas e heranças, noções básicas de box model e depuração CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Estilo de texto</a></dt>
+ <dd>Aqui nós olhamos os fundamentos do estilos de texto, incluindo a configuração da fonte, negrito, itálico, linha e espaçamento das letras, além de sombras e outros componentes de texto. Nós usamos este módulo para personalizar fontes para sua página, e estilizar listas e links.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Caixas de estilo</a></dt>
+ <dd>Próximo, procuramos as caixas de estilo, um dos passos fundamentais para elaborar uma página web. Neste módulo, nós recapitulamos box model para então controlarmos o layout por configuração de padding, borders e margins, configurações personalizada do background colors , imagens e outros componentes, componentes elegantes tais como sombras e filtros das caixas.</dd>
+ <dt><a href="/pt-BR/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
+ <dd>Neste ponto, nós olharemos os fundamentos CSS, como estilizar o texto, e como estilizar e manipular as caixas com conteudos alocados. Agora é hora de olhar como pôr suas caixas no lugar certo em relação ao viewport,  e outros. Nós temos cobertos os pré-requisitos necessários para então agora podemos aprofundar no layout CSS, olhar em diferentes configurações de telas, tradicionais métodos envolvendo float e posicionamento, além de novos ferramentas de flanged layouts como flexbox, CSS Grid e posicionamento, alem de algumas tecnicas que voce ainda pode querer conhecer.</dd>
+ <dt>Design Responsivo (TBD)</dt>
+ <dd>Com tantos tipos diferentes de dispositivos capazes de navegar pela internet nos dias de hoje, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Responsive_design">design web responsivo</a> (RWD) se tornou uma habilidade primordial para o desenvolvimento web. Esse módulo irá cobrir os principios básicos e ferramentas do RWD, explicar como aplicar diferentes arquivos CSS à um documento a depender de dos recursos do dispositivo como largura de tela, orientação, e resolução, e explorar tecnologias disponíveis para servir diferentes vídeos e imagens dependendo de tais recursos.</dd>
+ <dt>Animações e transformações (TBD)</dt>
+ <dd>Duas das áreas mais interessantes do CSS são a habilidade de manipular elementos (ex. mover, rotacionar e inclinação), e animar elementos suavemente (ex. de uma cor ou posição para outra). Esse módulo explora como implementar as transformações e animações.</dd>
+</dl>
+
+<h2 id="Resolvendo_problemas_de_CSS_comuns">Resolvendo problemas de CSS comuns</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS para resolver problemas comuns</a> proporcione links para seções de conteúdo explicando como usar CSS para resolver problemas muito comuns na criação de páginas web.</p>
+
+<p>Para começar, primeirmamente você aplicara cores aos elementos HTML e seus backgrounds;  alterará o tamanho, forma e posição dos elementos; definira e adicionara bordas aos elementos. Não há muito o que você não podera fazer depois que tiver uma compreensão solida até mesmo sobre o basico do CSS. Uma das melhores coisas sobre aprender CSS é que uma vez que voce conhece os fundamentos, normalmente voce tera uma boa noção do que pode ou não fazer, mesmo que não saiba como fazer aquilo ainda.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS">CSS no MDN</a></dt>
+ <dd>O principal ponto de entrada para documentação CSS no MDN, onde voce encontra desde referências detalhadas a tutoriais avançados. Quer saber todos os valores que uma propriedade pode ter? Este é o melhor lugar</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Reference">Referência CSS</a></dt>
+ <dd>Um guia de referência abrangente para todos os muitos recursos da linguagem CSS - se você quiser saber quais valores uma propriedade pode tomar, por exemplo, este é um ótimo lugar para começar.</dd>
+</dl>
diff --git a/files/pt-br/learn/css/styling_text/index.html b/files/pt-br/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..b2eafa9f05
--- /dev/null
+++ b/files/pt-br/learn/css/styling_text/index.html
@@ -0,0 +1,48 @@
+---
+title: Estilizando texto
+slug: Aprender/CSS/Estilizando_texto
+tags:
+  - CSS
+  - Fontes
+  - Iniciante
+  - Links
+  - Texto
+  - listas
+  - web fontes
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Com o básico de CSS compreendido, o próximo passo para você se concentrar será a estilização de textos — uma das mais importantes coisas que você fará com CSS. Aqui nós olhamos para os fundamentos de estilização de texto, fontes, negritos, italicos, linha e espaço entre letras, sombreamente e outras características textuais. Completamos o módulo produrando aplicar fontes personalizadas para sua página, e estilizando listas e links.</p>
+
+<h2 id="Pré-requisites">Pré-requisites</h2>
+
+<p>Antes de começar este módulo, você já deverá ter familiaridade básica com HTML, como dissemos no módulos <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a>, e estar confortável com os fundamentos de CSS, como discutido em <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está usando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar seus próprios arquivos, você poderá treinar os códigos-exemplo em um programa de código online como <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<p>Este módulo contém os seguintes artigos que ensinarão você todos os fundamentos por trás da estilização de conteúdo textual HTML.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamentos da estilização de texto e fontes</a></dt>
+ <dd>Neste artigo nós passamos por todo o básico da estilização de texto/fonte, incluindo a configuração weight(negrito), family e style, configuração com forma abreviada, alinhamento textual, linha e espaçamento entre as letras.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Estilizando lista</a></dt>
+ <dd>Listas comportam-se como qualquer texto na maior parte das vezes, ma há algumas propriedades CSS específicas para lista que você precisa conhecer, e algumas boas práticas a considerar. Este artigo esclarecerá tudo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Estilizando links</a></dt>
+ <dd>Na estilização de links, é importante entender como fazer uso de pseudo-classes para estilizar o estado dos links efetivamente, como estilizar links para uso em recursos de interfaces diversas como menus de navegação e guias. Veremos todos esses tópicos neste artigo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web Fontes</a></dt>
+ <dd>Aqui nós exploraremos Web Fontes em detalhes — isto permite que você baixe fontes personalizadas junto com sua página web, para permitir maior personalização na estilização.</dd>
+</dl>
+
+<h2 id="Avaliação">Avaliação</h2>
+
+<p>A seguinte avaliação testará seu entendimento das técnicas de estilização de texto cobertas pelo guia acima.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Estilizando a homepage de um escola comunitária</a></dt>
+ <dd>Nesta avaliação nos testeremos seu entendimento de estilização de texto fazendo com que você estilize a homepage de uma escola comunitária.</dd>
+</dl>
diff --git a/files/pt-br/learn/css/styling_text/styling_lists/index.html b/files/pt-br/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..72dc8dc227
--- /dev/null
+++ b/files/pt-br/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,272 @@
+---
+title: Manipulando Listas
+slug: Web/CSS/Getting_Started/Lists
+translation_of: Learn/CSS/Styling_text/Styling_lists
+translation_of_original: Web/Guide/CSS/Getting_started/Lists
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}</p>
+
+<p><font><font>Este é o 10º seção do </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="EN-US / docs / Web / Guia / CSS / Introdução"><font><font>CSS Introdução</font></font></a><font><font> tutorial; </font><font>ele descreve como você pode usar CSS para especificar o aparecimento de listas. </font><font>Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.</font></font></p>
+
+<h2 class="clearLeft" id="Informação_Lists"><font><font>Informação: Lists</font></font></h2>
+
+<p><font><font>Se você aceitou o desafio na </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/ en-US / docs / Web / Guia / CSS / Getting_Started / Conteúdo"><font><font>última </font></font></a><font><font>seção, </font><font>em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.</font></font></p>
+
+<p><font><font>CSS proporciona propriedades especiais que são projetados para listas. </font><font>Geralmente é mais conveniente usar estas propriedades sempre que puder.</font></font></p>
+
+<p><font><font>Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.</font></font></p>
+
+<p><font><font>O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.</font></font></p>
+
+<h3 id="Listas_não_ordenadas"><font><font>Listas não ordenadas</font></font></h3>
+
+<p><font><font>Em uma lista </font></font><em><font><font>desordenada</font></font></em><font><font>, cada item da lista é marcado da mesma forma.</font></font></p>
+
+<p><font><font>CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:</font></font></p>
+
+<ul style="padding-left: 2em;">
+ <li style="list-style-type: disc;"><code><font><font>disc</font></font></code></li>
+ <li style="list-style-type: circle;"><code><font><font>circle</font></font></code></li>
+ <li style="list-style-type: square;"><code><font><font>square</font></font></code></li>
+</ul>
+
+<p style="list-style-type: square;">        none</p>
+
+<p><font><font>Alternativamente, você pode especificar o URL de uma imagem.</font></font></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><font><font>Exemplo</font></font></div>
+
+<p><font><font>Essas regras especificam diferentes marcadores para diferentes classes de item da lista:</font></font></p>
+
+<pre class="brush:css"><font><font>li.open {list-style: circle;} </font></font><font><font>
+li.closed {list-style: disc;}</font></font>
+</pre>
+
+<p><font><font>Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):</font></font></p>
+
+<pre class="brush: html"><font><font>&lt;ul&gt; </font></font><font><font>
+  &lt;li class="open"&gt; Lorem ipsum &lt;/ li&gt; </font></font><font><font>
+  &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;</font></font>
+</pre>
+
+<p><font><font>O resultado pode parecer:</font></font></p>
+
+<p><font><font>{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}</font></font></p>
+</div>
+
+<h3 id="Listas_ordenadas"><font><font>Listas ordenadas</font></font></h3>
+
+<p><font><font>Em uma lista<em>ordenada</em></font></font><font><font> , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.</font></font></p>
+
+<p><font><font>Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:</font></font></p>
+
+<ul style="padding-left: 2em;">
+ <li><code>decimal</code></li>
+ <li><code>lower-roman</code></li>
+ <li><code>upper-roman</code></li>
+ <li><code>lower-latin</code></li>
+ <li><code>upper-latin</code></li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type"><font><font>Exemplo</font></font></div>
+
+<p><font><font>Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe </font></font><code><font><font>informações, os itens são identificados com letras maiúsculas.</font></font></code></p>
+
+<pre><code>&lt;ol class="info"&gt;
+  &lt;li&gt;Lorem ipsum&lt;/li&gt;
+  &lt;li&gt;Dolor sit&lt;/li&gt;
+  &lt;li&gt;Amet consectetuer&lt;/li&gt;
+  &lt;li&gt;Magna aliquam&lt;/li&gt;
+  &lt;li&gt;Autem veleum&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<pre class="brush:css"><font><font>ol.info {list-style: upper-latin;}
+</font></font></pre>
+
+<p><font><font>O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:</font></font></p>
+
+<p><font><font>{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}</font></font></p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type"><font><font>Mais detalhes</font></font></div>
+
+<p><font><font>O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. </font><font>Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. </font><font>Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.</font></font></p>
+
+<p><font><font>Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. </font><font>No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.</font></font></p>
+
+<p><font><font>Browsers diferem na maneira de implementar os estilos para listas. </font><font>Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</font></font></p>
+</div>
+
+<h3 id="Contadores"><font><font>Contadores</font></font></h3>
+
+<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
+<p><strong><font><font>Nota: </font></font></strong><font><font> Alguns navegadores não suportam contadores. </font><font>O </font></font><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html"><font><font>conteúdo CSS e compatibilidade do navegador</font></font></a><font><font> página no </font></font><a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/"><font><font>site de modo Quirks</font></font></a><font><font> contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. </font><font>Páginas individuais na </font></font><a href="/en-US/docs/Web/CSS/Reference" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference"><font><font>referência CSS</font></font></a><font><font> neste local também têm tabelas de compatibilidade do navegador.</font></font></p>
+</div>
+
+<p><font><font>Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. </font><font>Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</font></font></p>
+
+<p><font><font>Para especificar a numeração, você precisa de um </font></font><em><font><font>contador</font></font></em><font><font> com um nome que você especificar.</font></font></p>
+
+<p><font><font>Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. </font><font>O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.</font></font></p>
+
+<p><font><font>Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.</font></font></p>
+
+<p><font><font>Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o </font></font><code><font><font>conteúdo</font></font></code><font><font> da propriedade (como você fez na página anterior, </font><font>Conteúdo) </font><font>.</font></font></p>
+
+<p><font><font>No valor do </font></font><code><font><font>conteúdo</font></font></code><font><font> de propriedade, especifique </font></font><code><font><font>counter ()</font></font></code><font><font> com o nome de seu contador. </font><font>Opcionalmente especifique um tipo. </font><font>Os tipos são os mesmos que na </font></font><strong><font><font>lista ordenada</font></font></strong><font><font> secção acima.</font></font></p>
+
+<p><font><font>Normalmente, o elemento que apresenta o contador também incrementa-lo.</font></font></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><font><font>Exemplo</font></font></div>
+
+<p><font><font>Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe </font><font>numeradas:</font></font></p>
+
+<pre class="brush:css"><font><font>h3.numbered {counter-reset: mynum;}
+</font></font></pre>
+
+<p> </p>
+
+<p><font><font>Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe </font><font>numeradas:</font></font></p>
+
+<pre class="brush: html"><font><font>&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;</font></font>
+</pre>
+
+<pre class="brush:css"><font><font>body </font></font><font><font>
+   {counter-reset: </font></font><font><font>
+mynum;} </font></font><font><font>
+p.numbered:before
+  {content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}</font></font>
+</pre>
+
+<p><font><font>O resultado se parece com isso:</font></font></p>
+
+<p><font><font>{{ EmbedLiveSample("Contadores", '300', '200', '') }}</font></font></p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type"><font><font>Mais detalhes</font></font></div>
+
+<p><font><font>Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.</font></font></p>
+
+<p><font><font>Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. </font><font>No exemplo acima, os contadores estão em negrito mas os itens da lista não são.</font></font></p>
+
+<p><font><font>Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. </font><font>Para mais detalhes, consulte </font></font><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters"><font><font>contadores automáticos e numeração</font></font></a><font><font> em CSS Specification.</font></font></p>
+</div>
+
+<h2 id="Listas_denominadas_Ação"><font><font>Listas denominadas: Ação</font></font></h2>
+
+<p><font><font>Crie um novo documento HTML, </font><font>doc2.html. </font><font>Copie e cole o conteúdo daqui:</font></font></p>
+
+<pre class="brush:html;"><font><font>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Sample document 2&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style2.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Arctic&lt;/li&gt;
+      &lt;li&gt;Atlantic&lt;/li&gt;
+      &lt;li&gt;Pacific&lt;/li&gt;
+      &lt;li&gt;Indian&lt;/li&gt;
+      &lt;li&gt;Southern&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;</font></font>
+
+</pre>
+
+<p><font><font>Faça uma nova folha de estilo, </font><font>style2.css. </font><font>Copie e cole o conteúdo daqui:</font></font></p>
+
+<pre class="brush:css;"><font><font>/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}</font></font>
+</pre>
+
+<p><font><font>Se o layout e comentário não são a seu gosto, alterá-los.</font></font></p>
+
+<p><font><font>Abra o documento no seu browser. </font><font>Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. </font><font>Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):</font></font></p>
+
+<p><font><font>{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}</font></font></p>
+
+<div class="tuto_example">
+<div class="tuto_type"><font><font>Desafios</font></font></div>
+
+<p><font><font>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:</font></font></p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>The oceans</strong></p>
+
+    <ul>
+     <li>Arctic</li>
+     <li>Atlantic</li>
+     <li>Pacific</li>
+     <li>Indian</li>
+     <li>Southern</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p><font><font>Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:</font></font></p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>(A) The oceans</strong></p>
+
+    <p><strong>. . .</strong></p>
+
+    <p><strong>(B) Numbered paragraphs</strong></p>
+
+    <p><strong>. . .</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="EN-US / docs / Web / Guia / CSS / Introdução / desafio soluções # Lists"><font><font>Ver soluções para esses desafios.</font></font></a></p>
+
+<h2 id="Qual_o_proximo"><font><font>Qual o proximo?</font></font></h2>
+
+<p><font><font>{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. </font><font>A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, </font><font>caixas.</font></font></p>