---
title: Como começar
slug: Learn/CSS/First_steps
tags:
  - CSS
  - CSS:Como_começar
  - Todas_as_Categorias
translation_of: Learn/CSS/First_steps
translation_of_original: Web/Guide/CSS/Getting_started
original_slug: Web/CSS/Como_começar
---
<p> </p>

<h3 id="Introdu.C3.A7.C3.A3o" name="Introdu.C3.A7.C3.A3o">Introdução</h3>

<p>Este tutorial o introduz às CSS (Cascading Style Sheets - Folhas de Estilo em Cascata).</p>

<p>Este tutorial o orienta nos recursos básicos de CSS com exemplos práticos que você pode experimentar sozinho em seu computador. Ele é dividido em duas partes:</p>

<ul>
 <li>A Parte I ilustra os recursos básicos das CSS que funcionam nos navegadores Mozilla e também na maioria dos navegadores modernos.</li>
</ul>

<ul>
 <li>A Parte II contém alguns exemplos de recursos especiais que funcionam no Mozilla, mas não necessariamente em outros ambientes.</li>
</ul>

<p>Este tutorial é baseado na <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specification</a>.</p>

<h4 id="Quem_deve_ler_este_tutorial.3F" name="Quem_deve_ler_este_tutorial.3F">Quem deve ler este tutorial?</h4>

<p>Este tutorial é direcionado para iniciantes em CSS, mas você também poderá usá-lo caso tenha alguma experiência em CSS.</p>

<p>Se você é um iniciante em CSS, leia a Parte I deste tutorial para entender CSS e aprender a usá-lo. Em seguida, leia a Parte II para entender o escopo de CSS no Mozilla.</p>

<p>Se você conhece CSS, poderá ignorar as partes desse tutorial que já conhece e ler apenas as partes que lhe interessam.</p>

<p>Se você já tem experiência em CSS mas não no Mozilla, pode ir direto para a Parte II.</p>

<h4 id="O_que_voc.C3.AA_precisa_antes_de_come.C3.A7ar.3F" name="O_que_voc.C3.AA_precisa_antes_de_come.C3.A7ar.3F">O que você precisa antes de começar?</h4>

<p>Para melhor aproveitar este tutorial, você precisa de um editor de arquivos de texto e um navegador Mozilla (Firefox, Mozilla Suite ou Seamonkey). Você também deve saber como utilizá-los de um modo básico.</p>

<p>Se não deseja editar arquivos, você pode apenas ler o tutorial e observar as imagens, mas este não é o melhor modo de aprendizado.</p>

<p>Poucas partes deste tutorial podem requerer outro software Mozilla. Essas partes são opcionais. Você pode ignorar essas partes se não desejar fazer o download de outro software Mozilla.</p>

<p><strong>Nota:</strong> As CSS oferece modos de se trabalhar com cores, de modo que partes deste tutorial dependem de cores. Você poderá utilizar essas partes facilmente somente se tiver um monitor colorido e uma visão colorida normal.</p>

<h4 id="Como_utilizar_este_tutorial" name="Como_utilizar_este_tutorial">Como utilizar este tutorial</h4>

<p>Para utilizar este tutorial, leia cuidadosamente as páginas e em seqüência. Se perder uma página, você poderá ter dificuldades para entender as páginas posteriores.</p>

<p>Em cada página, utilize a seção<em>Informações</em> para entender como o CSS funciona. Utilize a seção<em>Ações</em> para tentar usar o CSS em seu próprio computador.</p>

<p>Para testar seus conhecimentos, faça o teste ao final de cada página. As soluções para alguns testes são reveladas nas páginas posteriores no tutorial.</p>

<p>Para se aprofundar em CSS, leia as informações nas caixas entituladas<em>Mais detalhes</em>. Utilize os links para localizar informações referentes às CSS.</p>

<h3 id="Tutorial_Parte_I" name="Tutorial_Parte_I">Tutorial Parte I</h3>

<p>Um guia passo-a-passo para CSS.</p>

<ol>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/O_que_%c3%a9_CSS">O que é CSS</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Porque_usar_CSS">Porque usar CSS</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Como_o_CSS_trabalha">Como o CSS trabalha</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Cascata_e_heran%c3%a7a">Cascata e herança</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Seletores">Seletores</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/CSS_leg%c3%advel">CSS legível</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Estilos_de_texto">Estilos de texto</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Cor">Cor</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Conte%c3%bado">Conteúdo</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Listas">Listas</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Caixas">Caixas</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Disposi%c3%a7%c3%a3o">Disposição</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Tabelas">Tabelas</a></strong></li>
 <li><strong><a href="/pt-PT/docs/Web/CSS/Como_começar/Mídia">Média</a></strong></li>
</ol>

<h3 id="Tutorial_Parte_II" name="Tutorial_Parte_II">Tutorial Parte II</h3>

<p>Exemplos que mostram o escopo da CSS no Mozilla.</p>

<ol>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/JavaScript">JavaScript</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/XBL_bindings">XBL bindings</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Interfaces_de_usu%c3%a1rio_XUL">Interfaces de usuário XUL</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Gr%c3%a1ficos_SVG">Gráficos SVG</a></strong></li>
 <li><strong><a href="pt/CSS/Como_come%c3%a7ar/Dados_XML">Dados XML</a></strong></li>
</ol>

<p>{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>