path: root/files/pt-br/learn/getting_started_with_the_web/css_basics/index.html

---
title: CSS básico
slug: Learn/Getting_started_with_the_web/CSS_basics
tags:
  - Aprender
  - CSS
  - Codificação de Scripts
  - Estilo
  - Iniciante
  - Web
  - l10n:prioridade
translation_of: Learn/Getting_started_with_the_web/CSS_basics
original_slug: Aprender/Getting_started_with_the_web/CSS_basico
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à sua página Web. <em>CSS básico</em> apresenta tudo que você precisa para começar. Responderemos a perguntas do tipo: Como mudo meu texto para preto ou vermelho? Como faço para que meu conteúdo apareça em determinados lugares na tela? Como decoro minha página com imagens e cores de fundo?</p>
</div>

<h2 id="Então_o_que_realmente_é_CSS">Então, o que realmente é CSS?</h2>

<p>Assim como o HTML, o CSS não é realmente uma linguagem de programação. Também não é uma linguagem de marcação  — é uma <em>linguagem de folhas de estilos</em>. Isso significa que o CSS permite aplicar estilos seletivamente a elementos em documentos HTML. Por exemplo, para selecionar <strong>todos</strong> os elementos parágrafo de uma página HTML e tornar o texto dentro deles vermelho, você escreveria este CSS:</p>

<pre class="brush: css">p {
  color: red;
}</pre>

<p>Vamos tentar: cole as três linhas de CSS acima em um novo arquivo, no seu editor de texto, e salve o arquivo como <code>estilo.css</code> na sua pasta <code>estilos</code>.</p>

<p>Ainda assim, precisamos aplicar o CSS ao seu documento HTML. Do contrário, o estilo CSS não irá afetar a maneira como o seu navegador mostra seu documento HTML (se você não estiver acompanhando o nosso projeto, leia <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a> para descobrir o que você precisa fazer primeiro).</p>

<ol>
 <li>Abra seu arquivo <code>index.html</code> e cole o seguinte código em algum lugar no cabeçalho, ou seja, entre as tags {{HTMLElement("head")}} e <code>&lt;/head&gt;</code>:

  <pre class="brush: html">&lt;link href="estilos/estilo.css" rel="stylesheet"&gt;</pre>
 </li>
 <li>Salve o arquivo <code>index.html</code> e abra ele no seu navegador. Você deve ver uma página como essa:</li>
</ol>

<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Se o texto do seu parágrafo estiver vermelho, parabéns! Você acabou de escrever seu primeiro CSS de sucesso.</p>

<h3 id="Anatomia_de_um_conjunto_de_regras_CSS">Anatomia de um conjunto de regras CSS</h3>

<p>Vamos dar uma olhada no CSS acima com mais detalhes:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>

<p>Toda essa estrutura é chamada de <strong>conjunto de regras </strong>(mas geralmente usamos o termo "regra", por ser mais curto). Note os nomes das partes individuais:</p>

<dl>
 <dt>Seletor (Selector)</dt>
 <dd>O nome do elemento HTML no começo do conjunto de regras. Ele seleciona o(s) elemento(s) a serem estilizados (nesse caso, elementos {{HTMLElement("p")}}). Para dar estilo a um outro elemento, é só mudar o seletor.</dd>
 <dt>Declaração (Declaration)</dt>
 <dd>Uma regra simples como <code>color: red;</code> especificando quais das <strong>propriedades</strong> do elemento você quer estilizar.</dd>
 <dt>Propriedades (Property)</dt>
 <dd>Forma pela qual você estiliza um elemento HTML. (Nesse caso, <code>color</code> é uma propriedade dos elementos {{HTMLElement("p")}}.) Em CSS, você escolhe quais propriedades você deseja afetar com sua regra.</dd>
 <dt>Valor da propriedade (Property value)</dt>
 <dd>À direita da propriedade, depois dos dois pontos, nós temos o <strong>valor de propriedade</strong>, que escolhe uma dentre muitas aparências possíveis para uma determinada propriedade (há muitos valores <code>color(cor)</code> além do <code>red(vermelho)</code>).</dd>
</dl>

<p>Note outras partes importantes da sintaxe:</p>

<ul>
 <li>Cada linha de comando deve ser envolvida em chaves (<code>{}</code>).</li>
 <li>Dentro de cada declaração, você deve usar dois pontos (<code>:</code>) para separar a propriedade de seus valores.</li>
 <li>Dentro de cada conjunto de regras, você deve usar um ponto e vírgula (<code>;</code>) para separar cada declaração da próxima.</li>
</ul>

<p>Então para modificar múltiplos valores de propriedades de uma vez, você deve escrevê-los separados por ponto e vírgula, desse modo:</p>

<pre class="brush: css">p {
  color: red;
  width: 500px;
  border: 1px solid black;
}</pre>

<h3 id="Selecionando_múltiplos_elementos">Selecionando múltiplos elementos</h3>

<p>Você também pode selecionar vários tipos de elementos e aplicar um único conjunto de regras a todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo:</p>

<pre class="brush: css">p, li, h1 {
  color: red;
}</pre>

<h3 id="Diferentes_tipos_de_seletores">Diferentes tipos de seletores</h3>

<p>Há muitos tipos diferentes de seletores. Abaixo, nós mostramos apenas os <strong>seletores de elementos</strong>, que selecionam todos os elementos de um determinado tipo nos documentos HTML. Mas nós podemos fazer seleções mais específicas que essas. Aqui estão alguns dos tipos mais comuns de seletores:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Nome do seletor</th>
   <th scope="col">O que ele seleciona</th>
   <th scope="col">Exemplo</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Seletor de elemento (às vezes, chamado tag ou seletor de tipo)</td>
   <td>Todos os elementos HTML de determinado tipo.</td>
   <td><code>p</code><br>
    Seleciona <code>&lt;p&gt;</code></td>
  </tr>
  <tr>
   <td>Seletor de ID</td>
   <td>O elemento na página com o ID específicado. Em uma determinada página HTML, é uma boa prática usar um elemento por ID (e claro, um ID por elemento) mesmo que seja permitido usar o mesmo ID para vários elementos.</td>
   <td><code>#my-id</code><br>
    Seleciona <code>&lt;p id="my-id"&gt;</code> ou <code>&lt;a id="my-id"&gt;</code></td>
  </tr>
  <tr>
   <td>Seletor de classe</td>
   <td>O(s) elemento(s) na página com a classe específicada (várias instâncias de classe podem aparecer em uma página).</td>
   <td><code>.my-class</code><br>
    Seleciona <code>&lt;p class="my-class"&gt;</code> e <code>&lt;a class="my-class"&gt;</code></td>
  </tr>
  <tr>
   <td>Seletor de atributo</td>
   <td>O(s) elemento(s) na página com o atributo especificado.</td>
   <td><code>img[src]</code><br>
    Seleciona <code>&lt;img src="myimage.png"&gt;</code> mas não <code>&lt;img&gt;</code></td>
  </tr>
  <tr>
   <td>Seletor de pseudo-classe</td>
   <td>O(s) elemento(s) específicado(s), mas somente quando estiver no estado especificado. Ex.: com o mouse sobre ele.</td>
   <td><code>a:hover</code><br>
    Seleciona <code>&lt;a&gt;</code>, mas somente quando o mouse está em cima do link.</td>
  </tr>
 </tbody>
</table>

<p>Há muito mais seletores para explorar e você pode achar uma lista mais detalhada em nosso <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS/Introduction_to_CSS/Seletores">Guia de seletores</a>.</p>

<h2 id="Fontes_e_texto">Fontes e texto</h2>

<p>Agora que exploramos algumas noções básicas de CSS, vamos começar a adicionar mais regras e informações no nosso arquivo <code>estilo.css</code> para deixar nosso exemplo bonito. Vamos começar fazendo nossas fontes e textos parecerem um pouco melhores.</p>

<ol>
 <li>Primeiro de tudo, volte e encontre a <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer#Fonte">fonte do Google Fonts</a> que você armazenou em algum lugar seguro. Adicione o elemento {{htmlelement ("link")}} em algum lugar dentro do cabeçalho no <code>index.html</code> (novamente, em qualquer lugar entre as tags {{HTMLElement ("head")}} e <code>&lt;/ head&gt;</code>). Será algo parecido com isto:

  <pre class="brush: html">&lt;link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;</pre>
  Esse código vincula sua página a uma folha de estilo que baixa a família de fontes Open Sans junto com sua página web e permite que você a defina em seus elementos HTML usando sua própria folha de estilos.</li>
 <li>Em seguida, exclua a regra existente no seu arquivo <code>estilo.css</code>. Foi um bom teste, mas o texto vermelho não parece muito bom.</li>
 <li>Adicione as seguintes linhas em seu lugar, substituindo a linha do espaço reservado pela linha <code>font-family</code> que você obteve do Google Fonts. (<code>font-family</code> significa apenas a(s) fonte(s) que você deseja usar para o seu texto.) Esta regra primeiro define uma fonte base global e o tamanho da fonte para a página inteira (já que {{HTMLElement ("html")}} é o elemento pai de toda a página, e todos os elementos dentro dele herdam o mesmo <code>font-size</code> e <code>font-family</code>):
  <pre class="brush: css">html {font-size: 10px; /* px significa "pixels": o tamanho da fonte base é agora de 10 pixels */
  font-family: "Open Sans", sans-serif; /* este deve ser o nome da fonte que você obteve no Google Fonts */
}</pre>

  <div class="note">
  <p><strong>Nota</strong>: Qualquer coisa em um documento CSS entre <code>/*</code> e <code>*/</code> é um <strong>comentário CSS</strong>, que o navegador ignora quando renderiza o código. Este é um lugar para você escrever notas úteis sobre o que você está fazendo.</p>
  </div>
 </li>
 <li>Agora definiremos tamanhos de fonte para elementos que contêm texto dentro do corpo HTML ({{htmlelement ("h1")}}, {{htmlelement ("li")}} e {{htmlelement ("p")}}). Também centralizaremos o texto do nosso cabeçalho e definiremos a altura da linha e o espaçamento das letras no conteúdo do corpo para torná-lo um pouco mais legível:
  <pre class="brush: css">h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}</pre>
 </li>
</ol>

<p>Você pode ajustar esses valores de <code>px</code> para o que você desejar, para deixar seu design com a aparência que quiser, mas no geral seu design deve parecer com isso:<img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 728px; margin: 0px auto; width: 672px;"></p>

<h2 id="Caixas_caixas_é_tudo_sobre_caixas">Caixas, caixas, é tudo sobre caixas</h2>

<p>Uma coisa que você notará sobre escrever CSS é que muito disso é sobre caixas — indicar seu tamanho, cor, posição, etc. Muitos dos elementos HTML da sua página podem ser pensados como caixas umas em cima das outras.</p>

<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>

<p>Como esperado, o layout CSS é baseado principalmente no <em>modelo de caixas</em>. Cada um dos blocks que ocupam espaço na sua página tem propriedades como essas:</p>

<ul>
 <li><code>padding</code>, o espaço ao redor do conteúdo (ex.: ao redor do texto de um parágrafo).</li>
 <li><code>border</code>, a linha sólida do lado de fora do padding.</li>
 <li><code>margin</code>, o espaço externo a um elemento.</li>
</ul>

<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>

<p>Nessa seção nós também vamos usar:</p>

<ul>
 <li><code>width</code> (largura de um elemento).</li>
 <li><code>background-color</code>, a cor atrás do conteúdo de um elemento e do padding.</li>
 <li><code>color</code>, a cor do conteúdo de um elemento (geralmente texto).</li>
 <li><code>text-shadow</code>: cria uma sombra no texto dentro de um elemento.</li>
 <li><code>display</code>: define a maneira de dispor um elemento (não se preocupe com isso ainda).</li>
</ul>

<p>Então, vamos começar e adicionar mais CSS à nossa página! Continue adicionando essas novas regras à parte inferior da página e não tenha medo de experimentar alterações nos valores para ver o que aparece.</p>

<h3 id="Mudando_a_cor_da_página">Mudando a cor da página</h3>

<pre class="brush: css">html {
  background-color: #00539F;
}</pre>

<p>Essa regra define uma cor de fundo para toda a página. Mude a cor acima para a cor <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer#Cor_do_tema">que você escolheu ao planejar seu site.</a></p>

<h3 id="Separando_o_corpo">Separando o corpo</h3>

<pre class="brush: css">body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}</pre>

<p>Agora para o elemento {{htmlelement ("body")}}. Há algumas declarações aqui, então vamos passar por elas uma a uma:</p>

<ul>
 <li><code>width: 600px;</code> — Isso força o corpo a ter 600 pixels de largura.</li>
 <li><code>margin: 0 auto;</code> — Quando você define dois valores em uma propriedade como <code>margin</code> ou <code>padding</code>, o primeiro valor afeta a parte superior do elemento <strong>e</strong> a parte inferior (tornando-os <code>0</code> nesse caso), e no segundo valor os lados esquerdo <strong>e</strong> direito (aqui, <code>auto</code> é um valor especial que divide o espaço horizontal uniformemente entre esquerda e direita). Você também pode utilizar um, três ou quatro valores, como documentado <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/margin#Sintaxe">aqui</a>.</li>
 <li><code>background-color: #FF9500;</code> — como antes, isso define a cor de fundo do elemento. Usamos um tipo de laranja avermelhado no corpo, para opor ao azul escuro no elemento {{htmlelement ("html")}}, mas fique à vontade para ir em frente e experimentar.</li>
 <li><code>padding: 0 20px 20px 20px;</code> — temos quatro valores definidos no padding, para criar um pouco de espaço em torno do nosso conteúdo. Dessa vez, estamos definindo sem padding na parte superior do corpo, e 20 pixels no lado esquerdo, na parte inferior e no lado direito. Os valores definem a parte superior, o lado direito, a parte inferior e o lado esquerdo, nessa ordem. Como com a <code>margin</code>, você também pode usar um, dois, ou três valores, conforme documentado na <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/padding#Sintaxe">sintaxe do padding</a>.</li>
 <li><code>border: 5px solid black;</code> — isso simplesmente define uma borda preta sólida de 5 pixels de largura em todos os lados do corpo.</li>
</ul>

<h3 id="Posicionando_e_estilizando_o_título_da_nossa_página_principal">Posicionando e estilizando o título da nossa página principal</h3>

<pre class="brush: css">h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}</pre>

<p>Você deve ter notado que há um espaço horrível no topo do corpo. Isso acontece porque os browsers aplicam algumas <strong>estilizações padrão</strong> ao {{htmlelement("h1")}} (entre outros), mesmo quando você não aplicou nenhum CSS! Isso pode soar como uma má ideia, mas queremos ter uma legibilidade básica, mesmo em uma página sem estilos. Para nos livrarmos desse espaço, sobrescrevemos o estilo padrão, definindo <code>margin: 0;</code>.</p>

<p>Em seguida, definimos o padding das partes superior e inferior do cabeçalho para 20 pixels e fizemos o texto do cabeçalho da mesma cor que a cor de fundo do HTML.</p>

<p>Uma propriedade bastante interessante que usaremos aqui é o <code>text-shadow</code>, que aplica uma sombra ao conteúdo de texto do elemento. Seus quatro valores são os seguintes:</p>

<ul>
 <li>O primeiro valor em pixel define o <strong>deslocamento horizontal </strong>da sombra do texto — até onde ele se move: um valor negativo deve movê-la para a esquerda.</li>
 <li>O segundo valor em pixel define o <strong>deslocamento vertical</strong> da sombra do texto — o quanto ela se move para baixo, neste exemplo; um valor negativo deve movê-la para cima.</li>
 <li>O terceiro valor em pixel define o <strong>raio de desfoque</strong> da sombra — um valor maior significará uma sombra mais borrada.</li>
 <li>O quarto valor define a cor base da sombra.</li>
</ul>

<p>De novo, tente experimentar com diferentes valores para ver o que você pode criar!</p>

<h3 id="Centralizando_a_imagem">Centralizando a imagem</h3>

<pre class="brush: css">img {
  display: block;
  margin: 0 auto;
}</pre>

<p>Finalmente, centralizaremos a imagem para melhorar a aparência. Nós poderiamos usar novamente o truque <code>margin: 0 auto</code> que aprendemos anteriormente para o corpo, mas também precisamos fazer outra coisa. O elemento {{htmlelement ("body")}} é <strong>em nível de bloco</strong>, o que significa que ocupa espaço na página e pode ter margens e outros valores de espaçamento aplicados a ele. Imagens, por outro lado, são elementos<strong> em linha</strong>, o que significa que não podem ter margens. Então, para aplicar margens a uma imagem, temos que dar o comportamento de nível de bloco a imagem usando <code>display: block;</code>.</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: As instruções acima assumem que você está usando uma imagem menor que a largura definida no corpo (600 pixels). Se sua imagem for maior, ela irá transbordar o corpo e vazar para o restante da página. Para corrigir isso, você pode 1) reduzir a largura da imagem usando um <a href="https://en.wikipedia.org/wiki/Raster_graphics_editor">editor gráfico</a> (em inglês) ou 2) dimensionar a imagem usando CSS definindo a propriedade {{cssxref ("width")}} no elemento <code>&lt;img&gt;</code> com um valor menor (por exemplo, <code>400 px;</code>).</p>
</div>

<div class="note">
<p><strong>Nota</strong>: Não se preocupe se você ainda não entender <code>display: block;</code> ou a distinção entre em nível de bloco / em linha. Você entenderá ao estudar CSS com mais profundidade. Você pode descobrir mais sobre os diferentes valores de exibição disponíveis em nossa <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/display">página de referência sobre display</a>.</p>
</div>

<h2 id="Conclusão">Conclusão</h2>

<p>Se você seguiu todas as instruções desse artigo, você deve terminar com uma página parecida com essa (você também pode <a href="http://mdn.github.io/beginner-html-site-styled/">ver nossa versão aqui</a>):</p>

<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>

<p>Se você emperrar, sempre poderá comparar seu trabalho com nosso código de <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">exemplo finalizado no Github</a>.</p>

<p>Aqui, nós só arranhamos na superfície do CSS. Para descobrir mais, vá ao nosso <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS">tópico de aprendizado CSS</a>.</p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>

<h2 id="Neste_módulo">Neste módulo</h2>

<ul>
 <li id="Installing_basic_software"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
 <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
 <li id="Dealing_with_files"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
 <li id="HTML_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
 <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
 <li id="JavaScript_basics"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">JavaScript básico</a></li>
 <li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
 <li id="How_the_web_works"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
</ul>