---
title: Iniciando com o CSS
slug: Web/CSS/Getting_Started
tags:
  - CSS
  - Guia(2)
  - Guía
  - Iniciante
  - Web
translation_of: Learn/CSS/First_steps
translation_of_original: Web/Guide/CSS/Getting_started
---
<p> </p>

<h2 id="Introdução">Introdução</h2>

<p>Esse tutorial é uma introdução ao <em>Cascading Style Sheets</em> (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:</p>

<ul>
 <li>A Parte I ilustra as características padrão do CSS que funcionam em todos os navegadores Mozilla e também em qualquer outro dentre os mais modernos.</li>
</ul>

<ul>
 <li>A Parte II conta com alguns exemplos de características especiais que funcionam nos navegadores Mozilla mas não necessariamente em outros ambientes.</li>
</ul>

<p>Esse tutorial é baseado na <a href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificação do CSS 2.1</a>.</p>

<h3 id="Quem_deve_usar_esse_tutorial">Quem deve usar esse tutorial?</h3>

<p>Esse tutorial é, principalmente, para iniciantes no CSS.</p>

<p>Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.</p>

<p>Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.</p>

<p>Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.</p>

<h3 id="O_que_você_precisa_saber_antes_de_começar">O que você precisa saber antes de começar?</h3>

<p>Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.</p>

<p>Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.</p>

<p>Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, <strong>você pode ignorá-las</strong>. O software referenciado por esse tutorial inclui:</p>

<ul>
 <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li>
</ul>

<p><strong>Nota: </strong>O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.</p>

<h3 id="Como_usar_esse_tutorial">Como usar esse tutorial</h3>

<p>Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.</p>

<p>Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.</p>

<p>Para testar seu entendimento, faça o desafio do fim de cada página. <strong>Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.</strong></p>

<p>Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda <em>Mais detalhes</em> (<em>More details</em>). Utilize os links para encontrar informações de referência sobre o CSS.</p>

<h2 id="Parte_I_do_Tutorial">Parte I do Tutorial</h2>

<p>Uma guia básico passo a passo do CSS</p>

<ol>
 <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">O que é o CSS</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Porque usar o CSS</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como o CSS funciona</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascata e herança</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Seletores</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">CSS legível</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Estilos de texto</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Cores</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Conteúdo</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Listas</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Caixas</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tabelas</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Mídia</a></strong></li>
</ol>

<h2 id="Parte_II_do_Tutorial">Parte II do Tutorial</h2>

<p>Exemplos do uso do CSS juntamente com outras tecnologias</p>

<ol>
 <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">Gráficos SVG</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">Dados XML</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">Ligações XBL</a></strong></li>
 <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Interfaces de usuário XUL</a></strong></li>
</ol>

<p>{{ CSSTutorialTOC() }}</p>

<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "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", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p>