1 files changed, 99 insertions, 0 deletions
diff --git a/files/pt-br/web/css/index.html b/files/pt-br/web/css/index.html
new file mode 100644
index 0000000000..95d26a6966
--- /dev/null
+++ b/files/pt-br/web/css/index.html
@@ -0,0 +1,99 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Design
+  - Estilos
+  - Landing
+  - Layout
+  - Referencia
+translation_of: Web/CSS
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS</strong> (<strong><em>Cascading Style Sheets</em> ou Folhas de Estilo em Cascata)</strong> é uma linguagem de <a href="/pt-BR/docs/Web/API/StyleSheet">estilo</a> usada para descrever a apresentação de um documento escrito em<a href="/pt-BR/HTML" title="HTML"> HTML</a> ou em <a href="/pt-BR/docs/Glossary/XML" title="XML">XML</a> (incluindo várias linguagens em XML como <a href="/pt-BR/SVG" title="SVG">SVG</a>, <a href="/pt-BR/docs/Web/MathML">MathML</a> ou <a href="/pt-BR/XHTML">XHTML</a>). O CSS descreve como elementos são mostrados na tela, no papel, na fala ou em outras mídias.</p>
+
+<p>CSS é uma das principais linguagens da <strong>open web</strong> e é padronizada em navagadores web de acordo com as <a class="external" href="http://w3.org/Style/CSS/#specs">especificação da W3C</a>. Desenvolvido em níveis, o CSS1 está atualmente obsoleto, o CSS2.1 é uma recomendação e o <a href="/pt-BR/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, agora dividido em pequenos módulos, está progredindo para a sua padronização.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>Introdução CSS</span>
+
+  <p>Se você é novo no desenvolvimento web, certifique-se de ler nosso artigo <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a> para aprender o que é CSS e como usá-lo.</p>
+ </li>
+ <li><span>Tutoriais CSS</span>
+  <p>Nossa <a href="/pt-BR/docs/Aprender/CSS">área de aprendizado CSS</a> contém diversos tutoriais para levá-lo do nível iniciante ao avançado, cobrindo todos os fundamentos.</p>
+ </li>
+ <li><span>Referências CSS</span>
+  <p>Nossa <a href="/pt-BR/docs/Web/CSS/CSS_Reference">extensa referência CSS</a> para desenvolvedores web experientes descreve todas as propriedades e conceitos do CSS.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tutoriais">Tutoriais</h2>
+
+<p>Nossa <a href="/pt-BR/docs/Aprender/CSS">área de aprendizado CSS</a> contempla múltiplos módulos que ensinam CSS desde o início — não é necessário conhecimento prévio.</p>
+
+<p><strong><a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">Introdução ao CSS</a></strong></p>
+
+<p>Esse módulo inicia com o funcionamento básico do CSS, incluindo seletores e propriedades, escrever regras CSS, aplicar CSS ao HTML, como especificar comprimento, cor, e outras unidades em CSS, cascata e herança, o básico do modelo de caixas, e depuração de CSS.</p>
+
+<p><strong><a href="/en-US/docs/Learn/CSS/Styling_text">Estilização do texto</a></strong></p>
+
+<p>Esse módulo discute os fundamentos da estilização de textos, incluindo a definição de fontes, negritos, itálicos, linhas e espaçamentos de letras, sombras e outras propriedades de textos.</p>
+
+<p><strong><a href="/en-US/docs/Learn/CSS/Styling_boxes">Estilização de caixas</a></strong></p>
+
+<p>Esse módulo foca na estilização de caixas, um dos passos fundamentais para o layout de uma página web. Nesse módulo nós recapitulamos o modelo de caixas, então abordamos o controle do layout das caixas definindo margens, bordas e preenchimento, cores de fundo customizadas, imagens e outras características extravagantes como sombras e filtros em caixas.</p>
+
+<p><strong><a href="/pt-BR/docs/Learn/CSS/CSS_layout">Layout CSS</a></strong></p>
+
+<p>Neste ponto nós já vimos os fundamentos do CSS, como estilizar texto e estilizar e manipular caixas que contém seu conteúdo. Agora veremos como posicionar suas caixas no lugar certo em relação à janela de exibição e um ao outro. Nós cobrimos os pré-requisitos necessários e agora você pode se aprofundar no layout do CSS com diferentes configurações de exibição, métodos tradicionais de layout envolvendo float e posicionamento, e modernas ferramentas para layout como flexbox.</p>
+
+<h2 id="Referências">Referências</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/CSS/CSS_Reference">Referências CSS</a>: Essa extensa referência para desenvolvedores web experientes descreve todas as propriedades e conceitos do CSS.</li>
+ <li>Conceitos chave do CSS:
+  <ul>
+   <li>A <a href="/pt-BR/docs/Web/CSS/sintaxe">sintaxe e formas da linguagem</a></li>
+   <li><a href="/pt-BR/docs/Web/CSS/Specificity">Especificidade</a>, <a href="/pt-BR/docs/Web/CSS/inheritance">herança</a> e <a href="/en-US/docs/Web/CSS/Cascade">cascata</a></li>
+   <li><a href="/pt-BR/docs/Web/CSS/box_model">Box model</a> e <a href="/pt-BR/docs/Web/CSS/CSS_Box_Model/margin_collapsing">colapso de margem</a></li>
+   <li>O <a href="/en-US/docs/Web/CSS/Containing_block">containing block</a></li>
+   <li><a href="/pt-BR/docs/Web/Guide/CSS/Understanding_z_index/O_contexto_de_empilhamento">Empilhamento</a> e <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block-formatting context</a></li>
+   <li>Valores <a href="/pt-BR/docs/Web/CSS/valor_inicial">iniciais</a>, <a href="/pt-BR/docs/Web/CSS/valor_computado">computados</a>, <a href="/pt-BR/docs/Web/CSS/Valor_usado">usados</a> e <a href="/pt-BR/docs/Web/CSS/Valor_atual">reais</a></li>
+   <li><a href="/pt-BR/docs/Web/CSS/Shorthand_properties">Propriedades abreviadas do CSS</a></li>
+   <li><a href="/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+   <li><a href="/pt-BR/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+   <li><a href="/pt-BR/docs/Web/CSS/Media_Queries">Media queries</a></li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Livro_de_receitas">Livro de receitas</h2>
+
+<p>O <a href="/en-US/docs/Web/CSS/Layout_cookbook">livro de receitas de layout CSS</a> tem como objetivo juntar receitas para padrões comuns de layout, coisas que você pode precisar para implementar em seus sites. Além de prover código você pode usá-lo como ponto de partida em seus projetos, essas receitas destacam as diferentes formas de utilização das especificações de layout e as escolhas que você pode fazer como desenvolvedor.</p>
+
+<h2 class="Tools" id="Ferramentas_para_desenvolvimento_de_CSS">Ferramentas para desenvolvimento de CSS</h2>
+
+<ul>
+ <li>Você pode usar o <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> para verificar se o seu CSS é válido. Essa é uma ferramenta indispensável de depuração.</li>
+ <li><a href="/pt-BR/docs/Tools">As Ferramentas do Firefox para desenvolvedores</a> permitem ver e editar o CSS de uma página ao vivo usando as ferramentas de <a href="/pt-BR/docs/Tools/Page_Inspector">Inspeção</a> e <a href="/pt-BR/docs/Tools/Style_Editor">Editor de Estilo</a>.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/pt-BR/firefox/addon/60">O complemento Web Developer</a> para Firefox também permite a observação e edição de CSS ao vivo dos sites visualizados.</li>
+ <li>A comunidade web criou várias outras<a href="/pt-BR/docs/Web/CSS/Tools"> pequenas ferramentas CSS</a> para você usar.</li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/Demos_of_open_web_technologies">CSS demos</a>: Inspire-se explorando criativos exemplos das mais recentes tecnologias CSS em ação.</li>
+ <li>Linguagens web nas quais o CSS é frequentemente aplicado: <a href="/pt-BR/docs/Web/HTML">HTML</a>, <a href="/pt-BR/docs/Web/SVG">SVG</a>, <a href="/pt-BR/docs/Web/MathML">MathML</a>, <a href="/pt-BR/docs/Web/XHTML">XHTML</a> e <a href="/pt-BR/docs/Glossary/XML">XML</a>.</li>
+ <li>Tecnologias Mozilla que usam extensivamente o CSS: <a href="/pt-BR/docs/XUL">XUL</a>, <a href="/pt-BR/docs/Extensions">complementos</a> e <a href="/pt-BR/Add-ons/Themes">temas</a> do <a href="/pt-BR/Firefox">Firefox</a> e <a href="/pt-BR/docs/Mozilla/Thunderbird">Thunderbird.</a></li>
+</ul>