path: root/files/pt-pt/learn/comecar_com_a_web/css_basico/index.html

---
title: CSS - Essencial
slug: Learn/Comecar_com_a_Web/CSS_basico
tags:
  - Aprender
  - Beginner
  - CSS
  - CodingScripting
  - Estilo
  - 'I10n:priority'
  - Web
translation_of: Learn/Getting_started_with_the_web/CSS_basics
---
<div>{{LearnSidebar}}
<div>{{PreviousMenuNext("Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web")}}</div>
</div>

<div class="summary">
<p>CSS (Folhas de Estilo em Cascata) é o código que se utiliza para estilizar a sua página da Web. <em>CSS - Elementar</em> guia-o através do que precisa para começar. Vamos responder a perguntas deste género: Como é que eu coloco o meu texto a preto ou vermelho? Como é que eu faço para que o meu conteúdo apareça neste lugar do ecrã? Como é que eu decoro a minha página da Web, com cores e imagens de fundo?</p>
</div>

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

<p>Tal como o HTML, o CSS não é bem uma linguagem de programação; também não é uma linguagem de demarcação. É uma <em>linguagem de folha de estilos</em>. Isto significa que permite aplicar estilos seletivamente aos elementos nos documentos HTML. Por exemplo, para selecionar <strong>todos</strong> os elementos do <strong>parágrafo</strong> numa página HTML e transformar o texto dentro deles em vermelho, iria escrever este CSS:</p>

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

<p>Vamos tentar: copie e cole estas três linhas de CSS num novo ficheiro do editor de texto, depois grave com o nome <code>style.css</code> na diretoria <code>styles</code>.</p>

<p>Mas ainda é preciso aplicar este CSS ao seu documento HTML. Se não, os estilos CSS não vão afetar a forma como o seu navegador apresenta o documento HTML. (Se não tem seguido o nosso projeto, leia <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a> e <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/HTML_basicos">HTML - Essencial</a> para saber o que fazer primeiro)</p>

<ol>
 <li>Abra o seu ficheiro <code>index.html</code> e cole a linha seguinte no cabeçalho (isto é, entre as marcas <code>&lt;head&gt;</code> e <code>&lt;/head&gt;</code>):

  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
 </li>
 <li>Guarde o ficheiro <code>index.html</code> e aceda-lhe no seu navegador. Deverá ver algo deste género:</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;">O texto dos seus parágrafos ficou vermelho. Parabéns! Acabou de escrever com sucesso o seu primeiro CSS.</p>

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

<p>Vejamos o CSS acima com um pouco mais de detalhe:</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>A esta estrutura dá-se o nome <strong>conjunto de regras </strong>(geralmente, "regra" para abreviar). Repare nos nomes de cada parte:</p>

<dl>
 <dt>Seletor</dt>
 <dd>Neste caso, é o nome do elemento HTML, no início do conjunto de regras. Seleciona o(s) elemento(s) a que vai ser aplicado o estilo (neste caso, todos os elementos <code>p</code>). Para dar estilo a outro elemento, muda-se o seletor.</dd>
 <dt>Declaração</dt>
 <dd>Trata-se de uma única regra, como  <code>color: red;</code>, que especifica as <strong>propriedades </strong>que se pretendem modificar no elemento.</dd>
 <dt>Propriedades</dt>
 <dd>São as formas como se pode estilizar o elemento HTML (Neste caso, <code>color</code> é uma propriedade dos elementos {{htmlelement("p")}}). Em CSS, pode escolher que propriedades pretende modificar na regra.</dd>
 <dt>Valor da propriedade</dt>
 <dd>À direita da propriedade, depois dos dois pontos (<code>:</code>), temos o <strong>valor da propriedade</strong>, que escolhe uma das possíveis aparências que a propriedade pode indicar (há muitos mais valores para <code>color</code> além de <code>red</code>).</dd>
</dl>

<p>Repare em outros aspetos importantes da sintaxe:</p>

<ul>
 <li>Cada conjunto de regras (além do seletor) tem que estar entre chavetas (<code>{}</code>).</li>
 <li>Dentro de cada declaração, utilize dois pontos (<code>:</code>) para separar a propriedade dos seus valores.</li>
 <li>Dentro de cada conjunto de regras, utilize ponto e vírgula (<code>;</code>) para separar cada declaração da próxima.</li>
</ul>

<p>Para modificar múltiplas propriedades, basta separá-las com o ponto e vírgula, assim:</p>

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

<h3 id="Selecionar_múltiplos_elementos">Selecionar múltiplos elementos</h3>

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

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

<h3 id="Diferentes_tipos_de_seletor">Diferentes tipos de seletor</h3>

<p>Há muitos tipos diferentes de seletor. Por cima, apenas olhámos para <strong>seletores de elementos</strong>, que selecionam todos os elementos de determinado tipo no documento HTML a que são aplicados. Mas podemos fazer seleções mais específicas. Em baixo, 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 é que este seleciona</th>
   <th scope="col">Exemplo</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Seletor de elemento (também chamado seletor de etiqueta ou tipo)</td>
   <td>Todos os elementos HTML do tipo especificado.</td>
   <td><code>p</code><br>
    Seleciona todos os elementos <code>&lt;p&gt;</code></td>
  </tr>
  <tr>
   <td>Seletor de ID </td>
   <td>O elemento da página com o ID especificado (numa página HTML, só pode haver um elemento para cada ID e vice-versa).</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> (não devem existir ambos na mesma página)</td>
  </tr>
  <tr>
   <td>Seletor de classe</td>
   <td>Seleciona o(s) elementos(s) da página com a classe especificada (é possível haver elementos diferentes com a mesma classe).</td>
   <td><code>.my-class</code><br>
    Seleciona <code>&lt;p class="my-class"&gt;</code> e também <code>&lt;a class="my-class"&gt;</code></td>
  </tr>
  <tr>
   <td>Seletor de atributo</td>
   <td>Seleciona o(s) elementos(s) que tenham o atributo dado.</td>
   <td><code>img[src]</code><br>
    Seleciona <code>&lt;img src="myimage.png"&gt;</code> mas não seleciona <code>&lt;img&gt;</code></td>
  </tr>
  <tr>
   <td>Seletor de Pseudo-classe</td>
   <td>O(s) elemento(s) especificado(s), mas só quando estiverem no estado indicado. Ex: quando se tem cursor do rato sobre eles.</td>
   <td><code>a:hover</code><br>
    Seleciona <code>&lt;a&gt;</code>, mas só quando o cursor está sobre o <em>link</em>.</td>
  </tr>
 </tbody>
</table>

<p>Existem muitos mais seletores para explorar, e pode encontrar uma lista mais detalhada no nosso <a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS/Seletores">Guia de seletores</a>.</p>

<h2 id="Fonte_e_texto">Fonte e texto</h2>

<p>Agora que explorámos as bases do CSS, vamos acrescentar regras e informação ao nosso ficheiro <code>style.css</code> para que o exemplo tenha boa apresentação.</p>

<ol>
 <li>Primeiro, volte atrás e encontre o <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site#Tipo_de_letra">output de Google Fonts</a> que guardou num lugar seguro. Acrescente o elemento {{htmlelement("link")}} no cabeçalho do <code>index.html</code> (entre etiquetas <code>&lt;head&gt;</code> e <code>&lt;/head&gt;</code>).

  <pre class="brush: html notranslate">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
 </li>
 <li>De seguida, apague a regra que tinha no ficheiro <code>style.css</code>. Foi um bom teste, mas a cor vermelha não ficou muito bem.</li>
 <li>Insira as linhas que se seguem, substituindo a linha de substituição pela linha <code>font-family</code> que obteve no site Google Fonts. (<code>font-family</code> indica o nome do tipo de letra). Esta regra estabelece um tamanho e tipo de letra global, em toda a página, já que o elemento <code>&lt;html&gt;</code> é o elemento raiz e todos os elementos aninhados herdam <code>font-size</code> e <code>font-family</code>:
  <pre class="brush: css notranslate">html {
  font-size: 10px; /* px significa 'píxeis': o tamnho da letra base é duma altura de 10 píxeis */
  font-family: placeholder: aqui deve aparecero resto do output do Google fonts
}</pre>

  <div class="note">
  <p><strong>Nota</strong>: num documento CSS, tudo o que esteja entre <code>/*</code> e <code>*/</code> é um <strong>comentário de CSS</strong>, que o navegador ignora quando processa o código. Os comentários servem para escrever notas úteis sobre o que está a fazer.</p>
  </div>
 </li>
 <li>Agora estabelecemos o tamanho da letra para elementos textuais no corpo do HTML: ({{htmlelement("h1")}}, {{htmlelement("li")}}, e {{htmlelement("p")}}). Também vamos centrar o texto dos nossos títulos e especificar altura da linha de texto e espaçamento entre letras no corpo para o tornar mais legível:
  <pre class="brush: css notranslate">h1 {
  font-size: 60px;
  text-align: center;
}

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

<p>Pode ajustar os valores de <code>px</code> conforme achar que fica melhor, mas em geral, o <em>design </em>deve ter esta aparência:</p>

<p><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: 1020px; margin: 0px auto; width: 921px;"></p>

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

<p>Quando escreve CSS, poderá notar que a maior parte do esforço é referente a caixas — configurar o seu tamanho, cor, posição, etc. Pode pensar na maioria dos elementos de HTML da sua página como caixas colocadas umas sobre a 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>Sem surpresa, a disposição de elementos em CSS assenta principalmente num <em>modelo de caixa</em><em>. </em>Cada um dos blocos que ocupa espaço na sua página tem propriedades como:</p>

<ul>
 <li><code>padding</code> (preenchimento) — espaço em volta do elemento (ex: em volta do texto de um parágrafo)</li>
 <li><code>border</code> (contorno) — a linha que fica em torno do preenchimento</li>
 <li><code>margin</code> (margem) — espaço exterior em torno do 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>Nesta secção também vamos usar:</p>

<ul>
 <li><code>width</code> — largura do elemento</li>
 <li><code>background-color</code> — cor de fundo que fica atrás do conteúdo e preenchimento do elemento</li>
 <li><code>color</code> — a cor do conteúdo (geralmente o conteúdo é texto)</li>
 <li><code>text-shadow</code> — sombreado do texto de um elemento</li>
 <li><code>display</code><span> </span>—<span> modo de apresentação do elemento (não se preocupe ainda com detalhes)</span></li>
</ul>

<p>Portanto, vamos começar e acrescentar algum CSS à nossa página! Acrescente as novas regras no fim do ficheiro e não tenha medo de mudar os valores para ver como fica.</p>

<h3 id="Alterar_a_cor_da_página">Alterar a cor da página</h3>

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

<p>Esta regra estabelece uma cor de fundo na página inteira. Mude o código de cor para aquele que escolheu quando <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site#Cor_do_tema">planeou o seu site</a>.</p>

<h3 id="Ordenar_o_corpo">Ordenar o corpo</h3>

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

<p>Agora o elemento {{htmlelement("body")}}. Há várias declarações, então vamos ver uma de cada vez:</p>

<ul>
 <li><code>width: 600px;</code> — Faz com que a largura seja sempre 600 píxeis.</li>
 <li><code>margin: 0 auto;</code> — Quando se dá dois valores a <code>margin</code> ou <code>padding</code>, o primeiro afeta o espaço por cima <strong>e</strong> por baixo do elemento (neste caso, <code>0</code>), e o segundo o espaço à esquerda <strong>e</strong> à direita (<code>auto</code> é um valor especial que divide o espaço existente de forma igual entre a esquerda e a direita). Também pode utilizar um, três ou quatro valores, conforme a documentação da <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">sintaxe de <em>margin</em></a>.</li>
 <li><code>background-color: #FF9500;</code> — como já vimos, estabelece a cor de fundo. Esta é uma tonalidade vermelho alaranjado para o corpo, em vez do azul escuro do elemento {{htmlelement("html")}}, mas esteja à vontade para experimentar outras cores.</li>
 <li><code>padding: 0 20px 20px 20px;</code> — temos quatro valores nesta propriedade, para deixar bastante espaço em volta do conteúdo. Desta vez, fazemos com que não haja preenchimento por cima do elemento e 20 píxeis à esquerda, à direita e por baixo. Os valores estabelecem, por esta ordem, o preenchimento por cima, à direita, por baixo e à esquerda. Tal como a <code>margin</code>, pode usar um, dois ou três valores, conforme a documentação da <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Syntax">sintaxe de <em>padding</em></a>.</li>
 <li><code>border: 5px solid black;</code> — simplesmente, cria um contorno de todos os lados do elemento, com cor preta, a traço cheio (contínuo) e espessura de 5 píxeis.</li>
</ul>

<h3 id="Posicionar_e_estilizar_o_título_da_nossa_página_principal">Posicionar e estilizar o título da nossa página principal</h3>

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

<p>Deve ter notado que há espaço em branco horrível no topo do conteúdo da página. Isto acontece porque o navegador aplica <strong>estilo por omissão </strong>ao elemento {{htmlelement("h1")}} (entre outros), mesmo que não se tenha aplicado qualquer CSS! Embora isso possa parecer má ideia, na prática até uma página sem folha de estilos tem que ter alguma legibilidade. Para nos livrarmos deste espaço, colocamos <code>margin: 0;</code>.</p>

<p>De seguida, colocámos o preenchimento por cima e por baixo a 20 píxeis, e demos ao texto a mesma cor que a cor de fundo do elemento {{htmlelement("html")}}.</p>

<p>Utilizámos uma propriedade interessante, <code>text-shadow</code>, que aplica sombreado ao texto de um elemento. Estes são os quatro valores da mesma:</p>

<ul>
 <li>O primeiro valor em píxeisestabelece a <strong>distância </strong><strong>horizontal</strong> entre a sombra e o texto, ou seja, quanto ela se desvia para a direita. Um valor negativo desvia para a esquerda.</li>
 <li>O segundo valor em píxeis estabelece a <strong>distância vertical</strong> entre a sombra e o texto, ou quanto ela se desvia para baixo. Um valor negativo desvia para cima.</li>
 <li>O terceiro valor em píxeis é o <strong>raio de desfoque</strong> da sombra — quanto maior o valor, mais a sombra ficará esbatida.</li>
 <li>O quarto valor é a cor da sombra.</li>
</ul>

<p>Novamente, tente experimentar os valores para ver como fica!</p>

<h3 id="Centrar_a_imagem">Centrar a imagem</h3>

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

<p>Por fim, vamos centrar a imagem para ficar melhor. Utilizámos o truque de colocar <code>margin: 0 auto</code> como fizemos com o corpo, mas temos que fazer outra coisa. O elemento {{htmlelement("body")}} está ao <strong>nível de bloco</strong>, ou seja, ocupa toda a largura da página e podem ser-lhe aplicados valores de margem, e outros valores de espaçamento. Por outro lado, as imagens são elemento <strong>em linha</strong>, a que não se podem aplicar estes valores. Então, para a margem ser aplicada à imagem, temos que lhe atribuir comportamento ao nível do bloco com <code>display: block;</code>.</p>

<div class="note">
<p><strong>Nota</strong>: Estas instruções assumem que está a usar uma imagem mais pequena que a largura do corpo (600 píxeis). Se for maior, vai transbordar do corpo e ocupar espaço no resto da página. Para retificar isto, pode 1) reduzir a largura da imagem com um programa de <a href="https://pt.wikipedia.org/wiki/Editor_gráfico">edição gŕafica</a>, ou 2) reduzir a imagem com CSS utilizando a propriedade {{cssxref("width")}} no elemento <code>&lt;img&gt;</code> com um valor mais pequeno, como <code>400 px;</code>.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: não se preocupe se ainda não entende <code>display: block;</code> e a distinção entre bloco e em linha (<em>block-level/inline</em>). Irá perceber à medida que estuda o CSS com mais profundidade. Pode descobrir mais sobre os diferentes valores de <em>display</em> na <a href="/pt-PT/docs/Web/CSS/display">página de referência de display</a>.</p>
</div>

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

<p>Se seguiu as instruções nesta página, a sua página deve ter este aspeto (e pode ver <a href="http://mdn.github.io/beginner-html-site-styled/">a 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 ficou preso, pode sempre comparar o seu trabalho com <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">o exemplo terminado no GitHub</a>.</p>

<p>Aqui, mal tocámos na superfície do CSS. Para saber mais, consulte o tópico de <a href="https://developer.mozilla.org/en-US/Learn/CSS">Aprender CSS</a>.</p>

<p>{{PreviousMenuNext("Learn/Comecar_com_a_Web/HTML_basicos", "Learn/Comecar_com_a_Web/Elementar_de_JavaScript", "Learn/Comecar_com_a_Web")}}</p>

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

<ul>
 <li id="Installing_basic_software"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a></li>
 <li id="What_will_your_website_look_like"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Apresentacao_do_meu_site">Qual será a aparência do seu site da Web?</a></li>
 <li id="Dealing_with_files"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a></li>
 <li id="CSS_basics"><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">HTML - Essencial</a></li>
 <li><a href="https://developer.mozilla.org/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a></li>
 <li id="JavaScript_basics"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Elementar_de_JavaScript">JavaScript - Essencial</a></li>
 <li id="Publishing_your_website"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Publicar_o_seu_site_da_Web">Publicar o seu site da Web</a></li>
 <li id="How_the_web_works"><a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Como_funciona_a_Web">Como funciona a Web</a></li>
</ul>