initial commit

4 files changed, 517 insertions, 0 deletions

diff --git a/files/pt-pt/learn/css/estilo_de_texto/index.html b/files/pt-pt/learn/css/estilo_de_texto/index.html
new file mode 100644
index 0000000000..5d00bc90c5
--- /dev/null
+++ b/files/pt-pt/learn/css/estilo_de_texto/index.html
@@ -0,0 +1,136 @@
+---
+title: Estilizar texto
+slug: Learn/CSS/Estilo_de_texto
+tags:
+  - CSS
+  - Hiperligações
+  - Principiante
+  - Texto
+  - Tipos de Letra
+  - letra
+  - lina
+  - listas
+  - modulo
+  - sombra
+  - tipo de letra
+  - tipos de letra da Web
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Com os conceitos básicos da linguagem CSS cobertos, o próximo tópico de CSS para se concentrar será o estilo de texto - uma das coisas mais comuns que irá fazer com CSS. Aqui, nós vamos ver os fundamentos do estilo de texto, incluindo a configuração do tipo de letra, negrito, itálico, espaçamento de linha e letra, sombras e outros recursos de texto. Nós completamos o módulo ao analisar a aplicação de tipos de letra personalizadas para a sua página, e listas de estilo e hiperligações.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
+ <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt>
+ <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt>
+ <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt>
+ <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd>
+</dl>
+
+<h2 id="Avaliações">Avaliações</h2>
+
+<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt>
+ <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd>
+</dl>
+
+<div id="SL_balloon_obj" style="display: block;">
+<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div>
+
+<div id="SL_shadow_translation_result2" style="display: none;"> </div>
+
+<div id="SL_shadow_translator" style="display: none;">
+<div id="SL_planshet">
+<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_Bproviders">
+<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
+</div>
+
+<div id="SL_alert_bbl" style="display: none;">
+<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_alert_cont"> </div>
+</div>
+
+<div id="SL_TB">
+<table id="SL_tables">
+ <tbody>
+  <tr>
+   <td class="SL_td"><input></td>
+   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
+   </td>
+   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_font_patch"> </div>
+
+    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="SL_shadow_translation_result" style=""> </div>
+
+<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_player2"> </div>
+
+<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
+
+<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
+<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<table id="SL_tbl_opt" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><input></td>
+   <td>
+    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
+   </td>
+   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
+   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
diff --git a/files/pt-pt/learn/css/howto/faq_de_css/index.html b/files/pt-pt/learn/css/howto/faq_de_css/index.html
new file mode 100644
index 0000000000..357e271657
--- /dev/null
+++ b/files/pt-pt/learn/css/howto/faq_de_css/index.html
@@ -0,0 +1,229 @@
+---
+title: Perguntas Frequentes sobre CSS
+slug: Learn/CSS/Howto/FAQ_de_CSS
+tags:
+  - CSS
+  - Exemplo
+  - FAQ
+  - Guía
+  - Web
+  - questões
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly">Why doesn't my CSS, which is valid, render correctly?</h2>
+
+<p>Browsers use the <code>DOCTYPE</code> declaration to choose whether to show the document using a mode that is more compatible  with Web standards or with old browser bugs. Using a correct and modern <code>DOCTYPE</code> declaration at the start of your HTML will improve browser standards compliance.</p>
+
+<p>Modern browsers have two main rendering modes:</p>
+
+<ul>
+ <li><em>Quirks Mode</em>: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers. Documents with an incomplete, incorrect, or missing <code>DOCTYPE</code> declaration or a known <code>DOCTYPE</code> declaration in common use before 2001 will be rendered in Quirks Mode.</li>
+ <li><em>Standards Mode</em>: the browser attempts to follow the W3C standards strictly. New HTML pages are expected to be designed for standards-compliant browsers, and as a result, pages with a modern <code>DOCTYPE</code> declaration will be rendered with Standards Mode.</li>
+</ul>
+
+<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p>
+
+<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p>
+
+<pre>&lt;!DOCTYPE html&gt; /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+</pre>
+
+<p>When at all possible, you should just use the HTML5 doctype.</p>
+
+<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">Why doesn't my CSS, which is valid, render at all?</h2>
+
+<p>Here are some possible causes:</p>
+
+<ul>
+ <li>You've got the path to CSS file wrong.</li>
+ <li>To be applied, a CSS stylesheet must be served with a <code>text/css</code> MIME type. If the Web server doesn't serve it with this type, it won't be applied.</li>
+</ul>
+
+<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">What is the difference between <code>id</code> and <code>class</code>?</h2>
+
+<p>HTML elements can have an <code>id</code> and/or <code>class</code> attribute. The <code>id</code> attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The <code>class</code> attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular <code>id</code> and/or <code>class</code> names.</p>
+
+<ul>
+ <li>Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page, or when you currently only have element to style with that style, but you might want to add more later.</li>
+ <li>Use an id-specific style when you need to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.</li>
+</ul>
+
+<p>It is generally recommended to use classes as much as possible, and to use ids only when absolutely necessary for specific uses (like to connect label and form elements or for styling elements that must be semantically unique):</p>
+
+<ul>
+ <li>Using classes makes your styling extensible — even if you only have one element to style with a particular ruleset now, you might want to add more later.</li>
+ <li>Classes allow you to style multiple elements, therefore they can lead to shorter stylesheets, rather than having to write out the same styling information in multiple rules that use id selectors. Shorter stylesheets are more performant.</li>
+ <li>Class selectors have lower <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">specificity</a> than id selectors, so are easier to override if needed.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: See <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> for more information.</p>
+</div>
+
+<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">How do I restore the default value of a property?</h2>
+
+<p>Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property. For example:</p>
+
+<pre class="brush: css">/* Heading default color is black */
+h1 { color: red; }
+h1 { color: black; }</pre>
+
+<p>This has changed with CSS 2; the keyword <a href="/es/CSS/initial" title="initial">initial</a> is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.</p>
+
+<pre class="brush: css">/* Heading default color is black */
+h1 { color: red; }
+h1 { color: initial; }</pre>
+
+<h2 id="Derived_styles" name="Derived_styles">How do I derive one style from another?</h2>
+
+<p>CSS does not exactly allow one style to be defined in terms of another. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). However, assigning multiple classes to a single element can provide the same effect, and <a href="/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a> now provide a way to define style information in one place that can be reused in multiple places.</p>
+
+<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">How do I assign multiple classes to an element?</h2>
+
+<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p>
+
+<pre>&lt;style type="text/css"&gt;
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="news today"&gt;
+... content of today's news ...
+&lt;/div&gt;
+</pre>
+
+<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p>
+
+<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">Why don't my style rules work properly?</h2>
+
+<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p>
+
+<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML elements hierarchy</h3>
+
+<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p>
+
+<pre>.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+&lt;!-- news item text is black, but corporate name is red and in bold --&gt;
+&lt;div class="news"&gt;
+   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
+&lt;/div&gt;
+</pre>
+
+<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p>
+
+<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">Explicitly re-defined style rule</h3>
+
+<p>In CSS stylesheets, order <strong>is</strong> important. If you define a rule and then you re-define the same rule, the last definition is used.</p>
+
+<pre>#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+&lt;!-- most text is in bold, except "GE", which is red and not bold --&gt;
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.</p>
+
+<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">Use of a shorthand property</h3>
+
+<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to their default values. This means that a previous rule for a single attribute could be implicitly overridden.</p>
+
+<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p>
+
+<pre>#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now set to normal */
+}
+</pre>
+
+<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">Use of the <code>*</code> selector</h3>
+
+<p>The <code>*</code> wildcard selector refers to any element, and it has to be used with particular care.</p>
+
+<pre>body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+&lt;div id="section"&gt;
+   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the <code>.stockUp</code> class. So <code>font-weight: bold;</code> applied to the <code>.corpName</code> class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p>
+
+<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p>
+
+<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">Specificity in CSS</h3>
+
+<p>When multiple rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors. The text color of the below {{htmlelement("div")}} will therefore be red.</p>
+
+<pre>div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
+</pre>
+
+<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p>
+
+<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?</h2>
+
+<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They allow use of experimental and non-standard features in browsers without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p>
+
+<p>The use of such properties on production websites is not recommended — they have already created a huge web compatibility mess. For example, many developers only using the <code>-webkit-</code> prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature relying on that property would break in non-webkit-based browsers, completely needlessly. This problem got so bad that other browsers started to implement <code>-webkit-</code> prefixed aliases to improve web compatibility, as specified in the <a href="https://compat.spec.whatwg.org/">Compatibility Living Standard</a>.</p>
+
+<p>In fact most browsers now do not use CSS prefixes when implementing experimental features, insteading implementing those features only on Nightly browser versions or similar.</p>
+
+<p>If you need to use prefixes in your work, you are advised to write your code in a way that uses the prefixed versions first, but then includes a non-prefixed standard version afterwards so it can automatically override the prefixed versions where supported. For example:</p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="property token">-ms-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: For more information on dealing with prefixed properties, see <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">Handling common HTML and CSS problems — Handling CSS prefixes</a> from our <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> module.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: See the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p>
+</div>
+
+<h2 id="How_does_z-index_relate_to_positioning">How does z-index relate to positioning?</h2>
+
+<p>The z-index property specifies the stack order of elements.</p>
+
+<p>An element with a higher z-index/stack order is always rendered in front of an element with a lower z-index/stack order on the screen. Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: For more information, see our <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a> learning article, and in particular the <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning#Introducing_z-index">Introducing z-index</a> section.</p>
+</div>
diff --git a/files/pt-pt/learn/css/howto/index.html b/files/pt-pt/learn/css/howto/index.html
new file mode 100644
index 0000000000..ac198b7ae9
--- /dev/null
+++ b/files/pt-pt/learn/css/howto/index.html
@@ -0,0 +1,93 @@
+---
+title: Utilizar CSS para resolver problemas comuns
+slug: Learn/CSS/Howto
+tags:
+  - Aprendizagem
+  - CSS
+  - Learn
+  - NeedsTranslation
+  - Precisa de Tradução
+  - Principiante
+translation_of: Learn/CSS/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">As seguintes hiperligações apontam para soluções até aos problemas comuns diários que irá precisar de resolver com CSS.</p>
+
+<h2 id="Casos_de_utilização_comuns">Casos de utilização comuns</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Básico">Básico</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li>
+</ul>
+
+<h3 id="CSS_e_texto">CSS e texto</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Caixas_e_layouts">Caixas e <em>layouts</em></h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Técninas_avançadas_e_invulgares">Técninas avançadas e invulgares</h2>
+
+<p>Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.</p>
+
+<h3 id="Geral">Geral</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
+</ul>
+
+<h3 id="Efeitos_avançados">Efeitos avançados</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
+</ul>
+
+<h3 id="Layout"><em>Layout</em></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
+</ul>
+
+<h2 id="Consultar_também">Consultar também</h2>
+
+<p><a href="/pt-PT/docs/Learn/CSS/Howto/FAQ_de_CSS">CSS - Perguntas Frequentes (FAQ)</a> — Uma coleção de pequenas partes de informação, abrangendo uma variedade de tópicos, desde a depuração até à utilização do seletor.</p>
diff --git a/files/pt-pt/learn/css/index.html b/files/pt-pt/learn/css/index.html
new file mode 100644
index 0000000000..eee5fb752a
--- /dev/null
+++ b/files/pt-pt/learn/css/index.html
@@ -0,0 +1,59 @@
+---
+title: 'Aprender a estilizar HTML, utilizando CSS'
+slug: Learn/CSS
+tags:
+  - CSS
+  - Depuração
+  - Estilo
+  - Principiante
+  - Tópico
+  - especificidade
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Folhas de Estilo em Cascata — ou {{glossary("CSS")}} — é a segunda tecnologia que deveria começar a aprender depois de {{glossary("HTML")}}. Considerando que HTML é utilizado para definir a estrutura e semântica do seu conteúdo, CSS é utilizada para estilizar e aplicar. Assim, por exemplo, pode utilizar CSS para alterar o tipo de letra, cor, tamanho e espaçamento de seu conteúdo, dividi-lo em várias colunas, ou adicionar animações e outros elementos decorativos.</p>
+
+<h2 id="Passos_de_aprendizagem">Passos de aprendizagem</h2>
+
+<p>Você deve aprender o básico de HTML antes de tentar qualquer CSS. Recomendamos que você trabalhe primeiro através do nosso módulo de <a href="/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a>. Nesse módulo, você aprenderá sobre:</p>
+
+<ul>
+ <li>CSS, começando com o módulo Introduction to CSS</li>
+ <li>Módulos de HTML mais avancados <a href="/pt-PT/docs/Learn/HTML#Módulos">HTML modules</a></li>
+ <li><a href="/pt-PT/docs/Learn/JavaScript">Javascript</a>, e como utilizá-lo para adicionar funcionalidades dinâmicas às páginas web</li>
+</ul>
+
+<p>Uma vez entendidos os fundamentos do HTML, recomendamos que aprenda HTML e CSS ao mesmo tempo, andando para trás e para a frente entre os dois tópicos. Isto porque HTML é muito mais interessante com CSS, e você não pode realmente aprender CSS sem conhecer HTML.</p>
+
+<p>Antes de iniciar este tópico, deve também estar familiarizado com a utilização de computadores e o uso da web passivamente (ou seja, apenas olhando para ele, consumindo o conteúdo). Você deve ter um ambiente de trabalho básico configurado conforme detalhado em <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Installing_basic_software">Instalar software básico</a>, e entender como criar e gerir arquivos, conforme detalhado em <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/Lidar_com_ficheiros">Lidar com ficheiros</a> - ambos são partes do nosso módulo <a href="/pt-PT/docs/Learn/Comecar_com_a_Web">Primeiros passos na Web</a>.</p>
+
+<p>Recomenda-se que trabalhe através de <a href="/pt-PT/docs/Learn/Comecar_com_a_Web">Primeiros passos na Web</a> antes de prosseguir com este tópico. No entanto, fazê-lo não é absolutamente necessário, pois muito do que é abordado no artigo <a href="/pt-PT/docs/Learn/Comecar_com_a_Web/CSS_basico">CSS - Essencial</a> também é abordado no nosso módulo CSS first steps, embora com muito mais detalhe.</p>
+
+<h2 id="Módulos">Módulos</h2>
+
+<p>Este tópico contém os seguintes módulos, numa ordem sugerida para trabalhar com eles. Deveria definitivamente começar com o primeiro .</p>
+
+<dl>
+ <dt><a href="/pt-PT/docs/Learn/CSS/Introduction_to_CSS">Introdução à CSS</a></dt>
+ <dd>This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd>
+ <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_texto">Estilio de texto</a></dt>
+ <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd>
+ <dt><a href="/pt-PT/docs/Learn/CSS/Estilo_de_caixas">Estilio de caixas</a></dt>
+ <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such drop shadows and filters on boxes.</dd>
+ <dt><a href="/pt-PT/docs/Learn/CSS/Disposição_CSS">Disposição de CSS</a></dt>
+ <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.</dd>
+ <dt>Desenho responsivo (TBD)</dt>
+ <dd>Com tantos tipos diferentes de dispositivos capazes de navegar na Web nestes dias, o <a href="/pt-PT/docs/Web/Apps/Progressiva/Responsivo">desenho da <em>Web</em> responsivo </a>(RWD) tornou-se uma habilidade básica de desenvolvimento da <em>Web</em>. Este módulo irá abranger os princípios básicos e as ferramentas de RWD, explicar como aplicar CSS diferentes em um documento, dependendo das funcionalidades do dispositivo, como largura, orientação e resolução do ecrã, e explorar as tecnologias disponíveis para servir diferentes vídeos e imagens dependendo de tais funcionalidades.</dd>
+</dl>
+
+<h2 id="Resolver_problemas_de_CSS_comuns">Resolver problemas de CSS comuns</h2>
+
+<p><a href="/pt-PT/docs/Learn/CSS/Howto">Utilizar CSS para resolver problemas comuns,</a> fornece hioperligações para secções de conteúdo explicando como utilizar o CSS para resolver problemas muito comuns quando criar uma página da Web .</p>
+
+<h2 id="Consulte_também">Consulte também</h2>
+
+<dl>
+ <dt><a href="/pt-PT/docs/Web/CSS">CSS na MDN</a></dt>
+ <dd>O ponto de entrada principal para a documentação de CSS na MDN, onde irá encontrar uma documentação de referência detalhada para todas as funcionalidades as linguagem CSS. Quer saber todos os valores que uma propriedade pode ter? Este é um bom lugar para ir.</dd>
+</dl>