---
title: 'CSS: Folhas de Estilo em Cascata'
slug: Web/CSS
tags:
  - Apresentação
  - CSS
  - Desenho
  - Design
  - Disposição
  - Estilos
  - Folhas de Estilo em Cascata
  - Folhas de estilo
  - Landing
  - Referencia
  - 'l10n:prioridade'
translation_of: Web/CSS
---
<div>{{CSSRef}}</div>

<p class="summary"><span class="seoSummary"><strong>Folhas de Estilo em Cascata (CSS - Cascading Style Sheets</strong>) é uma linguagem de <a href="/pt-PT/docs/Web/API/Folha_de_estilo">folha de estilo</a> utilizada para descrever a apresentação de um documento escrito em <a href="/pt-PT/docs/Web/HTML" title="HyperText Markup Language">HTML</a> or <a href="/pt-PT/docs/Introducao_a_XML">XML</a> (incluindo dialetos de XML, tais como <a href="/pt-PT/docs/Web/SVG">SVG</a>, <a href="/pt-PT/docs/Web/MathML">MathML</a> ou </span> {{Glossary("XHTML", "", 1)}})<span class="seoSummary">. CSS descreve como os elementos deverão ser renderizados no ecrã, no papel, na fala, ou em outra média.</span></p>

<p>CSS é uma das principais linguagens da Web aberta e está estandardizada nos navegadores de acordo com a <a class="external" href="http://w3.org/Style/CSS/#specs">especificação W3C</a>. Desenvolvida em níveis, CSS1 está agora obsoleta, CSS2.1 é a recomendação, e <a href="/pt-PT/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, agora divida em pequenos módulos, está a progredir a caminho da estandardização</p>

<section id="sect1">
<ul class="card-grid">
 <li><span>Introdução a CSS</span>

  <p>Se é novo no desenvolvimento Web, certifique-se que lê o nosso artigo de <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a> para saber o que é CSS e como utilizar.</p>
 </li>
 <li><span>Tutoriais de CSS</span>
  <p>A nossa <a href="/pt-PT/docs/Learn/CSS">área de aprendizagem de CSS</a> contém uma grande quantidade de tutoriais para levá-lo do nível de principiante até à proficiência, abrangendo todos os conteúdos essenciais.</p>
 </li>
 <li><span>Referência de CSS</span>
  <p>A nossa <a href="/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS">referência exaustiva de CSS </a>para os programadores da Web que descreve cada propriedade e conceito de CSS.</p>
 </li>
</ul>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Tutoriais">Tutoriais</h2>

<p>A nossa <a href="/pt-PT/docs/Learn/CSS">Área de Aprendizagem de CSS </a>apresenta múltiplos módulos que ensinam CSS desde o início  — não é necessário conhecimento prévio.</p>

<dl>
 <dt><a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS">Introdução ao CSS</a></dt>
 <dd>Este módulo permite-lhe começar com os básicos de como o CSS funciona, incluindo selectores e propriedades, escrever regras CSS, aplicar CSS a HTML, como especificar comprimento, cor e outras unidades em CSS, cascata e herança, modelos básicos de caixa e depuração de CSS.</dd>
 <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_texto">Estilizar texto</a></dt>
 <dd>Aqui aprendemos os fundamentos do estilo do texto, incluindo a definição da fonte, negrito e itálico, espaçamento entre linhas e letras, e sombras e outras características do texto. Nós terminamos o módulo, aplicando fontes personalizadas à sua página, e estilizando listas e links.</dd>
 <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_caixas">Estilizar caixas</a></dt>
 <dd>A seguir, focamos em estilizar caixas, um dos passos fundamentais para a criação de uma página web. Neste módulo, recapitulamos o modelo da caixa e depois aprendemos a controlar a disposição das caixas, definindo preenchimentos, bordas e margens, cores de fundo personalizadas, imagens e outras características, bem como características mais avancadas como sombras e filtros nas caixas.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">Disposição de CSS (<em>layout</em>)</a></dt>
 <dd>Até agora, já analisámos os fundamentos do CSS, como estilizar os textos, e como estilizar e manipular as caixas que o seu conteúdo contém. Agora é altura de ver como colocar as suas caixas no lugar certo em relação ao <em>{{Glossary("layout viewport", "viewport")}}</em>, e umas às outras. Cobrimos os pré-requisitos necessários para que possa agora mergulhar profundamente no layout do CSS, observando diferentes configurações de visualização, métodos tradicionais de layout envolvendo <em>float </em>e posicionamento, e novas ferramentas de posicionamento como o <em>flexbox</em>.</dd>
</dl>
</div>

<div class="section">
<h2 class="Tools" id="Referência">Referência</h2>

<ul>
 <li><a href="https://developer.mozilla.org/pt-PT/docs/Web/CSS/Refer%C3%AAncia_CSS">CSS - Referência</a>: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.</li>
 <li>CSS key concepts:
  <ul>
   <li>The <a href="/en-US/docs/Web/CSS/Syntax">syntax and forms of the language</a></li>
   <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a>, <a href="/en-US/docs/Web/CSS/Inheritance">inheritance</a> and <a href="/en-US/docs/Web/CSS/Cascade">the Cascade</a></li>
   <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a> and <a href="/en-US/docs/Web/CSS/margin_collapsing">margin collapse</a></li>
   <li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/Web/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li>
   <li><a href="/en-US/docs/Web/CSS/initial_value">Initial</a>, <a href="/en-US/docs/Web/CSS/computed_value">computed</a>, <a href="/en-US/docs/Web/CSS/used_value">used</a>, and <a href="/en-US/docs/Web/CSS/actual_value">actual</a> values</li>
   <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS shorthand properties</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li>
  </ul>
 </li>
</ul>

<h2 class="Tools" id="Cookbook">Cookbook</h2>

<p>The <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a> aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.</p>

<h2 class="Tools" id="Ferramentas_para_o_desenvolvimento_de_CSS">Ferramentas para o desenvolvimento de CSS</h2>

<ul>
 <li>You can use the <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> to check if your CSS is valid. This is an invaluable debugging tool.</li>
 <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> lets you view and edit a page's live CSS via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li>
 <li>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> for Firefox lets you track and edit live CSS on watched sites.</li>
 <li>The Web community has created various other <a href="/en-US/docs/Web/CSS/Tools">miscellaneous CSS tools</a> for you to use.</li>
</ul>

<h2 id="Erros_de_metadados">Erros de metadados</h2>

<ul>
 <li>Firefox: {{bug(1323667)}}</li>
</ul>
</div>
</div>
</section>

<h2 id="Consultar_também">Consultar também:</h2>

<ul>
 <li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a>: Get a creative boost by exploring examples of the latest CSS technologies in action.</li>
 <li>Web languages to which CSS is often applied: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a>, and <a href="/en-US/docs/XML">XML</a>.</li>
 <li>Mozilla technologies that make extensive use of CSS: <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a>, and <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Extensions">extensions</a> and <a href="/en-US/Add-ons/Themes">themes</a>.</li>
</ul>