unslug pl: move

23 files changed, 2373 insertions, 0 deletions

diff --git a/files/pl/learn/common_questions/jak_dziala_internet/index.html b/files/pl/learn/common_questions/how_does_the_internet_work/index.html
index 1ee3d15096..1ee3d15096 100644
--- a/files/pl/learn/common_questions/jak_dziala_internet/index.html
+++ b/files/pl/learn/common_questions/how_does_the_internet_work/index.html
diff --git a/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..f100424b2f
--- /dev/null
+++ b/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,97 @@
+---
+title: Kaskadowość i dziedziczenie
+slug: Web/CSS/Na_początek/Kaskadowość_i_dziedziczenie
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
+---
+<p>
+</p><p>Ta strona tłumaczy jak arkusze stylów oddziaływują w kaskadzie, oraz jak elementy dziedziczą style od swoich rodziców.
+</p><p>Nauczysz się zmieniać styl wielu elementów dokumentu jednym ruchem dzięki dziedziczeniu.
+</p>
+<h3 id="Informacja:_Kaskadowo.C5.9B.C4.87_i_dziedziczenie" name="Informacja:_Kaskadowo.C5.9B.C4.87_i_dziedziczenie"> Informacja: Kaskadowość i dziedziczenie </h3>
+<p>Ostateczny styl elementu może być określony w wielu różnych miejscach, które mogą na siebie oddziaływać w złożony sposób.
+Złożone interakcje czynią CSS potężnym, ale także mogą uczynić go niezrozumiałym i trudnym do debugowania.
+</p><p>Trzy główne źródła informacji o stylu tworzą kaskadę.
+Są to:
+</p>
+<ul><li>Domyślny styl przeglądarki dla danego języka znaczników
+</li><li>Styl określony przez użytkownika czytającego stronę
+</li><li>Styl podpięty do dokumentu przez jego autora
+</li></ul>
+<p>Styl użytkownika modyfikuje domyślny styl przeglądarki.
+Styl autora dokumentu modyfikuje ten styl jeszcze bardziej.
+W tym kursie Ty jesteś autorem przykładowego dokumentu i pracujesz tylko ze stylem autora.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Kiedy czytasz ten dokument w przeglądarce Mozilla, część stylu, który widzisz, pochodzi z domyślnego stylu przeglądarki dla HTML-a.
+<p>Część tego stylu pochodzi z Twoich ustawień przeglądarki w Opcjach lub z pliku <code>userContent.css</code> w profilu przeglądarki.
+</p><p>Część tego stylu pochodzi z arkusza stylów podpiętego do tego dokumentu przez serwer wiki.
+</p>
+</td></tr></tbody></table>
+<p>Kiedy otwierasz przykładowy dokument w swojej przeglądarce, elementy STRONG są pogrubione w stosunku do reszty tekstu. Dzieje się tak, ponieważ zostało to ustawione w domyślnym stylu przeglądarki dla HTML-a.
+</p><p>Elementy STRONG są czerwone. To ustawienie pochodzi z Twojego arkusza stylów.
+</p><p>Elementy STRONG dziedziczą też większość ustawień stylu elementu P, ponieważ są jego dziećmi. W ten sam sposób element P dziedziczy wiele ustawień ze stylu elementu BODY.
+</p><p>Dla stylów w kaskadzie najważniejsze są style autora strony, potem czytelnika, a na końcu ustawienia domyślne przeglądarki.
+</p><p>Dla dziedziczonych stylów własne style ich dzieci mają wyższy priorytet od stylu dziedziczonego po rodzicu.
+</p><p>Nie są to jedyne istniejące priorytety. Dalsze strony tego kursu wyjaśnią więcej.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> CSS daje też czytelnikowi możliwość nadpisania stylów autora dokumentu przez użycie słowa kluczowego <code>!important</code>.
+<p>Oznacza to, że jako autor dokumentu, nie możesz nigdy dokładnie przewidzieć, co czytelnicy zobaczą.
+</p><p>Jeżeli chcesz poznać wszystkie szczegóły kaskadowości i dziedziczenia, zobacz <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Przypisywanie wartości własności, Kaskadowość oraz dziedziczenie</a> w specyfikacji CSS.
+</p>
+</td></tr></tbody></table>
+<h3 id="Zadanie:_U.C5.BCywanie_dziedziczenia" name="Zadanie:_U.C5.BCywanie_dziedziczenia"> Zadanie: Używanie dziedziczenia </h3>
+<p>Wyedytuj Twój przykładowy plik CSS.
+</p><p>Dodaj tę linię poprzez skopiowanie i wklejenie jej.
+Nie ma żadnego znaczenia, czy dodasz ją pod czy nad linią, która już tam jest.
+Jednakże dodawanie jej na górze jest bardziej logiczne, ponieważ w Twoim dokumencie element P jest rodzicem elementu STRONG:
+</p>
+<pre>p {color: blue; text-decoration: underline;}
+</pre>
+<p>Teraz odśwież okno przeglądarki, aby obejrzeć efekt na przykładowym dokumencie.
+Podkreślenie wpłynęło na cały tekst paragrafu, włączając w to początkowe litery.
+Elementy STRONG dziedziczyły styl podkreślenia po swoim rodzicu, elemencie P.
+</p><p>Ale elementy STRONG nadal są czerwone. Kolor czerwony jest ich własnym stylem, ma zatem wyższy priorytet niż niebieski kolor ich rodzica, elementu P.
+</p>
+<table>
+<tbody><tr>
+<td>
+<table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;">
+<caption>Przed
+</caption><tbody><tr>
+<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+</td><td>
+<table style="border: 2px outset #36b; padding: 1em;">
+<caption>Po
+</caption><tbody><tr>
+<td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> Zmień swój arkusz stylów, aby tylko czerwone litery były podkreślone:
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.
+</p><p>Twój przykładowy arkusz stylów opisuje style dla znaczników <code>P</code> oraz <code>STRONG</code>,
+zmieniając styl odpowiednich elementów w Twoim dokumencie.
+Następna strona opisuje, jak określić styl w bardziej selektywny sposób:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Selektory">Selektory</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "it": "it/Conoscere_i_CSS/Cascata_ed_ereditariet\u00e0", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a", "zh-cn": "cn/CSS/Getting_Started/Cascading_and_inheritance" } ) }}
diff --git a/files/pl/learn/css/building_blocks/index.html b/files/pl/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..d8edcc96fb
--- /dev/null
+++ b/files/pl/learn/css/building_blocks/index.html
@@ -0,0 +1,71 @@
+---
+title: Bloki
+slug: Web/CSS/Na_początek/Bloki
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Building_blocks
+translation_of_original: Web/Guide/CSS/Getting_started/Boxes
+---
+<p> </p>
+<p>Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.</p>
+<p>W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.</p>
+<h3 id="Informacja:_Bloki" name="Informacja:_Bloki">Informacja: Bloki</h3>
+<p>Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.</p>
+<p>W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.</p>
+<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(238, 238, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Jasny szary wskazuje części układu strony.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(255, 255, 255);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody>
+</table>
+<p>Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.</p>
+<p>Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.</p>
+<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(221, 238, 221);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Ten element ma zielone tło.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(238, 255, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody>
+</table>
+<h4 id="Ramki" name="Ramki">Ramki</h4>
+<p>Możesz użyć ramek do dekoracji elementów liniami lub blokami.</p>
+<p>Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności <code>border</code>. Określ szerokość (zwykle w pikselach), styl i kolor.</p>
+<p>Istnieją następujące style:</p>
+<table style="margin-left: 2em;"> <tbody> <tr> <td style="width: 6em;"> <div style="border: 2px solid rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>solid</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dotted rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dotted</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dashed rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dashed</code></div> </td> <td style="width: 6em;"> <div style="border: 4px double rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>double</code></div> </td> </tr> <tr> <td style="width: 6em;"> <div style="border: 2px inset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>inset</code></div> </td> <td style="width: 6em;"> <div style="border: 2px outset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>outset</code></div> </td> <td style="width: 6em;"> <div style="border: 4px ridge rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>ridge</code></div> </td> <td style="width: 6em;"> <div style="border: 4px groove rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>groove</code></div> </td> </tr> </tbody>
+</table>
+<p>Możesz także ustawić styl na <code>none</code> lub <code>hidden</code>, aby usunąć ramkę, lub ustawić kolor na <code>transparent</code>, aby ustawić przezroczystą ramkę bez dotykania układu.</p>
+<p>Aby określić osobno każdą krawędź ramki, użyj własności: <code>border-top</code> (góra), <code>border-right</code> (prawo), <code>border-bottom</code> (dół), <code>border-left</code> (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.</p>
+<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykłady </caption> <tbody> <tr> <td>Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka: <div style="width: 40em;"> <p>h3 {</p> <pre class="eval"> border-top: 4px solid #7c7; /* mid green */
+ background-color: #efe;     /* pale green */
+ color: #050;                /* dark green */
+ }
+</pre> </div> <p>Wygląda to tak:</p> <table> <tbody> <tr> <td> <p style="border-top: 4px solid rgb(119, 204, 119); font-size: 133%; font-weight: bold; background-color: rgb(238, 255, 238); color: rgb(0, 85, 0); padding-right: 6em;">Nagłówek w dobrym stylu</p> </td> </tr> </tbody> </table> <p>Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:</p> <div style="width: 30em;"> <p>img {border: 2px solid #ccc;}</p> </div> <p>Rezultat jest następujący:</p> <table> <tbody> <tr> <td>Obrazek:</td> <td style="border: 2px solid rgb(204, 204, 204);"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2212/=Blue-rule.png"></td> </tr> </tbody> </table> </td> </tr> </tbody>
+</table>
+<h4 id="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne" name="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne">Marginesy zewnętrzne i wewnętrzne</h4>
+<p>Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.</p>
+<p>Użyj własności <code>margin</code> lub <code>padding</code>, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.</p>
+<p>Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).</p>
+<p>Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.</p>
+<p>Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.</p>
+<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykład </caption> <tbody> <tr> <td>Ta reguła oznacza akapity z klasą <code>remark</code> poprzez dodanie czerwonej ramki wokół nich. <p>Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.</p> <p>Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:</p> <div style="width: 30em;"> <p>p.remark {</p> <pre class="eval"> border: 2px solid red;
+ padding: 4px;
+ margin-left: 24px;
+ }
+</pre> </div> <p>Wynik wygląda tak:</p> <table> <tbody> <tr> <td> <p>Oto zwykły akapit.</p> <p style="border: 2px solid red; margin: 0px 0px 0px 24px; padding: 4px 6em 4px 4px;">A to akapit z klasą <code>remark</code>.</p> </td> </tr> </tbody> </table> </td> </tr> </tbody>
+</table>
+<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(244, 244, 244); margin-bottom: 1em;"> <caption>Więcej szczegółów </caption> <tbody> <tr> <td>Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany. <p>Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.</p> <p>Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.</p> <p>Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/box.html">model blokowy</a>.</p> </td> </tr> </tbody>
+</table>
+<h3 id="Zadanie:_Dodawanie_ramek" name="Zadanie:_Dodawanie_ramek">Zadanie: Dodawanie ramek</h3>
+<p>Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:</p>
+<div style="width: 30em;">
+<p>h3 {border-top: 1px solid gray;}</p>
+</div>
+<p>Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:</p>
+<div style="width: 30em;">
+<p>li {</p>
+<pre class="eval"> list-style: lower-roman;
+ margin-bottom: 8px;
+ }
+</pre>
+</div>
+<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p>
+<table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) Oceany</p> <ul style="list-style-type: disc;"> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Arktyczny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Atlantycki</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Spokojny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Indyjski</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Południowy</li> </ul> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>1: </strong>Lorem ipsum</p> <p><strong>2: </strong>Dolor sit</p> <p><strong>3: </strong>Amet consectetuer</p> <p><strong>4: </strong>Magna aliquam</p> <p><strong>5: </strong>Autem veleum</p> </td> </tr> </tbody>
+</table>
+<p> </p>
+<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Wyzwanie </caption> <tbody> <tr> <td>Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu: <table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) The oceans</p> <div style="border: 12px solid rgb(102, 153, 187); padding-left: 1em;"> <ul style="list-style-type: lower-roman;"> <li style="margin-bottom: 8px;">Arctic</li> <li style="margin-bottom: 8px;">Atlantic</li> <li style="margin-bottom: 8px;">Pacific</li> <li style="margin-bottom: 8px;">Indian</li> <li style="margin-bottom: 8px;">Southern</li> </ul> </div> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>. . .</strong></p> </td> </tr> </tbody> </table> <p>(Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)</p> </td> </tr> </tbody>
+</table>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4>
+<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a href="/Talk:pl/CSS/Na_pocz%C4%85tek/Bloki" title="Talk:pl/CSS/Na_początek/Bloki">Dyskusji</a>.</p>
+<p>Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Uk%C5%82ad" title="pl/CSS/Na_początek/Układ">Układ</a></strong></p>
+<p>{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "fr": "fr/CSS/Premiers_pas/Bo\u00eetes", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}</p>
diff --git a/files/pl/learn/css/building_blocks/selectors/index.html b/files/pl/learn/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..bf3edca6f9
--- /dev/null
+++ b/files/pl/learn/css/building_blocks/selectors/index.html
@@ -0,0 +1,260 @@
+---
+title: Selektory
+slug: Web/CSS/Na_początek/Selektory
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Building_blocks/Selectors
+translation_of_original: Web/Guide/CSS/Getting_started/Selectors
+---
+<p>Ta strona jest częścią piątą kursu <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a>. Wyjaśnia ona jak możesz używać stylów selektywnie, i jak różne typy selektorów mają różne priorytety. Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.</p>
+
+<h3 id="Informacja:_Selektory" name="Informacja:_Selektory">Informacja: Selektory</h3>
+
+<p>CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:</p>
+
+<div style="width: 30em;">
+<pre>strong {
+   color: red;
+}
+</pre>
+</div>
+
+<p>W terminologii CSS cała ta linia jest <em>regułą</em>. Ta reguła zaczyna się od <code>strong</code>, który jest <em>selektorem</em>. Wybiera, które elementy w drzewie DOM będą używały tej reguły.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>Więcej szczegółów</strong><br>
+     Część wewnątrz nawiasów klamrowych nazywamy się <em>deklaracją</em>.</p>
+
+    <p>Słowo kluczowe <code>color</code> jest <em>własnością</em>, a <code>red</code> jest <em>wartością</em>.</p>
+
+    <p>Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.</p>
+
+    <p>Ten kurs odwołuje się do selektorów takich jak <code>strong</code> jako selektorów <em>znaczników</em>. Specyfikacja CSS odwołuje się do nich jako selektorów <em>typu</em>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.</p>
+
+<p>Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.</p>
+
+<p>Dwa atrybuty posiadają specjalny status w CSS. Są to <code>class</code> oraz <code>id</code>.</p>
+
+<h3 id="Selektor_class">Selektor class</h3>
+
+<p>Użycie atrybutu <code>class</code> w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.</p>
+
+<p>W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.</p>
+
+<h3 id="Selektor_ID">Selektor ID</h3>
+
+<p>Użycie atrybutu <code>id</code> w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie <code>id</code> mu nadasz. Nazwa <code>id</code> musi być unikalna w dokumencie.</p>
+
+<p>W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym <code>id</code>, kiedy używasz go w selektorze.</p>
+
+<table style="background-color: #ffffee; border: 1px solid #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>Przykłady</strong><br>
+     Ten znacznik HTML posiada zarówno atrybut <code>class</code>, jak i <code>id</code>:</p>
+
+    <div style="width: 30em;">
+    <pre>
+&lt;p class="key" id="principal"&gt;
+</pre>
+    </div>
+
+    <p>Id, <code>principal</code>, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy <code>key</code>.</p>
+
+    <p>W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy <code>key</code> staną się zielone. (Nie wszystkie muszą być elementami <small>P</small>.)</p>
+
+    <div style="width: 30em;">
+    <pre>
+.key {
+   color: green;
+}
+</pre>
+    </div>
+
+    <p>Ta reguła powoduje, że jeden element o id <code>principal</code> zostanie pogrubiony:</p>
+
+    <div style="width: 30em;">
+    <pre>
+#principal {
+   font-weight: bolder;
+}
+</pre>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
+ <caption>Więcej szczegółów</caption>
+ <tbody>
+  <tr>
+   <td>Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi.
+    <p>Na przykład selektor <code>.key</code> wybiera wszystkie elementy, które mają klasę o nazwie <code>key</code>. Selektor <code>p.key</code> wybiera tylko elementy P, które mają klasę o nazwie <code>key</code>.</p>
+
+    <p>Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, <code>class</code> i <code>id</code>. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor <code>{{ mediawiki.external('type=button') }}</code> wybiera wszystkie elementy, które mają atrybut <code>type</code> o wartości <code>button</code>.</p>
+
+    <p>W dalszej części kursu (<a href="/pl/CSS/Na_pocz%C4%85tek/Tabele" title="pl/CSS/Na_początek/Tabele">Tabele</a>) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.</p>
+
+    <p>Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a> w specyfikacji CSS.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.</p>
+
+<p>Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.</p>
+
+<h3 id="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id" name="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id">Zadanie: Używanie selektorów class i id</h3>
+
+<p>1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.<br>
+ 2. Następnie dodaj atrybuty <strong>id</strong> i <strong>class</strong> do pierwszej kopii, a potem <strong>id</strong> do drugiej:</p>
+
+<div style="width: 48em; color: gray;">
+<pre><code>&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="first"&gt;
+      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+    &lt;p id="second"&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html</code></pre>
+</div>
+
+<p>Teraz wyedytuj swój plik CSS. Zamień całą treść na:</p>
+
+<div style="width: 40em;">
+<pre><code>strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }</code></pre>
+</div>
+
+<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.</p>
+
+<p>Selektory klas <code>.carrot</code> oraz <code>.spinach</code> mają priorytety nad selektorem znaczników <code>strong</code>.</p>
+
+<p>Selektor id <code>#first</code> ma priorytet nad selektorami klas i znaczników.</p>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;">
+ <caption>Wyzwanie</caption>
+ <tbody>
+  <tr>
+   <td>Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski:
+    <table style="border: 2px outset #3366bb; padding: 1em;">
+     <tbody>
+      <tr>
+       <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+      </tr>
+      <tr>
+       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:</p>
+
+    <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+     <tbody>
+      <tr>
+       <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+      </tr>
+      <tr>
+       <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Zadanie_użycie_pseudo_selectorów">Zadanie: użycie pseudo selectorów</h2>
+
+<ol>
+ <li>Utwórz plik HTML z następują treścią:
+  <pre><code>&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+ </li>
+ <li>Edytuj plik CSS. Zamień jego treść na:
+  <pre><code>a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}</code></pre>
+ </li>
+ <li>Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt):
+  <table>
+   <tbody>
+    <tr>
+     <td>Go to our <a href="https://developer.mozilla.org/pl/docs/Web/CSS/Na_pocz%C4%85tek/Selektory$edit#" title="Home page">Home page</a></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4>
+
+<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a href="/Talk:pl/CSS/Na_pocz%C4%85tek/Selektory" title="Talk:pl/CSS/Na_początek/Selektory">Dyskusji</a>.</p>
+
+<p>Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Czytelny_CSS" title="pl/CSS/Na_początek/Czytelny_CSS">Czytelny CSS</a></strong></p>
+
+<p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "it": "it/Conoscere_i_CSS/I_Selettori", "ja": "ja/CSS/Getting_Started/Selectors", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}</p>
diff --git a/files/pl/learn/css/building_blocks/styling_tables/index.html b/files/pl/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..3e09737217
--- /dev/null
+++ b/files/pl/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,597 @@
+---
+title: Tabele
+slug: Web/CSS/Na_początek/Tables
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+translation_of_original: Web/Guide/CSS/Getting_started/Tables
+---
+<p> </p>
+<p>Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.</p>
+<p>Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.</p>
+<h3 id="Informacja:_Wi.C4.99cej_o_selektorach" name="Informacja:_Wi.C4.99cej_o_selektorach">Informacja: Więcej o selektorach</h3>
+<p>CSS daje wiele sposobów na wybranie elementów, bazując na ich wzajemnych relacjach. Możesz ich użyć, aby stworzyć bardziej dokładne selektory.</p>
+<p>Poniżej znajduje się podsumowanie selektorów bazujące na ich wzajemnych relacjach:</p>
+<table style="margin-left: 2em;">
+  <tbody>
+    <tr>
+      <td style="width: 10em;"><strong>Selektor</strong></td>
+      <td><strong>Wybiera</strong></td>
+    </tr>
+    <tr>
+      <td><code>A E</code></td>
+      <td>Dowolny element E, który jest <b>potomkiem</b> elementu A (to znaczy jest dzieckiem albo dzieckiem dziecka, <i>itp</i>.))</td>
+    </tr>
+    <tr>
+      <td><code>A &gt; E</code></td>
+      <td>Dowolny element E, który jest dzieckiem elementu A</td>
+    </tr>
+    <tr>
+      <td><code>E:first-child</code></td>
+      <td>Dowolny element E, który jest pierwszym dzieckiem swojego rodzica</td>
+    </tr>
+    <tr>
+      <td><code>B + E</code></td>
+      <td>Dowolny element E, który jest następnym z <i>rodzeństwa</i> elementu B (to znaczy: następnym dzieckiem tego samego rodzica)</td>
+    </tr>
+  </tbody>
+</table>
+<p>Możesz łączyć te selektory w złożone relacje.</p>
+<p>Możesz też użyć symbolu <code>*</code> (gwiazdka), który znaczy "dowolny element".</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+  <caption>
+    Przykład</caption>
+  <tbody>
+    <tr>
+      <td>Tabela HTML posiada atrybut <code>id</code>, ale jej wiersze i komórki nie posiadają własnych identyfikatorów:
+        <div style="width: 30em;">
+          <p>&lt;TABLE id="data-table-1"&gt; ... &lt;TR&gt; &lt;TD&gt;Prefiks&lt;/TD&gt; &lt;TD&gt;0001&lt;/TD&gt; &lt;TD&gt;domyślnie&lt;/TD&gt; &lt;/TR&gt; ...</p>
+        </div>
+        <p>Poniższe reguły powodują, że pierwsza komórka w każdym wierszu jest pogrubiona, natomiast druga używa kroju monospace. Dotyczą one tylko jednej, określonej tabeli w dokumencie:</p>
+        <div style="width: 45em;">
+          <ol>
+            <li>data-table-1 td:first-child {font-weight: bolder;}</li>
+            <li>data-table-1 td:first-child + td {font-family: monospace;}</li>
+          </ol>
+        </div>
+        <p>Wygląda to tak:</p>
+        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+          <tbody>
+            <tr>
+              <td>
+                <table style="width: 18em; margin-right: 2em;">
+                  <tbody>
+                    <tr>
+                      <td><strong>Prefiks</strong></td>
+                      <td>&lt;tt&gt;0001&lt;/tt&gt;</td>
+                      <td>domyślnie</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+  <caption>
+    Więcej szczegółów</caption>
+  <tbody>
+    <tr>
+      <td>Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet.
+        <p>Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu <code>class</code> lub <code>id</code> w wielu znacznikach dokumentu. Zamiast tego logika zostaje przeniesiona na CSS.</p>
+        <p>W dużych projektach, gdzie prędkość ma duże znaczenie, możesz sprawić, że twój arkusz stylów będzie działał szybciej, poprzez unikanie złożonych reguł, które zależą od relacji między elementami.</p>
+        <p>Aby dowiedzieć się więcej o selektorach, zajrzyj do specyfikacji CSS na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a>.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Informacja:_Tabele" name="Informacja:_Tabele">Informacja: Tabele</h3>
+<p>Tabela układa informacje w prostokątną siatkę. Niektóre tabele mogą być skomplikowane, a różne przeglądarki mogą pokazywać różne wyniki.</p>
+<p>Kiedy tworzysz swój dokument, użyj tabel do wyrażenia relacji między elementami informacji. Wówczas nie ma znaczenia, jeśli różne przeglądarki wyświetlą je w trochę inny sposób, ponieważ przekaz pozostanie jasny.</p>
+<p>Nie używaj tabel w sposób, do którego nie zostały przeznaczone, na przykład aby tworzyć przy ich pomocy układ wizualny. Techniki opisane na poprzedniej stronie tego kursu (<a href="pl/CSS/Na_pocz%c4%85tek/Uk%c5%82ad">Układ</a>) nadają się do tego znacznie lepiej.</p>
+<h4 id="Struktura_tabeli" name="Struktura_tabeli">Struktura tabeli</h4>
+<p>W tabeli każdy kawałek informacji jest wyświetlany w <i>komórce</i>.</p>
+<p>Komórki wyświetlane w jednej linii tworzą <i>wiersz</i>.</p>
+<p>W niektórych tabelach wiersze mogą być grupowane. Specjalna grupa wierszy, która znajduje się na górze tabeli, nazywa się <i>nagłówkiem</i>. Specjalna grupa wierszy znajdująca się na dole tabeli nazywa się <i>stopką</i>. Główne wiersze w tabeli tworzą jej <i>ciało</i> i one również mogą być łączone w grupy.</p>
+<p>Komórki ułożone w pionowej linii tworzą <i>kolumnę</i>, ale użyteczność kolumn w tabelach CSS jest ograniczona.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Przykład</caption>
+  <tbody>
+    <tr>
+      <td>Tabela selektorów znajdująca się na górze tej strony posiada dziesięć komórek i pięć wierszy.
+        <p>Pierwszy wiersz jest nagłówkiem. Kolejne cztery są ciałem tabeli. Nie posiada ona stopki.</p>
+        <p>Ma natomiast dwie kolumny.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p><br>
+  Ten kurs omawia tylko proste tabele, dla których wynik jest przewidywalny. W prostej tabeli każda komórka zajmuje miejsce w jednym wierszu i jednej kolumnie. Możesz skorzystać z CSS-u do złożonych tabel, gdzie komórki rozciągają się na więcej niż jeden wiersz lub kolumnę, ale tego typu tabele wykraczają poza zakres tego kursu.</p>
+<h4 id="Ramki" name="Ramki">Ramki</h4>
+<p>Komórki nie posiadają marginesów zewnętrznych.</p>
+<p>Komórki posiadają ramki oraz marginesy wewnętrzne. Domyślnie ramki są oddzielone o wartość własności <code>border-spacing</code> tabeli. Możesz usunąć całkowicie odstępy przez ustawienie własności <code>border-collapse</code> tabeli na wartość <code>collapse</code>.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Przykład</caption>
+  <tbody>
+    <tr>
+      <td>Poniżej widać trzy tabele.
+        <p>Tabela po lewej ma ustawione odstępy ramek na 0.5 em. Tabela w środku ma ustawione odstępy ramek na zero. Tabela po prawej ma zwinięte ramki:</p>
+        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+          <tbody>
+            <tr>
+              <td style="padding-right: 2em;">
+                <table style="">
+                  <tbody>
+                    <tr>
+                      <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+                      <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+                    </tr>
+                    <tr>
+                      <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+                      <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+              <td style="padding-right: 2em;">
+                <table style="">
+                  <tbody>
+                    <tr>
+                      <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+                      <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+                    </tr>
+                    <tr>
+                      <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+                      <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+              <td style="padding-right: 6em;">
+                <table style="border-collapse: collapse;">
+                  <tbody>
+                    <tr>
+                      <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+                      <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+                    </tr>
+                    <tr>
+                      <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+                      <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Opis" name="Opis">Opis</h4>
+<p><i>Opis</i> jest etykietą opisującą całą tabelę. Domyślnie jest wyświetlana nad tabelą.</p>
+<p>Aby przesunąć opis na dół, ustaw jego własność <code>caption-side</code> na <code>bottom</code>. Ta własność jest dziedziczona, więc możesz ją ustawić dla całej tabeli lub innego rodzica.</p>
+<p>Aby ustawić styl tekstu opisu, użyj normalnych własności tekstowych.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Przykład</caption>
+  <tbody>
+    <tr>
+      <td>Ta tabela posiada opis na dole:
+        <div style="width: 30em;">
+          <ol>
+            <li>demo-table &gt; caption {</li>
+          </ol>
+          <pre class="eval">
+ caption-side: bottom;
+ font-style: italic;
+ text-align: right;
+ }
+</pre>
+        </div>
+        <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+          <tbody>
+            <tr>
+              <td>
+                <table>
+                  <caption>
+                    Suits</caption>
+                  <tbody>
+                    <tr>
+                      <td>
+                        <table style="border-collapse: collapse;">
+                          <tbody>
+                            <tr>
+                              <td style="border: 1px solid gray; text-align: center;">Clubs</td>
+                              <td style="border: 1px solid gray; text-align: center;">Hearts</td>
+                            </tr>
+                            <tr>
+                              <td style="border: 1px solid gray; text-align: center;">Diamonds</td>
+                              <td style="border: 1px solid gray; text-align: center;">Spades</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h4 id="Puste_kom.C3.B3rki" name="Puste_kom.C3.B3rki">Puste komórki</h4>
+<p>Możesz wyświetlić puste komórki (czyli ich ramki oraz tło) przez określenie <code>empty-cells: show;</code> dla elementu tabeli.</p>
+<p>Możesz je ukryć, określając <code>empty-cells: hide;</code>. Wtedy jeżeli element rodzic komórki posiada tło, zostanie ono pokazane w miejscu pustej komórki.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Przykład</caption>
+  <tbody>
+    <tr>
+      <td>Poniższe tabele mają jasnozielone tło. Ich komórki mają tło jasnoszare i ciemnoszare ramki.
+        <p>W lewej tabeli puste komórki są wyświetlane, w prawej ukrywane:</p>
+        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+          <tbody>
+            <tr>
+              <td style="padding-right: 2em;">
+                <table style="background-color: #dfd;">
+                  <tbody>
+                    <tr>
+                      <td style="border: 1px solid #555; background-color: #eee;"> </td>
+                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
+                    </tr>
+                    <tr>
+                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
+                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+              <td style="padding-right: 6em;">
+                <table style="background-color: #dfd;">
+                  <tbody>
+                    <tr>
+                      <td> </td>
+                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
+                    </tr>
+                    <tr>
+                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
+                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+  <caption>
+    Więcej szczegółów</caption>
+  <tbody>
+    <tr>
+      <td>Aby dowiedzieć się więcej o tabelach, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tabele</a> w specyfikacji CSS.
+        <p>Informacje tam zawarte wykraczają poza ten kurs, ale nie opisują różnic miedzy przeglądarkami, które mogą wpływać na wyświetlanie złożonych tabel.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli" name="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli">Zadanie: Ustawianie stylów dla tabeli</h3>
+<p>Stwórz nowy dokument HTML, <code>doc3.html</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz całą zawartość:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+  <pre>&lt;DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+&lt;HEAD&gt;
+&lt;TITLE&gt;Przykładowy dokument 3&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style3.css"&gt;
+&lt;/HEAD&gt;
+&lt;BODY&gt;
+
+&lt;TABLE id="demo-table"&gt;
+&lt;CAPTION&gt;Oceans&lt;/CAPTION&gt;
+
+&lt;THEAD&gt;
+&lt;TR&gt;
+&lt;TH&gt;&lt;/TH&gt;
+&lt;TH&gt;Area&lt;/TH&gt;
+&lt;TH&gt;Mean depth&lt;/TH&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;&lt;/TH&gt;
+&lt;TH&gt;million km&lt;SUP&gt;2&lt;/SUP&gt;&lt;/TH&gt;
+&lt;TH&gt;m&lt;/TH&gt;
+&lt;/TR&gt;
+&lt;/THEAD&gt;
+
+&lt;TBODY&gt;
+&lt;TR&gt;
+&lt;TH&gt;Arctic&lt;/TH&gt;
+&lt;TD&gt;13,000&lt;/TD&gt;
+&lt;TD&gt;1,200&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Atlantic&lt;/TH&gt;
+&lt;TD&gt;87,000&lt;/TD&gt;
+&lt;TD&gt;3,900&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Pacific&lt;/TH&gt;
+&lt;TD&gt;180,000&lt;/TD&gt;
+&lt;TD&gt;4,000&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Indian&lt;/TH&gt;
+&lt;TD&gt;75,000&lt;/TD&gt;
+&lt;TD&gt;3,900&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Southern&lt;/TH&gt;
+&lt;TD&gt;20,000&lt;/TD&gt;
+&lt;TD&gt;4,500&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;/TBODY&gt;
+
+&lt;TFOOT&gt;
+&lt;TR&gt;
+&lt;TH&gt;Total&lt;/TH&gt;
+&lt;TD&gt;361,000&lt;/TD&gt;
+&lt;TD&gt;&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;TR&gt;
+&lt;TH&gt;Mean&lt;/TH&gt;
+&lt;TD&gt;72,000&lt;/TD&gt;
+&lt;TD&gt;3,800&lt;/TD&gt;
+&lt;/TR&gt;
+&lt;/TFOOT&gt;
+
+&lt;/TABLE&gt;
+
+&lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+<p>Stwórz nowy arkusz stylów, <code>style3.css</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz cały:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+  <pre>/*** Styl dla doc3.html (Tabele) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+  }
+
+#demo-table &gt; caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+  }
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+  }
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+  }
+
+
+/* header */
+#demo-table &gt; thead &gt; tr:first-child &gt; th {
+  text-align: center;
+  color: blue;
+  }
+
+#demo-table &gt; thead &gt; tr + tr &gt; th {
+  font-style: italic;
+  color: gray;
+  }
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+  }
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+  }
+
+#demo-table tbody th:after {
+  content: ":";
+  }
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+  }
+
+#demo-table tfoot th {
+  color: blue;
+  }
+
+#demo-table tfoot th:after {
+  content: ":";
+  }
+
+#demo-table &gt; tfoot td {
+  background-color: #cee;
+  }
+
+#demo-table &gt; tfoot &gt; tr:first-child td {
+  border-top: .2em solid #7a7;
+  }
+</pre>
+</div>
+<p>Otwórz dokument w swojej przeglądarce. Powinien wyglądać mniej więcej tak:</p>
+<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+  <tbody>
+    <tr>
+      <td>
+        <div>
+          <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p>
+          <div style="border: 1px solid #7a7; background-color: #efe;">
+            <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
+              <tbody>
+                <tr style="text-align: center; color: blue;">
+                  <th> </th>
+                  <th>Area</th>
+                  <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
+                </tr>
+                <tr style="font-style: italic; color: gray;">
+                  <th> </th>
+                  <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
+                  <th style="padding-left: .5em; padding-right: .5em;">m</th>
+                </tr>
+                <tr>
+                  <th style="padding-right: .5em;">Arctic:</th>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+                </tr>
+                <tr>
+                  <th style="padding-right: .5em;">Atlantic:</th>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+                </tr>
+                <tr>
+                  <th style="padding-right: .5em;">Pacific:</th>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+                </tr>
+                <tr>
+                  <th style="padding-right: .5em;">Indian:</th>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+                </tr>
+                <tr>
+                  <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+                </tr>
+                <tr>
+                  <th style="padding-right: .5em; color: blue;">Total:</th>
+                  <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+                  <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+                </tr>
+                <tr>
+                  <th style="padding-right: .5em; color: blue;">Mean:</th>
+                  <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+                  <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p>Porównaj reguły ze swojego arkusza stylów z wyświetloną tabelą, aby upewnić się, że rozumiesz działanie każdej reguły. Jeżeli napotkasz regułę, której nie rozumiesz, wykomentuj ją i odśwież okno przeglądarki, aby zobaczyć, co się stanie.</p>
+<p>Poniżej znajduje się kilka uwag dotyczących tej tabeli:</p>
+<ul>
+  <li>Opis znajduje się poza ramką tabeli.</li>
+  <li>Jeżeli masz określoną minimalną wielkość punktu, może to wpłynąć na indeks górny w km<sup>2</sup>.</li>
+  <li>Istnieją trzy puste komórki. Dwie z nich pozwalają na pokazanie tła tabeli. Trzecia posiada własne tło i górną ramkę.</li>
+  <li>Dwukropki zostały dodane przez arkusz stylów.</li>
+</ul>
+<p> </p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Wyzwania</caption>
+  <tbody>
+    <tr>
+      <td>Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej:
+        <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+          <tbody>
+            <tr>
+              <td>
+                <div>
+                  <div style="border: 1px solid #7a7; background-color: #efe;">
+                    <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
+                      <tbody>
+                        <tr style="text-align: center; color: blue;">
+                          <th> </th>
+                          <th>Area</th>
+                          <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
+                        </tr>
+                        <tr style="font-style: italic; color: gray;">
+                          <th> </th>
+                          <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
+                          <th style="padding-left: .5em; padding-right: .5em;">m</th>
+                        </tr>
+                        <tr>
+                          <th style="padding-right: .5em;">Arctic:</th>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
+                        </tr>
+                        <tr>
+                          <th style="padding-right: .5em;">Atlantic:</th>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+                        </tr>
+                        <tr>
+                          <th style="padding-right: .5em;">Pacific:</th>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
+                        </tr>
+                        <tr>
+                          <th style="padding-right: .5em;">Indian:</th>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+                        </tr>
+                        <tr>
+                          <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
+                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
+                        </tr>
+                        <tr>
+                          <th style="padding-right: .5em; color: blue;">Total:</th>
+                          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+                          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+                        </tr>
+                        <tr>
+                          <th style="padding-right: .5em; color: blue;">Mean:</th>
+                          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+                          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4>
+<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.</p>
+<p>Jest to ostatnia strona tego kursu, która opisuje własności i wartości CSS. Aby dowiedzieć się więcej o własnościach i wartościach w CSS, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> w specyfikacji CSS.</p>
+<p>Następna strona znowu wraca do tematu przeznaczenia i struktury arkuszy stylów CSS: <b><a href="pl/CSS/Na_pocz%c4%85tek/Media">Media</a></b></p>
diff --git a/files/pl/learn/css/building_blocks/values_and_units/index.html b/files/pl/learn/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..db5bfd5e7d
--- /dev/null
+++ b/files/pl/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,209 @@
+---
+title: Kolor
+slug: Web/CSS/Na_początek/Kolor
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+translation_of_original: Web/Guide/CSS/Getting_started/Color
+---
+<p>
+</p><p>Ta strona dokładniej opisuje sposoby pracy z kolorami w CSS-ie.
+</p><p>W swoim przykładowym arkuszu stylów, dodasz kolory tła.
+</p>
+<h3 id="Informacja:_Kolor" name="Informacja:_Kolor"> Informacja: Kolor </h3>
+<p>Do tej pory w tym kursie używałeś(aś) ograniczonej liczby nazwanych kolorów.
+CSS 2 definiuje 17 nazwanych kolorów.
+Niektóre z nazw mogą nie być tym, czego się spodziewasz:
+</p>
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+<tbody><tr>
+<td>   </td><td> black </td><td style="width: 2em; height: 2em; background-color: black;"> </td><td> gray </td><td style="width: 2em; height: 2em; background-color: gray;"> </td><td> silver </td><td style="width: 2em; height: 2em; background-color: silver;"> </td><td> white </td><td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;">
+</td></tr>
+<tr>
+<td> podstawowe </td><td> red </td><td style="width: 2em; height: 2em; background-color: red;"> </td><td> lime </td><td style="width: 2em; height: 2em; background-color: lime;"> </td><td> blue </td><td style="width: 2em; height: 2em; background-color: blue;">
+</td></tr>
+<tr>
+<td> drugorzędne </td><td> yellow </td><td style="width: 2em; height: 2em; background-color: yellow;"> </td><td> aqua </td><td style="width: 2em; height: 2em; background-color: aqua;"> </td><td> fuchsia </td><td style="width: 2em; height: 2em; background-color: fuchsia;">
+</td></tr>
+<tr>
+<td> </td><td>maroon</td><td style="width: 2em; height: 2em; background-color: maroon;"> </td><td> orange</td><td style="width: 2em; height: 2em; background-color: orange;"> </td><td> olive</td><td style="width: 2em; height: 2em; background-color: olive;"> </td><td> purple</td><td style="width: 2em; height: 2em; background-color: purple;"> </td><td> green</td><td style="width: 2em; height: 2em; background-color: green;"> </td><td> navy</td><td style="width: 2em; height: 2em; background-color: navy;"> </td><td> teal</td><td style="width: 2em; height: 2em; background-color: teal;">
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Twoja przeglądarka może obsługiwać znacznie więcej nazwanych kolorów, na przykład:
+<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;">
+<tbody><tr>
+<td> dodgerblue</td><td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td><td> peachpuff </td><td style="width: 2em; height: 2em; background-color: peachpuff;"> </td><td> tan </td><td style="width: 2em; height: 2em; background-color: tan;"> </td><td> firebrick </td><td style="width: 2em; height: 2em; background-color: firebrick;"> </td><td> aquamarine </td><td style="width: 2em; height: 2em; background-color: aquamarine;">
+</td></tr></tbody></table>
+<p>Szczegółową listę znajdziesz w dokumentacji CSS 3, w module Kolor, sekcji
+<a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">słowa kluczowe kolorów w SVG</a>. Unikaj używania nazwanych kolorów, których przeglądarka osoby czytającej Twój dokument może nie obsługiwać.
+</p>
+</td></tr></tbody></table>
+<p>Aby móc korzystać w większej palety kolorów, określ czerwony, zielony i niebieski komponent koloru, z którego chcesz skorzystać, używając znaku "hash" oraz trzech <i>heksadecymalnych</i> liczb w zakresie od 0 – 9, a – f. Litery a – f reprezentują wartości 10 – 15.
+</p>
+<table style="border: 0px; margin-left: 2em;">
+<tbody><tr>
+<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td><code>#000</code>
+</td></tr>
+<tr>
+<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#f00</code>
+</td></tr>
+<tr>
+<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#0f0</code>
+</td></tr>
+<tr>
+<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#00f</code>
+</td></tr>
+<tr>
+<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#fff</code>
+</td></tr></tbody></table>
+<p>Aby skorzystać z pełnej palety, określ dwie heksadecymalne liczby na każdy komponent:
+</p>
+<table style="border: 0px; margin-left: 2em;">
+<tbody><tr>
+<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td> <code>#000000</code>
+</td></tr>
+<tr>
+<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#ff0000</code>
+</td></tr>
+<tr>
+<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#00ff00</code>
+</td></tr>
+<tr>
+<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#0000ff</code>
+</td></tr>
+<tr>
+<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#ffffff</code>
+</td></tr></tbody></table>
+<p>Zazwyczaj te sześcioliczbowe, heksadecymalne kody możesz pobrać z Twojego programu graficznego lub innego narzędzia.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Przykłady
+</caption><tbody><tr>
+<td> Odrobina praktyki i w większości wypadków możesz modyfikować trzyliczbowe kolory ręcznie:
+<table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+<tbody><tr>
+<td>Zacznij od czystej czerwieni: </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td><code>#f00</code>
+</td></tr>
+<tr>
+<td>Aby ją rozjaśnić, dodaj trochę zielonego i niebieskiego: </td><td style="width: 2em; height: 2em; background-color: #f77;"> </td><td><code>#f77</code>
+</td></tr>
+<tr>
+<td>Aby kolor był bardziej pomarańczowy, dodaj trochę zielonego: </td><td style="width: 2em; height: 2em; background-color: #fa7;"> </td><td><code>#fa7</code>
+</td></tr>
+<tr>
+<td>Aby kolor był ciemniejszy, zmniejsz wartość wszystkich komponentów: </td><td style="width: 2em; height: 2em; background-color: #c74;"> </td><td><code>#c74</code>
+</td></tr>
+<tr>
+<td>Aby zmniejszyć nasycenie, zmniejsz różnice między wartościami komponentów: </td><td style="width: 2em; height: 2em; background-color: #c98;"> </td><td><code>#c98</code>
+</td></tr>
+<tr>
+<td>Jeśli ustawisz jednakową wartość wszystkich komponentów, uzyskasz kolor szary: </td><td style="width: 2em; height: 2em; background-color: #ccc;"> </td><td><code>#ccc</code>
+</td></tr></tbody></table>
+</td></tr>
+<tr>
+<td> Aby uzyskać pastelowy odcień, taki jak blady niebieski:
+<table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+<tbody><tr>
+<td>Zacznij od białego: </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td><code>#fff</code>
+</td></tr>
+<tr>
+<td>Zredukuj trochę wartości komponentów innych, niż niebieski: </td><td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td><td><code>#eef</code>
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Możesz także określić kolor, używając decymalnych wartości RGB w zakresie 0 – 255, lub procentów.
+<p>Na przykład to jest kasztanowaty (ciemnoczerwony):
+</p>
+<div style="width: 24em;"><pre>
+rgb(128, 0, 0)
+</pre></div>
+<p>Więcej szczegółów na temat określania kolorów znajdziesz w sekcji
+<a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Kolory</a> w specyfikacji CSS.
+</p><p>Więcej informacji na temat dopasowania kolorów do kolorów systemowych, jak Menu czy ThreeDFace, znajdziesz w:
+<a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 Kolory Systemowe</a> specyfikacji CSS.
+</p>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="W.C5.82asno.C5.9Bci_kolor.C3.B3w" name="W.C5.82asno.C5.9Bci_kolor.C3.B3w"> Własności kolorów </h4>
+<p>Korzystałeś(aś) już z własności <code>color</code> dla tekstu.
+</p><p>Możesz też użyć własności <code>background-color</code>, aby zmienić tła elementów.
+</p><p>Jeżeli ustawisz wartość tła na <code>transparent</code>, będzie ono przezroczyste i pokaże tło elementu rodzica.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Boksy <b>Przykład</b> w tym kursie używają bladożółtego tła:
+<div style="width: 24em;"><pre>
+background-color: #fffff4;
+</pre></div>
+<p>Boksy <b>Więcej szczegółów</b> używają bladoszarego:
+</p>
+<div style="width: 24em;"><pre>
+background-color: #f4f4f4;
+</pre></div>
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w" name="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w"> Zadanie: Korzystanie z kodów kolorów </h3>
+<p>Wyedytuj swój plik CSS.
+</p><p>Wykonaj zmiany oznaczone tutaj pogrubieniem, aby nadać pierwszym literom bladoniebieskie tło.
+(Styl i komentarze w Twoim pliku będą prawdopodobnie inne niż pokazane tutaj.
+Zachowaj styl i komentarze w stylu jaki wybrałeś(aś)).
+</p>
+<div style="width: 32em;">
+<pre class="eval">/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+ color: red;
+ <strong>background-color: #ddf;</strong>
+ font: 200% serif;
+ }
+
+.carrot {color: red;}
+.spinach {color: green;}
+</pre>
+</div>
+<p>Odśwież okno przeglądarki, aby zobaczyć wynik:
+</p>
+<table>
+<tbody><tr>
+<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets
+</td></tr>
+<tr>
+<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> W swoim pliku CSS zmień wszystkie nazwy kolorów na 3-cyfrowe kody kolorów, tak, żeby rezultat pozostał taki sam.
+<p>(To nie jest do końca możliwe, ale możesz być blisko ideału.
+Aby uzyskać dokładnie taki efekt, potrzebujesz 6-cyfrowych kodów oraz musisz zajrzeć do specyfikacji CSS lub użyć narzędzia graficznego, aby znaleźć odpowiednie kody).
+</p>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Twój przykładowy dokument i przykładowy arkusz stylów ściśle rozdzielają treść od stylu.
+</p><p>Następna strona wyjaśnia, jak robić wyjątki od tego rozdziału:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/CSS/Getting_Started/Color", "fr": "fr/CSS/Premiers_pas/Couleurs", "it": "it/Conoscere_i_CSS/Colori", "ja": "ja/CSS/Getting_Started/Color", "pt": "pt/CSS/Como_come\u00e7ar/Cor" } ) }}
diff --git a/files/pl/learn/css/first_steps/how_css_is_structured/index.html b/files/pl/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..0e62945cbd
--- /dev/null
+++ b/files/pl/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,154 @@
+---
+title: Czytelny CSS
+slug: Web/CSS/Na_początek/Czytelny_CSS
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
+---
+<p>
+</p><p>Ta strona opisuje styl i gramatykę języka CSS.
+</p><p>Zmienisz wygląd swojego pliku CSS, aby był bardziej czytelny.
+</p>
+<h3 id="Informacja:_Czytelny_CSS" name="Informacja:_Czytelny_CSS"> Informacja: Czytelny CSS </h3>
+<p>Możesz dodać białe znaki i komentarze do swojego arkusza stylów, aby uczynić go bardziej czytelnym.
+Możesz też grupować selektory razem, kiedy te same reguły stylów dotyczą wybranych elementów w różny sposób.
+</p>
+<h4 id="Bia.C5.82e_znaki" name="Bia.C5.82e_znaki"> Białe znaki </h4>
+<p>Białe znaki to spacje, tabulatory i nowe linie.
+Dzięki białym znakom arkusz stylów będzie bardzie czytelny.
+</p><p>Twój przykładowy plik CSS zawiera w tej chwili jedną regułę na linię i prawie minimalną liczbę białych znaków. W złożonych arkuszach stylów taki układ byłby bardzo trudny do czytania, utrudniając zarządzanie arkuszem.
+</p><p>Styl, który wybierzesz, zazwyczaj zależy od prywatnych przyzwyczajeń, ale Twój arkusz stylów może być częścią projektu, którym zajmuje się więcej osób. W takiej sytuacji przyjmuje się pewne konwencje.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykłady
+</caption><tbody><tr>
+<td> Niektórzy ludzie lubią zwięzły układ, którego używaliśmy do tej pory, dzieląc linię jedynie wtedy, kiedy staje się ona bardzo długa:
+<pre>
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+<p>Inni wolą układać jedną własność-wartość na linię:
+</p>
+<div style="width: 45em;">
+<p>.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</p>
+</div>
+<p>Inni używają wcięć — często używane są dwie spacje, cztery spacje lub tabulator:
+</p>
+<div style="width: 45em;">
+<p>.carrot {
+</p>
+<pre class="eval"> color: orange;
+ text-decoration: underline;
+ font-style: italic;
+</pre>
+<p>}
+</p>
+</div>
+<p>Inni wolą ustawiać wszystko względem pionowej osi (jednak taki układ jest trudny w zarządzaniu):
+</p>
+<div style="width: 45em;">
+<p>.carrot
+</p>
+<pre class="eval">   {
+   color           : orange;
+   text-decoration : underline;
+   font-style      : italic;
+   }
+</pre>
+</div>
+<p>Tworząc wcięcia jedni wolą używać tabulatorów, inni zaś tylko spacji.
+</p>
+</td></tr></tbody></table>
+<h4 id="Komentarze" name="Komentarze"> Komentarze </h4>
+<p>Komentarze w CSS zaczynają się od <code>/*</code>, a kończą się na <code>*/</code>.
+</p><p>Możesz używać komentarzy, aby komentować elementy swojego arkusza stylów oraz do <i>wykomentowywania</i> części aktualnie nieużywanych.
+</p><p>Aby wykomentować części arkusza stylów, umieść tę część w komentarzu, a przeglądarka ją zignoruje.
+Należy uważać, gdzie zaczyna, a gdzie kończy się komentarz.
+Dalsza część arkusza stylów musi mieć poprawną składnię.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td><div style="width: 45em;">
+<p>/* styl dla początkowej litery C w pierwszym paragrafie */
+.carrot {
+</p>
+<pre class="eval"> color:            orange;
+ text-decoration:  underline;
+ font-style:       italic;
+ }
+</pre>
+</div>
+</td></tr></tbody></table>
+<h4 id="Grupy_Selektor.C3.B3w" name="Grupy_Selektor.C3.B3w"> Grupy Selektorów </h4>
+<p>Kiedy wiele selektorów ma ten sam styl, możesz określić grupę selektorów, oddzielając je przecinkami.
+Deklaracja zostanie zastosowana do wszystkich wybranych elementów.
+</p><p>W innych miejscach arkusza stylów możesz określić te same selektory ponownie, aby nadać im indywidualne reguły.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Ta reguła sprawia, że elementy <small>H1</small>, <small>H2</small> oraz <small>H3</small> są tego samego koloru.
+<p>Wygodnie jest określić kolor tylko w jednym miejscu, na wypadek, gdyby miał być zmieniany.
+</p>
+<div style="width: 30em;">
+<p>/* kolory nagłówków */
+h1, h2, h3 {color: navy;}
+</p>
+</div>
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu" name="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu"> Zadanie: Dodawanie komentarzy i poprawianie układu </h3>
+<p>Wyedytuj swój plik CSS i upewnij się, że posiada on te reguły (w dowolnej kolejności):
+</p>
+<div style="width: 30em;">
+<p>strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+</p>
+<ol><li>first {font-style: italic;}
+</li></ol>
+<p>p {color: blue;}
+</p>
+</div>
+<p>Spraw, aby stał się bardziej czytelny, zmieniając kolejność w sposób, który uznasz za logiczny oraz dodając białe znaki i komentarze w taki sposób, jaki uznasz za najlepszy.
+</p><p>Zapisz ten plik i odśwież stronę w przeglądarce, aby upewnić się, że Twoje zmiany nie wpłynęły na działanie arkusza stylów:
+</p>
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> Wykomentuj część arkusza stylów bez zmieniania czegokolwiek poza tym, aby pierwsza litera dokumentu była czerwona:
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p>(Jest więcej niż jeden sposób, aby to zrobić.)
+</p>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Twój przykładowy dokument używa kursywy oraz podkreślenia.
+Następna strona omawia kolejne sposoby na określanie wyglądu tekstu w dokumencie:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Style_tekstowe">Style tekstowe</a></b>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "it": "it/Conoscere_i_CSS/CSS_leggibili", "ja": "ja/CSS/Getting_Started/Readable_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }}
diff --git a/files/pl/learn/css/first_steps/how_css_works/index.html b/files/pl/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..4502cad557
--- /dev/null
+++ b/files/pl/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,133 @@
+---
+title: Czym jest CSS
+slug: Web/CSS/Na_początek/Czym_jest_CSS
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
+---
+<p> </p>
+
+<p>Ta strona opisuje, czym jest CSS.</p>
+
+<h3 id="Informacja:_Czym_jest_CSS.3F" name="Informacja:_Czym_jest_CSS.3F">Informacja: Czym jest CSS?</h3>
+
+<p>CSS jest językiem określającym, jak dokumenty mają być prezentowane użytkownikowi.</p>
+
+<p><em>Dokument</em>jest to kolekcja informacji ułożona w strukturę przy użyciu<em>języka znaczników</em>.</p>
+
+<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>Przykłady</caption>
+ <tbody>
+  <tr>
+   <td>
+    <ul>
+     <li>Strona, taka jak ta, jest dokumentem.<br>
+      Informacje, które widzisz na stronie, zazwyczaj są ułożone w strukturę przy użyciu języka znaczników HTML (HyperText Markup Language).</li>
+    </ul>
+
+    <ul>
+     <li>Okienko dialogowe w aplikacji Mozilli jest dokumentem.<br>
+      Kontrolki interfejsu użytkownika, które widzisz w okienku dialogowym Mozilli, są ułożone w strukturę przy użyciu języka znaczników XUL (XML User-interface Language).</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>W tym kursie bloki oznaczone <strong>Więcej szczegółów</strong>, jak poniższy, zawierają informacje, których znajomość nie jest wymagana do dalszego korzystania z kursu. Jeżeli się spieszysz, możesz spokojnie pominąć te bloki i na przykład wrócić do nich później.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>Więcej szczegółów</caption>
+ <tbody>
+  <tr>
+   <td>
+    <p>Dokument nie jest tym samym co plik. Dokument może, ale nie musi być składowany w pliku.</p>
+
+    <p>Na przykład dokument, który w tym momencie czytasz, nie jest zapisany w pliku. Kiedy Twoja przeglądarka prosi o stronę, serwer odpytuje bazę danych i generuje dokument, składając jego części z wielu plików i fragmentów z bazy danych. Jednak w trakcie tego kursu będziesz pracować z dokumentami składowanymi w plikach.</p>
+
+    <p>Więcej informacji na temat dokumentów i języków znaczników znajdziesz w innych częściach tej strony — na przykład:</p>
+
+    <table style="background-color: inherit; margin-left: 2em;">
+     <tbody>
+      <tr>
+       <td><a href="pl/HTML">HTML</a></td>
+       <td>o stronach internetowych</td>
+      </tr>
+      <tr>
+       <td><a href="pl/XML">XML</a></td>
+       <td>o strukturalnych dokumentach</td>
+      </tr>
+      <tr>
+       <td><a href="pl/SVG">SVG</a></td>
+       <td>o grafice</td>
+      </tr>
+      <tr>
+       <td><a href="pl/XUL">XUL</a></td>
+       <td>o interfejsie użytkownika w Mozilli</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><em>Prezentowanie</em>dokumentu użytkownikowi oznacza skonwertowanie go do postaci, w jakiej będzie on przydatny użytkownikowi. Mozilla prezentuje dokumenty wizualnie — na przykład na ekranie komputera, obrazie wyświetlanym przez projektor lub wydruku.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>Więcej szczegółów</caption>
+ <tbody>
+  <tr>
+   <td>CSS jest przeznaczony nie tylko dla przeglądarek i prezentacji graficznych. W formalnej terminologii CSS program, który prezentuje dokumenty użytkownikowi, nazywany jest<em>agentem</em> (ang. User Agent - UA). Przeglądarka jest tylko jednym z wielu rodzajów UA. Jednakże część pierwsza tego kursu skupia się na pracy z językiem CSS w przeglądarce.
+    <p>Formalne definicje terminologii związanej z CSS znajdziesz w Specyfikacji CSS w dziale <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definicje</a>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Zadanie:_Tworzenie_dokumentu" name="Zadanie:_Tworzenie_dokumentu">Zadanie: Tworzenie dokumentu</h3>
+
+<p>Stwórz nowy katalog, a w nim nowy plik. Ten plik będzie Twoim dokumentem.</p>
+
+<p>Skopiuj i wklej poniższy kod HTML. Zapisz plik pod nazwą <code>doc1.html</code></p>
+
+<div style="width: 40em;">
+<pre class="brush: html  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Sample document<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;</span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span>ascading
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;</span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span>tyle
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;</span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span>heets
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+
+<p>Otwórz nowy panel lub nowe okno w Twojej przeglądarce i otwórz ten plik.</p>
+
+<p>Powinieneś zobaczyć tekst zaczynający się od pogrubionych liter:</p>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>To, co widzisz w przeglądarce, może się trochę różnić z powodu ustawień przeglądarki oraz tego wiki. Jeżeli istnieją jakieś różnice w kroju pisma, odstępach i kolorach, które widzisz, nie jest to żaden problem.</p>
+
+<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4>
+
+<p>Jeżeli masz problemy ze zrozumieniem tej strony lub chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.</p>
+
+<p>Twój dokument nie używa jeszcze CSS. Na następnej stronie zaczniesz używać CSS do określania stylów: <strong><a href="pl/CSS/Na_pocz%c4%85tek/Po_co_u%c5%bcywa%c4%87_CSS">Po co używać CSS</a></strong></p>
+
+<p>{{ languages( { "en": "en/CSS/Getting_Started/What_is_CSS", "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS" } ) }}</p>
diff --git a/files/pl/learn/css/first_steps/index.html b/files/pl/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..22b975504c
--- /dev/null
+++ b/files/pl/learn/css/first_steps/index.html
@@ -0,0 +1,64 @@
+---
+title: Na początek
+slug: Web/CSS/Na_początek
+tags:
+  - CSS
+  - 'CSS:Na_początek'
+  - Wszystkie_kategorie
+translation_of: Learn/CSS/First_steps
+translation_of_original: Web/Guide/CSS/Getting_started
+---
+<p> </p>
+<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3>
+<p>Ten kurs wprowadza użytkownika w świat kaskadowych arkuszy stylów (CSS).</p>
+<p>Pokaże Ci on, jak korzystać z podstawowych funkcji CSS przy użyciu praktycznych przykładów, które możesz sprawdzić na swoim komputerze. Kurs składa się z dwóch części.</p>
+<ul>
+  <li>Część I ilustruje podstawowe funkcje CSS, które działają w Mozilli oraz innych nowoczesnych przeglądarkach.</li>
+</ul>
+<ul>
+  <li>Część II zawiera przykłady specjalnych funkcji działających w Mozilli, ale niekoniecznie działających w innych środowiskach.</li>
+</ul>
+<p>Ten kurs bazuje na <a class="external" href="http://www.w3.org/TR/CSS21/">specyfikacji CSS 2.1</a>.</p>
+<h4 id="Kto_mo.C5.BCe_skorzysta.C4.87_z_tego_kursu.3F" name="Kto_mo.C5.BCe_skorzysta.C4.87_z_tego_kursu.3F">Kto może skorzystać z tego kursu?</h4>
+<p>Kurs jest przeznaczony dla początkujących, ale może być też przydatny dla osób mających już pewną wiedzę o CSS.</p>
+<p>Jeżeli jesteś początkujący, skorzystaj z pierwszej części tego kursu, by zrozumieć działanie CSS i nauczyć się go używać. Potem przeczytaj część drugą, aby zrozumieć zakres wykorzystania CSS w produktach Mozilli.</p>
+<p>Jeżeli znasz już trochę CSS, możesz pominąć części kursu, które omawiają znane Ci tematy i skupić się na tych, które są dla Ciebie nowe.</p>
+<p>Jeżeli znasz dobrze CSS, ale nie w Mozilli, przejdź do części drugiej.</p>
+<h4 id="Czego_potrzebujesz.2C_zanim_zaczniesz.3F" name="Czego_potrzebujesz.2C_zanim_zaczniesz.3F">Czego potrzebujesz, zanim zaczniesz?</h4>
+<p>Aby móc swobodnie korzystać z tego kursu, potrzebujesz edytora plików tekstowych oraz przeglądarkę Mozilla (Firefox lub Mozilla Suite) i powinieneś umieć korzystać z obu tych produktów w podstawowym zakresie.</p>
+<p>Jeżeli nie chcesz edytować plików, możesz po prostu czytać kurs i patrzeć na obrazki, ale taka metoda nauki jest znacznie mniej efektywna.</p>
+<p>Niektóre części tego kursu mogą wymagać innych aplikacji Mozilli. Części te są opcjonalne. Jeżeli nie chcesz pobierać innych aplikacji Mozilli, po prostu pomiń je.</p>
+<p><strong>Uwaga: </strong> CSS umożliwia pracę z kolorami, więc niektóre części kursu zależą od kolorów. Możesz z nich wygodnie korzystać, jeśli posiadasz kolorowy wyświetlacz i prawidłowo rozróżniasz kolory.</p>
+<h4 id="Jak_korzysta.C4.87_z_tego_kursu" name="Jak_korzysta.C4.87_z_tego_kursu">Jak korzystać z tego kursu</h4>
+<p>Aby korzystać z tego kursu, przeczytaj uważnie wszystkie strony po kolei. Jeżeli pominiesz jedną stronę, możesz mieć trudności z rozumieniem dalszych.</p>
+<p>Na każdej stronie sekcja <i>Informacja</i> opisuje, jak działa CSS. Dzięki sekcji <i>Zadanie</i> będziesz mógł wypróbować użycie CSS na swoim komputerze.</p>
+<p>Aby sprawdzić, jak dobrze rozumiesz treść, podejmij wyzwanie znajdujące się na dole każdej strony. Rozwiązania niektórych wyzwań są prezentowane na późniejszych stronach kursu.</p>
+<p>Aby lepiej zrozumieć CSS, przeczytaj informacje znajdujące się w boksach oznaczonych <i>Więcej szczegółów</i>. Użyj znajdujących się tam odnośników, aby dowiedzieć się więcej ze specyfikacji CSS.</p>
+<h3 id="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_pierwsza" name="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_pierwsza">Kurs – część pierwsza</h3>
+<p>Podstawowy kurs CSS, krok po kroku.</p>
+<ol>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Czym_jest_CSS">Czym jest CSS</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Po_co_u%c5%bcywa%c4%87_CSS">Po co używać CSS</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Jak_dzia%c5%82a_CSS">Jak działa CSS</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Kaskadowo%c5%9b%c4%87_i_dziedziczenie">Kaskadowość i dziedziczenie</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Selektory">Selektory</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Czytelny_CSS">Czytelny CSS</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Style_tekstowe">Style tekstowe</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Kolor">Kolor</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Listy">Listy</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Bloki">Bloki</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Uk%c5%82ad">Układ</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Tabele">Tabele</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Media">Media</a></b></li>
+</ol>
+<h3 id="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_druga" name="Kurs_.E2.80.93_cz.C4.99.C5.9B.C4.87_druga">Kurs – część druga</h3>
+<p>Przykłady wykorzystania CSS w Mozilli.</p>
+<ol>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/JavaScript">JavaScript</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Wi%c4%85zania_XBL">Wiązania XBL</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/XUL-owe_interfejsy_u%c5%bcytkownika">XUL-owe interfejsy użytkownika</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Grafika_SVG">Grafika SVG</a></b></li>
+  <li><b><a href="/pl/docs/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a></b></li>
+</ol>
+<p>{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "zh-cn": "cn/CSS/\u5f00\u59cb", "pt": "pt/CSS/Como_come\u00e7ar" } ) }}</p>
diff --git a/files/pl/learn/css/howto/css_faq/index.html b/files/pl/learn/css/howto/css_faq/index.html
new file mode 100644
index 0000000000..12a84d8c20
--- /dev/null
+++ b/files/pl/learn/css/howto/css_faq/index.html
@@ -0,0 +1,162 @@
+---
+title: Częste pytania o CSS
+slug: Web/CSS/Częste_pytania_o_CSS
+tags:
+  - CSS
+  - Wszystkie_kategorie
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<p>
+</p>
+<h3 id="Cz.C4.99sto_zadawane_pytania" name="Cz.C4.99sto_zadawane_pytania"> Często zadawane pytania </h3>
+<h4 id="Stworzy.C5.82em_poprawny_CSS.2C_ale_przegl.C4.85darka_go_.C5.BAle_wy.C5.9Bwietla" name="Stworzy.C5.82em_poprawny_CSS.2C_ale_przegl.C4.85darka_go_.C5.BAle_wy.C5.9Bwietla"> Stworzyłem poprawny CSS, ale przeglądarka go źle wyświetla </h4>
+<p>Jeśli chcesz, aby Twoja przeglądarka poprawnie wyświetlała strony stworzone zgodnie ze standardami HTML/CSS, to musisz zadeklarować na początku każdego pliku HTML Deklarację Typu Dokumentu (DTD - Document Type Declaration).
+</p><p>Nowoczesne przeglądarki obsługują dwa główne tryby wyświetlania:
+</p>
+<ul><li> <i>Tryb zgodności wstecznej</i> (<i>Quirks Mode</i>): tryb pozwalający prawidłowo wyświetlać strony oparte na niestandardowych metodach renderowania. Te metody były używane w przeglądarkach zanim zaimplementowano obsługę standardów W3C.
+</li><li> <i>Tryb standardów</i> (<i>Standard Mode</i>): w tym trybie przeglądarka ma ściśle stosować się do standardów W3C.
+</li></ul>
+<p>Jeśli Twoja deklaracja (DTD) jest niepełna, przestarzała lub jej brak, to przeglądarki będą wyświetlały strony używając trybu zgodności wstecznej.
+</p><p>Oto lista najczęściej używanych DTD:
+</p>
+<pre>&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>
+<h4 id="R.C3.B3.C5.BCnice_mi.C4.99dzy_id_i_class" name="R.C3.B3.C5.BCnice_mi.C4.99dzy_id_i_class"> Różnice między <code>id</code> i <code>class</code> </h4>
+<p>Bloki i elementy HTML-a mogą mieć atrybut <code>id</code> i/lub <code>class</code>. Atrybut <code>id</code> pozwala nadać unikalną nazwę wybranemu elementowi. W jednym dokumencie nie może być dwóch elementów o tej samej nazwie (identyfikatorze). Atrybut <code>class</code> pozwala na grupowanie elementów w określonej klasie. Z założenia identyczny atrybut jest stosowany dla wielu elementów. CSS pozwala zdefiniować style, które mają być użyte do elementów z odpowiednim atrybutem <code>id</code> i/lub <code>class</code>.
+</p><p>Używaj styli zależnych od <code>id</code>, gdy chcesz ograniczyć ich działanie do konkretnego bloku lub elementu. Dla przykładu - dobrym miejscem na użycie atrybutu <code>id</code> jest blok, w którym umieszczamy menu, ponieważ występuje on tylko raz na stronie.
+</p><p>Używaj atrybutu <code>class</code>, gdy chcesz aby ten sam styl był stosowany do grupy elementów.
+</p><p>Zobacz <a href="pl/CSS/Na_pocz%c4%85tek/Selektory">Selektory CSS</a>
+</p>
+<h4 id="Przywracanie_domy.C5.9Blnej_warto.C5.9Bci_w.C5.82asno.C5.9Bci" name="Przywracanie_domy.C5.9Blnej_warto.C5.9Bci_w.C5.82asno.C5.9Bci"> Przywracanie domyślnej wartości własności </h4>
+<p>W CSS2 nie ma możliwości ustawienia standardowej wartości dla własności CSS. Jedyna droga, aby przywrócić standardową wartość, to przedeklarowanie (musisz znać standardową wartość, ponieważ CSS nie posiada słowa kluczowego <i>default</i>)
+</p><p>Musisz zachować szczególną ostrożność pisząc reguły stylów, gdy używasz selektorów (np. selektorów po nazwie znacznika jak na przykład <code>p</code>), które możesz chcieć nadpisać bardziej szczegółowymi regułami (jak te przy użyciu ID lub selektorów klas), ponieważ oryginalna standardowa wartość nie może być automatycznie odzyskana.
+</p><p>Z powodu <i>kaskadowej</i> natury CSS dobrą praktyką jest definiowanie reguł stylów najszczegółowiej jak się tylko da, żeby wpływały tylko na to, co chcesz.
+</p>
+<h4 id="Style_pochodne" name="Style_pochodne"> Style pochodne </h4>
+<p>CSS nie pozwala na definiowanie stylów w regułach innego, głównie z powodu <i><b>user agents performance issues</b></i> (<a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer words about it</a>).
+</p><p>W każdym razie, dobrze zorganizowany dokument HTML nie potrzebuje <i>zagnieżdżonych stylów</i>, dzięki <i>kaskadowej</i> naturze stylów. W rzeczywistości, jeśli potrzebujesz dokonać drobnej zmiany konkretnej reguły, stwórz oddzielną regułę zawierającą tylko zmiany. W <a href="pl/HTML">HTML</a>-u zastosuj główną regułę, a potem tą ze zmianami (patrz następna sekcja na temat przydzielania kilku klas).
+</p>
+<h4 id="Przydzielanie_kilku_klas" name="Przydzielanie_kilku_klas"> Przydzielanie kilku klas </h4>
+<p>Elementy HTML-a mogą być opisane przez kilka klas. Robi się to wymieniając nazwy kolejnych klas w atrybucie <code>class</code>, oddzielając kolejne nazwy spacjami.
+</p>
+<pre>&lt;style type="text/css"&gt;
+.firstclass { background: black; color: white; }
+.secondclass { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="firstclass secondclass"&gt;
+... treść ...
+... treść ...
+... treść ...
+&lt;/div&gt;
+</pre>
+<p>Jeśli ta sama własność jest zadeklarowana w dwóch regułach, to konflikt rozwiązywany jest najpierw poprzez ich specyfikę, a później kolejność w arkuszu stylów. Kolejność klas w atrybucie <code>class</code> jest nieistotna.
+</p>
+<h4 id="W.C5.82asno.C5.9Bci_styl.C3.B3w.2C_kt.C3.B3re_nie_dzia.C5.82aj.C4.85" name="W.C5.82asno.C5.9Bci_styl.C3.B3w.2C_kt.C3.B3re_nie_dzia.C5.82aj.C4.85"> Własności stylów, które nie działają </h4>
+<p>Często się zdarza, że poprawnie zdefiniowane style są ignorowane. Nie wynika to ani z błędu przeglądarki, ani z błędnej składni w CSS. Zwykle jest to zachowanie jak najbardziej prawidłowe, wynikające bezpośrednio ze składni i kolejności intepretacji reguł CSS.
+</p><p>Najczęstsze powody ignorowania niektórych styli to:
+</p>
+<ul><li> hierarchia elementów HTML'a
+</li><li> <i><b>jawnie</b></i> przedefiniowane reguły stylów
+</li><li> <i><b>użycie skróconej formy właściwości</b></i>
+</li><li> używanie selektora: <code>*</code>
+</li><li> kolejność interpretacji reguł CSS
+</li></ul>
+<p>Aby zlokalizować omówiony powyżej problem narzędziem zwanym " Inspektor DOM", w którym będziemy mogli zobaczyć jego lokalizację.
+</p><p><b>Hierarchia elementów HTML-a</b>
+</p><p>Sposób, w jaki style CSS są stosowane do elementów HTML, zależy od hierarchii samych elementów HTML. Ważne jest, aby to zapamiętać, ponieważ reguła potomka jest zawsze ważniejsza od reguły elementu nadrzędnego.
+</p>
+<pre>#section { font-weight: bold; }
+.redtext { font-weight: normal; color: red; }
+
+&lt;div id="section"&gt;
+   To jest pogrubiony tekst
+   &lt;span class="redtext"&gt; ten ma normalną grubość, lecz jest czerwony,&lt;/span&gt;
+   i znów pogrubiony
+&lt;/div&gt;
+</pre>
+<p>Wydaje się to dość oczywiste, gdyż wynika z prostoty kaskadowych arkuszy stylów. Gdy w przypadku skomplikowanych hierarchii HTML jakaś reguła wydaje sie być ignorowana, najpierw sprawdź, czy podejrzany element nie jest wewnątrz innego ze zdefiniowanym innym stylem.
+</p><p><br>
+<b>Przedefiniowywanie reguł stylów</b>
+</p><p>W arkuszach stylów kolejność <b>jest</b> istotna. W praktyce, jeśli zdefiniujesz regułę, a następnie zmienisz tą definicję w dalszej części arkusza stylów to użyta będzie ostatnia definicja.
+</p>
+<pre>#sekcja { font-weight: bold; }
+.czerwony_tekst { color: red; }
+/* inne reguły                         */
+/*             inne reguły             */
+/*                         inne reguły */
+.czerwony_tekst { font-weight: normal; }
+
+&lt;div id="sekcja"&gt;
+   Ten tekst jest pogrubiony,
+   &lt;span class="redtext"&gt; ten jest normalny i czerwony,&lt;/span&gt;
+   a ten znów pogrubiony.
+&lt;/div&gt;
+</pre>
+<p>Aby uniknąć tego typu błędów, spróbuj definiować reguły tylko raz dla konkretnego selektora i należącej do niego grupy reguł.
+</p><p><br>
+<b>Używanie skrótów własności</b>
+</p><p>Używanie skrótów własności do definiowania reguł stylów jest dobre, ponieważ używa zwięzłej składni. Używanie ~shorthand~ tylko z niektórymi atrybutami jest możliwe i poprawne, ale trzeba pamiętać, że niezadeklarowane atrybuty są automatycznie resetowane do wartości standardowych. Oznacza to, że poprzednia reguła dla pojedynczego atrybutu może być bezwarunkowo nadpisana.
+</p>
+<pre>#sekcja { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.czerwony_tekst { font: 14px Arial; color: red; }
+
+&lt;div id="sekcja"&gt;
+   To jest pogrubiona 12-o pikselowa Verdana,
+   &lt;span class="czerwony_tekst"&gt;to jest normalny 14-o pikselowy, czerwony Arial,&lt;/span&gt;
+   i znów 12-o pikselowa Verdana
+&lt;/div&gt;
+</pre>
+<p>W poprzednim przykładnie problem w regułach należących do różnych elementów, ale to samo może się zdarzyć dla tego samego elementu, ponieważ kolejność reguł <b>jest</b> istotna.
+</p>
+<pre>#sekcja {
+   font-weight: bold;
+   font: 12px Verdana;  /* skrót nadpisuje pogrubienie i zwraca normalny */
+}
+</pre>
+<p><br>
+<b>Używanie selektora: <code>*</code></b>
+</p><p>Selektor gwiazdki (<code>*</code>) pozwala na odniesienie się do dowolnego elementu i powinien być używany ze szczególną ostrożnością, ponieważ może być trudne kontrolowanie elementów, do których reguły są dodawane.
+</p>
+<pre>body * { font-weight: normal; }
+#sekcja { font: 12px Verdana; }
+.pogrubiony_tekst { font-weight: bold; }
+.czerwony_tekst { color: red; }
+
+&lt;div id="sekcja"&gt;
+   Ten jest normalny,
+   &lt;span class="pogrubiony_tekst"&gt;
+      &lt;span class="czerwony_tekst"&gt; ten jest normalny i czerwony,&lt;/span&gt;
+   &lt;/span&gt;
+   i znów normalny.
+&lt;/div&gt;
+</pre>
+<p>W tym przykładzie <code>body *</code> pozwala na zastosowanie reguł do wszystkich elementów wewnątrz body, na każdym poziomie hierarchii - także do <i>czerwony_tekst</i>. Tak więc <code>font-weight: bold;</code> zastosowany do klasy <i>pogrubiony_tekst</i> jest nadpisane przez <code>font-weight: normal;</code> klasy <i>czerwony_tekst</i>.
+</p><p><b>Starszeństwo w CSS</b>
+</p><p>Gdy stosowane są różne reguły dla konkretnego elementu to która z nich zostanie zastosowana zależy od starszeństwa stylów. Style inline (liniowe, takie jak span) są interpretowane na początku, potem te oparte na identyfikatorze (<code>id</code>), następnie klasie (<code>class</code>) i ewentualnie znajdujące się wewnątrz elementu (<code>style=""</code>).
+</p><p><br>
+</p>
+<pre>div { color: black; }
+#pomaranczowy { color: orange; }
+.zielony { color: green; }
+
+&lt;div id="pomaranczowy" class="zielony" style="color: red;"&gt;To jest czerwony tekst&lt;/div&gt;
+</pre>
+<p>Więcej informacji na temat działania selektorów można znaleźć w sieci → <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>
+</p>
+<h4 id="Co_wykonuje_w.C5.82asno.C5.9B.C4.87_-moz-.2A.3F" name="Co_wykonuje_w.C5.82asno.C5.9B.C4.87_-moz-.2A.3F"> Co wykonuje własność -moz-*? </h4>
+<p>Zobacz: <a href="pl/Rozszerzenia_CSS_Mozilli">Rozszerzenia CSS Mozilli</a>.
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Common_CSS_Questions", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}
diff --git a/files/pl/learn/css/styling_text/fundamentals/index.html b/files/pl/learn/css/styling_text/fundamentals/index.html
new file mode 100644
index 0000000000..69dfd39735
--- /dev/null
+++ b/files/pl/learn/css/styling_text/fundamentals/index.html
@@ -0,0 +1,116 @@
+---
+title: Style tekstowe
+slug: Web/CSS/Na_początek/Style_tekstowe
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Styling_text/Fundamentals
+translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
+---
+<p>
+</p><p>Na tej stronie znajdziesz więcej przykładów stylów tekstowych.
+</p><p>Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma.
+</p>
+<h3 id="Informacja:_Style_tekstowe" name="Informacja:_Style_tekstowe"> Informacja: Style tekstowe </h3>
+<p>CSS posiada kilka własności do określania stylu tekstu.
+</p><p>Istnieje wygodna, krótka własność <code>font</code>, której można użyć do określenia kilku cech na raz — na przykład:
+</p>
+<ul><li>pogrubienia, ustawienia kursywy oraz małych znaków,
+</li><li>rozmiaru,
+</li><li>wysokości linii,
+</li><li>typu fontu.
+</li></ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> <div style="width: 40em;">
+<p>p {font: italic 75%/125% "Comic Sans MS", cursive;}
+</p>
+</div>
+<p>Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą.
+</p><p>Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni).
+</p><p>Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo).
+</p><p>Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na <code>normal</code>):
+</p>
+</td></tr></tbody></table>
+<h4 id="Typy_font.C3.B3w" name="Typy_font.C3.B3w"> Typy fontów </h4>
+<p>Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu.
+Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych.
+</p><p>Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> lub <code>monospace</code>, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki).
+</p><p>Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty.
+</p><p>Aby określić wyłącznie typ fontu, użyj własności <code>font-family</code>.
+</p>
+<h4 id="Rozmiary_font.C3.B3w" name="Rozmiary_font.C3.B3w"> Rozmiary fontów </h4>
+<p>Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da.
+</p><p>Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak <code>small</code>, <code>medium</code> czy <code>large</code>. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: <code>smaller</code>, <code>larger</code>, <code>150%</code> lub <code>1.5</code>.
+</p><p>Jeżeli trzeba, możesz określić bezpośredni rozmiar: <code>12px</code> (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz.
+</p><p>Aby określić sam rozmiary fontu, użyj własności <code>font-size</code>.
+</p>
+<h4 id="Wysoko.C5.9B.C4.87_linii" name="Wysoko.C5.9B.C4.87_linii"> Wysokość linii </h4>
+<p>Wysokość linii określa odstępy między liniami.
+Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe.
+</p><p>Aby określić samą wysokość linii, użyj własności <code>line-height</code>.
+</p>
+<h4 id="Ozdobniki" name="Ozdobniki"> Ozdobniki </h4>
+<p>Odrębna własność <code>text-decoration</code> może określać inne style, jak <code>underline</code> (podkreślenie) lub <code>line-through</code> (przekreślenie).
+Ustawiając tę własność na <code>normal</code>, usuniesz wszystkie ozdobniki.
+</p>
+<h4 id="Inne_w.C5.82asno.C5.9Bci" name="Inne_w.C5.82asno.C5.9Bci"> Inne własności </h4>
+<p>Aby ustawić kursywę, użyj <code>font-style: italic;</code><br>
+Aby ustawić pogrubienie, użyj <code>font-weight: bold;</code><br>
+Aby określić, że wszystkie litery mają być małymi literami, użyj <code>font-variant: small-caps;</code>
+</p><p>Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na <code>normal</code> lub
+<code>inherit</code> (dziedzicz).
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Możesz określić style tekstowe na kilka innych sposobów.
+<p>Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć.
+</p><p>W złożonym arkuszu stylów unikaj używania skrótowej własności <code>font</code>, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu).
+</p><p>Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonty</a> w specyfikacji CSS.
+Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Tutaj</a>.
+</p>
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Okre.C5.9Blanie_fontu" name="Zadanie:_Okre.C5.9Blanie_fontu"> Zadanie: Określanie fontu </h3>
+<p>W prostych dokumentach możesz określić font elementu <small>BODY</small>, a reszta dokumentu będzie dziedziczyć jego ustawienia.
+</p><p>Wyedytuj swój plik CSS.
+Dodaj regułę, która zmieni font.
+Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia:
+</p>
+<div style="width: 40em;">
+<p>body {font: 16px "Comic Sans MS", cursive;}
+</p>
+</div>
+<p>Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu.
+</p><p>Odśwież okno przeglądarki, aby zobaczyć efekt.
+Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii:
+</p>
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p>Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki:
+<table>
+<tbody><tr>
+<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets
+</td></tr>
+<tr>
+<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Twój przykładowy dokument korzysta już z kilku nazwanych kolorów.
+Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Kolor">Kolor</a></b>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "fr": "fr/CSS/Premiers_pas/Styles_de_texte", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }}
diff --git a/files/pl/learn/css/styling_text/styling_lists/index.html b/files/pl/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..64f4218a9d
--- /dev/null
+++ b/files/pl/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,269 @@
+---
+title: Listy
+slug: Web/CSS/Na_początek/Listy
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Styling_text/Styling_lists
+translation_of_original: Web/Guide/CSS/Getting_started/Lists
+---
+<p>
+</p><p>Ta strona opisuje jak możesz użyć CSS-a do określania wyglądu list.
+</p><p>Stworzysz nowy dokument zawierający listę, oraz nowy arkusz stylów ze stylami dla niej.
+</p>
+<h3 id="Informacja:_Listy" name="Informacja:_Listy"> Informacja: Listy </h3>
+<p>Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony (<b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>), widziałeś(aś), jak można dodać treść przed jakimś elementem, aby wyglądało to jak elementy listy.
+</p><p>CSS posiada specjalne własności stworzone dla list.
+Staraj się z nich korzystać, jeśli masz możliwość.
+</p><p>Aby określić styl dla listy, użyj własności <code>list-style</code> do określenia typu znacznika.
+</p><p>Selektor w regule CSS może określać elementy listy (np. <code>LI</code>) lub element rodzica list (np. <code>UL</code>), z którego elementy listy będą dziedziczyły te style.
+</p>
+<h4 id="Listy_nieuporz.C4.85dkowane_.28unordered_lists.29" name="Listy_nieuporz.C4.85dkowane_.28unordered_lists.29"> Listy nieuporządkowane (unordered lists) </h4>
+<p>W liście <i>nieuporządkowanej</i> każdy element jest oznaczony w ten sam sposób.
+</p><p>W CSS występują trzy typy oznaczeń.
+Wyświetlane są w następujący sposób:
+</p>
+<ul style="padding-left: 2em;">
+<li style=""><code>disc</code></li>
+<li style=""><code>circle</code></li>
+<li style=""><code>square</code></li>
+</ul>
+<p>Alternatywnie możesz określić URL do obrazka.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Te reguły określają różne oznaczenia dla różnych klas elementów listy:
+<div style="width: 30em;">
+<p>li.open {list-style: circle;}
+li.closed {list-style: disc;}
+</p>
+</div>
+<p>Kiedy użyjesz tych klas w liście, rozdzielisz elementy otwarte i zamknięte:
+</p>
+<div style="width: 30em;">
+<p>&lt;UL&gt;
+</p>
+<pre class="eval"> &lt;LI class="open"&gt;Lorem ipsum&lt;/LI&gt;
+ &lt;LI class="closed"&gt;Dolor sit&lt;/LI&gt;
+ &lt;LI class="closed"&gt;Amet consectetuer&lt;/LI&gt;
+ &lt;LI class="open"&gt;Magna aliquam&lt;/LI&gt;
+ &lt;LI class="closed"&gt;Autem veleum&lt;/LI&gt;
+</pre>
+<p>&lt;/UL&gt;
+</p>
+</div>
+<p>Wynik może wyglądać na przykład tak:
+</p>
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td><ul style="padding-right: 6em;">
+<li style="">Lorem ipsum</li>
+<li style="">Dolor sit</li>
+<li style="">Amet consectetuer</li>
+<li style="">Magna aliquam</li>
+<li style="">Autem veleum</li>
+</ul>
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<h4 id="Listy_uporz.C4.85dkowane_.28ordered_lists.29" name="Listy_uporz.C4.85dkowane_.28ordered_lists.29"> Listy uporządkowane (ordered lists) </h4>
+<p>W przypadku list <i>uporządkowanych</i> każdy element listy jest osobno oznaczony, aby zaznaczyć jego pozycję w sekwencji.
+</p><p>Użyj własności <code>list-style</code>, aby określić typ oznaczenia:
+</p>
+<ul style="padding-left: 2em;">
+<li style=""><code>decimal</code></li>
+<li style=""><code>lower-roman</code></li>
+<li style=""><code>upper-roman</code></li>
+<li style=""><code>lower-latin</code></li>
+<li style=""><code>upper-latin</code></li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Ta reguła określa, że w bloku <small>OL</small> z klasą <code>info</code> elementy są oznaczane dużymi literami.
+<div style="width: 30em;">
+<p>ol.info {list-style: upper-latin;}
+</p>
+</div>
+<p>Elementy <small>LI</small> dziedziczą ten styl:
+</p>
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td><ul>
+<li style="padding-right: 6em;">Lorem ipsum</li>
+<li style="padding-right: 6em;">Dolor sit</li>
+<li style="padding-right: 6em;">Amet consectetuer</li>
+<li style="padding-right: 6em;">Magna aliquam</li>
+<li style="padding-right: 6em;">Autem veleum</li>
+</ul>
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Własność <code>list-style</code> jest własnością skrótową. W złożonych arkuszach stylów raczej będziesz wolał(a) używać osobnych własności dla osobnych wartości. Aby dowiedzieć się więcej na temat osobnych własności oraz jak CSS określa listy, zajrzyj do sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Listy</a> w dokumentacji CSS.
+<p>Jeżeli używasz języka znaczników, jak HTML, który korzysta z własnych znaczników dla list nieuporządkowanych (<small>UL</small>) i uporządkowanych (<small>OL</small>), wówczas dobrym zwyczajem jest korzystanie z nich zgodnie z przeznaczeniem. Jednakże możesz użyć CSS, aby wyświetlić <small>UL</small> jako posortowaną, a <small>OL</small> jako nieposortowaną, jeśli wolisz.
+</p><p>Różne przeglądarki w różny sposób obsługują te style dla list.
+Nie oczekuj, że Twój arkusz stylów zostanie wyświetlony identycznie we wszystkich.
+</p>
+</td></tr></tbody></table>
+<h4 id="Liczniki" name="Liczniki"> Liczniki </h4>
+<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
+<p><strong>Notatka: </strong> Niektóre przeglądarki nie obsługują liczników.</p>
+</div>
+<p>Możesz używać liczników do różnych elementów, nie tylko list.
+Na przykład w niektórych dokumentacjach możesz chcieć numerować nagłówki lub paragrafy.
+</p><p>Aby określić numerację, musisz zadeklarować <i>counter</i> z określoną nazwą.
+</p><p>W którymś z elementów, zanim rozpocznie się naliczanie, zresetuj licznik, używając właściwości <code>counter-reset</code> i nazwą Twojego licznika.
+Rodzic elementów, które liczysz, jest dobrym miejscem na reset, ale możesz użyć dowolnego elementu, który pojawia się przed elementami listy.
+</p><p>W każdym elemencie, w którym licznik jest inkrementowany, dodaj właściwość <code>counter-increment</code>. Jako wartość podaj nazwę licznika.
+</p><p>Aby wyświetlić wartość licznika, dodaj <code>:before</code> lub <code>:after</code> do selektora i użyj własności <code>content</code> (tak jak na poprzedniej stronie <b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>).
+</p><p>Jako wartość własności <code>content</code> wstaw <code>counter()</code> z nazwą swojego licznika.
+Opcjonalnie określ typ.
+Typy są takie same jak w sekcji '<i>listy uporządkowane</i>.
+</p><p>Zwykle element, który wyświetla licznik, inkrementuje go.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Ta reguła inicjalizuje licznik w każdym elemencie <small>H3</small> z klasą <code>numbered</code>:
+<div style="width: 30em;">
+<p>h3.numbered {counter-reset: mynum;}
+</p>
+</div>
+<p>Ta reguła wyświetla i inkrementuje licznik dla każdego elementu <small>P</small> z klasą <code>numbered</code>:
+</p>
+<div style="width: 30em;">
+<p>p.numbered:before {
+</p>
+<pre class="eval"> content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+</pre>
+</div>
+<p>Wynik wygląda tak:
+</p>
+<table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;">
+<tbody><tr>
+<td><b>Heading</b><br>
+<p><b>1: </b>Lorem ipsum</p>
+<p><b>2: </b>Dolor sit</p>
+<p><b>3: </b>Amet consectetuer</p>
+<p><b>4: </b>Magna aliquam</p>
+<p><b>5: </b>Autem veleum</p>
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Nie należy używać liczników, jeśli nie masz pewności, że każdy, kto czyta Twój dokument, posiada obsługującą je przeglądarkę.
+<p>Jeżeli możesz używać liczników, mają one tę zaletę, że określasz ich styl niezależnie od elementów listy. W powyższym przykładzie liczniki są pogrubione, a elementu listy nie.
+</p><p>Możesz też używać liczników w bardziej złożony sposób — na przykład do numerowania sekcji, nagłówków, podnagłówków i paragrafów w dokumentach.
+Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS do sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatyczne liczniki i numerowanie</a>.
+</p>
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Style_list" name="Zadanie:_Style_list"> Zadanie: Style list </h3>
+<p>Stwórz nowy dokument HTML, <code>doc2.html</code>.
+Skopiuj i wklej poniższą treść, upewniając się, że zaznaczyłeś(aś) cały:
+</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+<p>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+&lt;HEAD&gt;
+&lt;TITLE&gt;Sample document 2&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style2.css"&gt;
+&lt;/HEAD&gt;
+&lt;BODY&gt;
+
+&lt;H3 id="oceans"&gt;The oceans&lt;/H3&gt;
+&lt;UL&gt;
+&lt;LI&gt;Arctic&lt;/LI&gt;
+&lt;LI&gt;Atlantic&lt;/LI&gt;
+&lt;LI&gt;Pacific&lt;/LI&gt;
+&lt;LI&gt;Indian&lt;/LI&gt;
+&lt;LI&gt;Southern&lt;/LI&gt;
+&lt;/UL&gt;
+
+&lt;H3 class="numbered"&gt;Numbered paragraphs&lt;/H3&gt;
+&lt;P class="numbered"&gt;Lorem ipsum&lt;/P&gt;
+&lt;P class="numbered"&gt;Dolor sit&lt;/P&gt;
+&lt;P class="numbered"&gt;Amet consectetuer&lt;/P&gt;
+&lt;P class="numbered"&gt;Magna aliquam&lt;/P&gt;
+&lt;P class="numbered"&gt;Autem veleum&lt;/P&gt;
+
+&lt;/BODY&gt;
+&lt;/HTML&gt;
+</p>
+</div>
+<p>Stwórz nowy arkusz stylów, <code>style2.css</code>.
+Skopiuj i wklej poniższą treść:
+</p>
+<div style="width: 48em;">
+<p>/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+</p>
+<pre class="eval"> content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+</pre>
+</div>
+<p>Jeżeli układ i komentarze Ci nie odpowiadają, zmień je.
+</p><p>Otwórz ten dokument w swojej przeglądarce.
+Jeżeli Twoja przeglądarka obsługuje liczniki, zobaczysz coś takiego, jak poniżej.
+Jeżeli Twoja przeglądarka nie obsługuje stylów, wówczas nie zobaczysz liczb (i prawdopodobnie także dwukropków):
+</p>
+<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+<tbody><tr>
+<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+<ul style="">
+<li>Arctic</li>
+<li>Atlantic</li>
+<li>Pacific</li>
+<li>Indian</li>
+<li>Southern</li>
+</ul>
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p>
+<p><b>1: </b>Lorem ipsum</p>
+<p><b>2: </b>Dolor sit</p>
+<p><b>3: </b>Amet consectetuer</p>
+<p><b>4: </b>Magna aliquam</p>
+<p><b>5: </b>Autem veleum</p>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;">
+<caption>Wyzwania
+</caption><tbody><tr>
+<td> Dodaj jedną regułę do swojego arkusza stylów, aby ponumerować oceany, używając rzymskich liczb od i do v:
+<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+<tbody><tr>
+<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+<ul style="">
+<li>Arctic</li>
+<li>Atlantic</li>
+<li>Pacific</li>
+<li>Indian</li>
+<li>Southern</li>
+</ul>
+</td></tr></tbody></table>
+<p>Jeżeli Twoja przeglądarka obsługuje liczniki, zmień swój arkusz stylów, aby identyfikował nagłówki dużymi literami w takim stylu:
+</p>
+<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+<tbody><tr>
+<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>
+<p><b>. . .</b>
+</p>
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>
+<p><b>. . .</b>
+</p>
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.
+</p><p>Kiedy Twoja przeglądarka wyświetla przykładowy dokument, tworzy przy okazji przestrzeń dookoła elementów, które określają ich rozkład na stronie.
+</p><p>Następna strona opisuje, jak można użyć CSS do pracy z przestrzenią wokół elementów:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Bloki">Bloki</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Lists", "fr": "fr/CSS/Premiers_pas/Listes", "pt": "pt/CSS/Como_come\u00e7ar/Listas" } ) }}
diff --git a/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html b/files/pl/learn/getting_started_with_the_web/how_the_web_works/index.html
index 6d1a97d33c..6d1a97d33c 100644
--- a/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html
+++ b/files/pl/learn/getting_started_with_the_web/how_the_web_works/index.html
diff --git a/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html
new file mode 100644
index 0000000000..128ef84501
--- /dev/null
+++ b/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -0,0 +1,127 @@
+---
+title: JavaScript
+slug: Web/CSS/Na_początek/JavaScript
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+translation_of_original: Web/Guide/CSS/Getting_started/JavaScript
+---
+<p>
+</p><p>Jest to druga część tego kursu. Część II zawiera trochę przykładów pokazujących zakres użycia CSS w Mozilli.
+</p><p>Każda strona Części II ilustruje jak CSS współpracuje z innymi technologiami.
+Te strony nie zostały stworzone po to, aby nauczyć Cię korzystać z tych technologii.
+Jeśli chcesz je poznać, skorzystaj z innych kursów.
+</p><p>Natomiast, te strony zostały stworzone po to, aby pokazać wiele możliwości wykorzystania CSS.
+Aby używać tych stron, powinieneś(aś) znać CSS, ale nie musisz znać innych technologii.
+</p>
+<h3 id="Informacja:_JavaScript" name="Informacja:_JavaScript"> Informacja: JavaScript </h3>
+<p>JavaScript jest <i>językiem programowania</i>.
+Duża część kodu aplikacji Mozilla (na przykład przeglądarki) jest napisana w JavaScripcie.
+</p><p>JavaScript może współpracować z arkuszami stylów, pozwalając Ci pisać aplikacje, które dynamicznie zmieniają styl dokumentu.
+</p><p>Istnieją na to trzy sposoby:
+</p>
+<ul><li>Przez pracę z listę arkuszy stylów dokumentu — na przykład: dodawanie, usuwanie i zmienianie arkusza stylów.
+</li><li>Przez pracę z regułami w arkuszu stylów — na przykład: dodawanie, usuwanie lub modyfikowanie reguł.
+</li><li>Przez pracę z pojedynczymi elementami w DOM — modyfikowanie jego stylu niezależnie od arkusza stylów dokumentu.
+</li></ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Aby dowiedzieć się więcej o JavaScripcie w Mozilli, zajrzyj na stronę <a href="pl/JavaScript">JavaScript</a> na tym wiki.
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Demonstracja_wykorzystania_Javascript-u" name="Zadanie:_Demonstracja_wykorzystania_Javascript-u"> Zadanie: Demonstracja wykorzystania Javascript-u </h3>
+<p>Stwórz nowy dokument HTML, <code>doc5.html</code>.
+Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
+</p>
+<div style="width: 48em; height: 12em; overflow: auto;"><pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+
+&lt;HEAD&gt;
+&lt;TITLE&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style5.css"&gt;
+&lt;SCRIPT type="text/javascript" src="script5.js"&gt;&lt;/SCRIPT&gt;
+&lt;/HEAD&gt;
+
+&lt;BODY&gt;
+&lt;H1&gt;JavaScript sample&lt;/H1&gt;
+
+&lt;DIV id="square"&gt;&lt;/DIV&gt;
+
+&lt;BUTTON type="button" onclick="doDemo(this);"&gt;Click Me&lt;/BUTTON&gt;
+
+&lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre></div>
+<p>Stwórz nowy plik CSS, <code>style5.css</code>.
+Skopiuj i wklej do niego poniższy kod:
+</p>
+<div style="width: 48em;"><pre>/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+  }
+
+button {
+  padding: .5em 2em;
+  }
+</pre></div>
+<p>Stwórz nowy plik tekstowy, <code>script5.js</code>.
+Skopiuj i wklej do niego poniższy kod:
+</p>
+<div style="width: 48em;"><pre>// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "#fa4"
+  button.setAttribute("disabled", "true")
+  setTimeout(clearDemo, 2000, button)
+  }
+
+function clearDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "transparent"
+  button.removeAttribute("disabled")
+  }
+</pre></div>
+<p>Otwórz dokument w swojej przeglądarce i naciśnij przycisk.
+</p><p>To wiki nie obsługuje JavaScriptu na stronach, więc nie jest możliwe zademonstrowanie działania tego kodu tutaj.
+Wygląda to mniej więcej jak poniżej, przed i po naciśnięciu przycisku:
+</p>
+<table>
+<tbody><tr>
+<td style="padding-right: 2em;">
+<table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
+<tbody><tr>
+<td><p><b>JavaScript demonstration</b></p>
+<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;">
+<div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;">
+</div></div></td></tr></tbody></table>
+</td><td>
+<table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
+<tbody><tr>
+<td><p><b>JavaScript demonstration</b></p>
+<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;">
+<div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;">
+</div></div></td></tr></tbody></table>
+</td></tr></tbody></table>
+<p>Uwagi dotyczące demonstracji:
+</p>
+<ul><li>Dokument HTML ma podpięty arkusz stylów, a także plik ze skryptem.
+</li><li>Skrypt operuje na niezależnych elementach w DOM-ie. Modyfikuje styl obiektów bezpośrednio. Modyfikuje styl przycisku pośrednio, zmieniając jego atrybut.
+</li><li>W JavaScripcie <code>document.getElementById("square")</code> jest podobne w działaniu do selektora CSS <code>#square</code>.
+</li><li>W JavaScripcie <code>backgroundColor</code> odpowiada własności <code>background-color</code> w CSS.
+</li><li>Twoja przeglądarka posiada wbudowaną regułę CSS dla <code>button{{ mediawiki.external('disabled=\"true\"') }}</code>, która zmienia wygląd przycisku, kiedy zostaje on wyłączony.
+</li></ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> Zmień skrypt tak, aby obiekt square skakał w prawo o 20 em, kiedy jego kolor się zmienia, i skakał z powrotem, kiedy kolor wraca do podstawowego.
+</td></tr></tbody></table>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.
+</p><p>W tej demonstracji dokument HTML posiada odnośnik do skryptu, mimo że używa go tylko element przycisku.
+Mozilla rozszerza CSS, aby umożliwić wiązanie kodu JavaScript (oraz treści i innych arkuszy stylów) z wybranymi elementami.
+Następna strona opisuje to:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Wi%c4%85zania_XBL">Wiązania XBL</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pt": "pt/CSS/Como_come\u00e7ar/JavaScript" } ) }}
diff --git a/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html b/files/pl/learn/javascript/first_steps/a_first_splash/index.html
index 0d0f49c69a..0d0f49c69a 100644
--- a/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html
+++ b/files/pl/learn/javascript/first_steps/a_first_splash/index.html
diff --git a/files/pl/learn/javascript/pierwsze_kroki/index.html b/files/pl/learn/javascript/first_steps/index.html
index ab90523dce..ab90523dce 100644
--- a/files/pl/learn/javascript/pierwsze_kroki/index.html
+++ b/files/pl/learn/javascript/first_steps/index.html
diff --git a/files/pl/learn/javascript/pierwsze_kroki/math/index.html b/files/pl/learn/javascript/first_steps/math/index.html
index 3e5563d0da..3e5563d0da 100644
--- a/files/pl/learn/javascript/pierwsze_kroki/math/index.html
+++ b/files/pl/learn/javascript/first_steps/math/index.html
diff --git a/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html b/files/pl/learn/javascript/first_steps/variables/index.html
index d1b55aea20..d1b55aea20 100644
--- a/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html
+++ b/files/pl/learn/javascript/first_steps/variables/index.html
diff --git a/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html b/files/pl/learn/javascript/first_steps/what_is_javascript/index.html
index 3898eb049c..3898eb049c 100644
--- a/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html
+++ b/files/pl/learn/javascript/first_steps/what_is_javascript/index.html
diff --git a/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html b/files/pl/learn/javascript/first_steps/what_went_wrong/index.html
index 1a88f2b797..1a88f2b797 100644
--- a/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html
+++ b/files/pl/learn/javascript/first_steps/what_went_wrong/index.html
diff --git a/files/pl/learn/javascript/obiekty/index.html b/files/pl/learn/javascript/objects/index.html
index 9952e760a3..9952e760a3 100644
--- a/files/pl/learn/javascript/obiekty/index.html
+++ b/files/pl/learn/javascript/objects/index.html
diff --git a/files/pl/learn/server-side/configuring_server_mime_types/index.html b/files/pl/learn/server-side/configuring_server_mime_types/index.html
new file mode 100644
index 0000000000..87aea6b3b3
--- /dev/null
+++ b/files/pl/learn/server-side/configuring_server_mime_types/index.html
@@ -0,0 +1,114 @@
+---
+title: Poprawna kofiguracja MIME na serwerze
+slug: Web/Security/Securing_your_site/Konfiguracja_MIME_na_serwerze
+tags:
+  - HTTP
+translation_of: Learn/Server-side/Configuring_server_MIME_types
+---
+<h2 id="Background" name="Background">Kontekst</h2>
+
+<p>Wiele serwerów webowych domyślnie ma skonfigurowane raportowanie typów MIME <code>text/plain</code> lub <code>application/octet-stream</code> w przypadku nierozpoznanych typów zawartości. Kiedy nowe typy zawartości dopiero powstają lub są dodawane do serwerów webowych zdarza się, że administratorzy webowi nie dodają nowo-powstałych typów MIME do ustawień serwera webowego. I to właśnie stanowi główną bolączkę użytkowników przeglądarek opartych o Gecko, które uznają typy MIME jako zraportowane przez serwery i aplikacje webowe.</p>
+
+<h3 id="What_are_MIME_types.3F" name="What_are_MIME_types.3F">Czym są typy MIME?</h3>
+
+<p>Typy MIME opisują typ danych zawartości mailowej lub obsługiwanej przez serwery lub aplikacje webowe i ich zadaniem jest pomoc przeglądarce w przetworzeniu i wyświetleniu zawartości. Przykładami typów MIME są:</p>
+
+<ul>
+ <li><code>text/html</code> dla zwykłych stron WWW</li>
+ <li><code>text/plain</code> dla zwykłego tekstu</li>
+ <li><code>text/css</code> dla kaskadowych arkuszy stylów</li>
+ <li><code>text/javascript</code> dla skryptów</li>
+ <li><code>application/octet-stream</code> przy pobieraniu pliku</li>
+ <li><code>application/x-java-applet</code> dla apletów Javy</li>
+ <li><code>application/pdf</code> dla dokumentów PDF</li>
+</ul>
+
+<h3 id="Technical_Background" name="Technical_Background">Kontekst techniczny</h3>
+
+<p>Zarejestrowane wartości MIME są dostępne w <a class="external" href="http://www.iana.org/assignments/media-types/index.html">Typy danych IANA | MIME</a>. <a class="external" href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">Specyfikacja HTTP</a> definiuje nadzbiór typów MIME, który jest używany do opisu typów danych używanych w sieci WWW.</p>
+
+<h3 id="Why_are_correct_MIME_types_important.3F" name="Why_are_correct_MIME_types_important.3F">Dlaczego poprawne typy MIME są tak istotne?</h3>
+
+<p><img alt="Example of an incorrect MIME type result" class="internal" src="/@api/deki/files/729/=Incorrect-mime-screen.jpg" style="float: right;"> Jeśli serwer lub aplikacja webowa dla danej zawartości raportuje niepoprawny typ MIME, przeglądarka nie ma możliwości, <em>wg specyfikacji HTTP</em>, wiedzieć, że autor zainicjował przetworzenie i wyświetlenie danej zawartości w odmienny sposób, niż domyślny dla zraportowanego typu MIME.</p>
+
+<p>Niektóre z przeglądarek, jak Microsoft® Internet Explorer, dążą do zezwalania niepoprawnie skonfigurowanym serwerom i aplikacjom webowym na <em><a class="external" href="http://support.microsoft.com/default.aspx?sd=msdn&amp;scid=kb;en-us;293336">zgadywanie</a></em>, jaki powinien być poprawny typ MIME. Takie podejście uchroniło wielu administratorów webowych przed własnymi błędami - Internet Explorer kontynuuje przetwarzanie zawartości zgodnie z oczekiwaniami mimo, że sam serwer webowy nie jest poprawnie skonfigurowany i np. wyświetla obrazek, który został zraportowany jako będący rzekomo zwykłym tekstem.</p>
+
+<p>Obsługa treści poprzez używanie poprawnego typu MIME jest istotna także z punktu widzenia bezpieczeństwa; istnieje ryzyko wyrządzenia przez niechcianą treść szkód na komputerze użytkownika poprzez symulowanie, że typ danej zawartości jest bezpieczny mimo, że w istocie może nie być to prawda.</p>
+
+<div class="note">
+<p><strong>Zauważ:</strong> Kiedyś Firefox ładował pliki CSS nawet, jeśli posiadały błędny typ MIME. Wystarczyło, że dokument HTML, który o nie wnioskował działał w trybie osobliwości (quirks mode). Ze względów bezpieczeństwa, {{ gecko("2.0") }} nie będzie dłużej kontynować tego typu zachowań w przypadku arkuszy stylów ładowanych z innych źródeł, niż dokument, który o nie wnioskował. Jeśli Twój arkusz stylów pochodzi z innego źródła, niż główny dokument <strong>musisz </strong>obsłużyć go poprzez poprawny typ MIME (<code>text/css</code>).</p>
+
+<p>Gecko 1.9.1.11 (Firefox 3.5.11) i Gecko 1.9.2.5 (Firefox 3.6.5) również zaimplementowały tę łatkę bezpieczeństwa, ale by polepszyć zgodność <strong>tymczasowo </strong>istniała heurytrystyka pozwalająca na załadowanie, jeśli pierwsza linia w arkuszu stylów wydawała się być poprawną konstrukcją CSSową; heurytrystyka ta została usuninęta w Firefoxie 4 i od tego czasu należy odpowiednio ustawić typy MIME <code>text/css</code>, aby strony CSS zostały rozpoznane.</p>
+</div>
+
+<h2 id="Why_browsers_should_not_guess_MIME_types" name="Why_browsers_should_not_guess_MIME_types">Dlaczego przeglądarki nie powinny zgadywać typów MIME</h2>
+
+<p>Poza naruszaniem specyfikacji HTTP istnieją dodatkowe powody, dla których zgadywanie typów MIME nie należy do najlepszych praktyk:</p>
+
+<h4 id="Loss_of_control" name="Loss_of_control">Utrata kontroli</h4>
+
+<p>Jeśli przeglądarka ignoruje zaraportowany typ MIME, administratorzy i autorzy webowi nie mają dłużej kontroli nad sposobem przetwarzania danej zawartości.</p>
+
+<p>Przykładowo, strona WWW ukierunkowana na twórców witryn może życzyć sobie przesłania pewnych dokumentów, przykładowo HTMLowych, jak również <code>text/html</code> lub <code>text/plain</code>, by móc je przetworzyć i wyświetlić jako HTML lub jako kod źródłowy. Jeśli przeglądarka będzie zgadywać typ MIME, tego typu możliwość nie będzie dłużej dostępna dla autora.</p>
+
+<h4 id="Security" name="Security">Bezpieczeństwo</h4>
+
+<p>Niektóre typy zawartości, jak pliki wykonywalne, są przeważnie niebezpieczne. Z tego powodu te typy MIME przeważnie są ograniczone pod względem akcji, jakie podejmie przeglądarka w przypadku tego typu plików. Plik wykonywalny nie powinien wykonywać się na komputerze użytkownika, co najwyżej może mieć prawo do wyświetlenia okienka <strong>z zapytaniem do użytkownika</strong>, czy chce pobrać ten plik.</p>
+
+<p>W Internet Explorerze zgadywanie typów MIME doprowadziło do naruszenia bezpieczeństwa - przez niepoprawne zgadywanie szkodliwe treści bywały oznaczane jako bezpieczne, co skutkowało pominięciem wyświetlania standardowego okienka pobierania i przedostawaniem się plików wykonywalnych na komputery użytkowników.</p>
+
+<h2 id="Jak_określić_typ_MIME_który_jest_wysyłany_przez_serwer">Jak określić typ MIME, który jest wysyłany przez serwer</h2>
+
+<p>W Firefoxie załaduj plik i użyj Narzędzia | Informacje o witrynie. Możesz również użyć <a class="external" href="http://www.rexswain.com/httpview.html">Rex Swain's HTTP Viewer</a> lub <a class="external" href="http://livehttpheaders.mozdev.org/">Live HTTP Headers</a> , aby zobaczyć pełne nagłówki i treść każdego pliku wysłanego z serwera webowego.</p>
+
+<p>W odniesieniu do standardów, tag <code>meta</code> o typie MIME jak np. <code><span class="nowiki">&lt;meta http-equiv="Content-Type" content="text/html"&gt;</span></code> powinien być ignorowany, jeśli w nagłówku znajduje się zapis {{HTTPHeader("Content-Type")}}. Zamiast szukać tej linii w kodzie źródłowym HTML lepiej użyć powyższych technik do określenia typu MIME wysyłanego przez serwer.</p>
+
+<h2 id="Jak_określić_prawidłowy_typ_MIME_dla_Twojej_treści">Jak określić prawidłowy typ MIME dla Twojej treści</h2>
+
+<p>Jest kilka kroków, które należy zrobić by określić poprawną wartość dla typu MIME twojej treści.</p>
+
+<ol>
+ <li>Jeśli twoja treść została utworzona z pomocą zewnętrznego oprogramowania, przeczytaj jego dokumentację by dowiedzieć się, jakie typy MIME powinny zostać zraportowane dla danych typów danych.</li>
+ <li>Zerknij na <a class="external" href="http://www.iana.org/assignments/media-types/index.html">rejest typów danych IANA | MIME</a>. Zawiera on wszystkie zarejestrowane typy MIME.</li>
+ <li>Jeśli typ danych jest wyświetlany poprzez rozszerzenie w Netscape Gecko, zainstaluj wtyczkę, a następnie sprawdź Pomoc-&gt;O Menu Wtyczek, by sprawdzić jakie typy MIME są związane z typem danych.</li>
+ <li>Poszukaj rozszerzenia pliku w <a class="external" href="http://filext.com/">FILExt</a> lub <a class="external" href="http://www.file-extensions.org/">File extensions reference</a>, aby sprawdzić jakie typy MIME są związane z tym rozszerzeniem.</li>
+</ol>
+
+<h2 id="Jak_przygotować_serwer_żeby_wysyłał_poprawne_typy_MIME">Jak przygotować serwer, żeby wysyłał poprawne typy MIME</h2>
+
+<p>Fundamentalną kwestią jest konfiguracja Twojego serwera w taki sposób, by wysyłał poprawny nagłówek HTTP {{HTTPHeader("Content-Type")}} dla każdego dokumentu.</p>
+
+<ul>
+ <li>Jeśli używasz serweru webowego Apache to po prostu skopiuj ten <a href="/en/Sample_.htaccess_file" title="en/Sample_.htaccess_file">fragment pliku .htaccess</a> do lokalizacji, która zawiera pliki, które chcesz wysłać z poprawnymi typami MIME. Jeśli masz cały podkatalog plików, po prostu umieść plik w katalogu nadrzędnym; nie ma potrzeby umieszczania go w każdym podkatalogu.</li>
+ <li>Jeśli uzywasz Microsoft IIS, sprawdź <a class="external" href="http://technet2.microsoft.com/windowsserver/en/library/ec84d61e-3e24-4de0-b35a-d41eb662fefb1033.mspx">ten artykuł</a> na Microsoft TechNet</li>
+ <li>Jesli używasz do generowania treści używasz skryptu działającego po stronie serwera, możesz po prostu dodać jedną linijkę praktycznie na samej górze Twojego skryptu. Możesz obsługiwać zawartość inną, niż HTML, właściwą dla Perla, PHP, ASP czy Javy - tylko zmień odpowiednio typ MIME.
+  <ul>
+   <li>W przypadku Pearl CGI zadbaj o zapis <code>print "Content-Type: text/html\n\n";</code> przed jakimkolwiek pozostałym outputem. Jeśli używasz modułu CGI to możesz zamiast tego użyć linii <code>print $cgi-&gt;header('text/html');</code>, gdzie <code>$cgi</code> to Twoja referencja do instancji CGI.</li>
+   <li>W przypadku PHP zadbaj o zapis <code>header('Content-Type: text/html');</code> przed jakimkolwiek pozostałym outputem.</li>
+   <li>W przypadku ASP zadbaj o zapis <code>response.ContentType = "text/html";</code> przed jakimkolwiek pozostałym outputem.</li>
+   <li>W przypadku servletu Javy zadbaj o zapis <code>response.setContentType("text/html");</code> na górze Twojej metody <code>doGet</code> lub <code>doPost</code>, gdzie <code>response</code> to referencja do <code>HttpServletResponse</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Related_Links" name="Related_Links">Powiązane linki</h3>
+
+<ul>
+ <li><a href="/en/Incorrect_MIME_Type_for_CSS_Files" title="en/Incorrect_MIME_Type_for_CSS_Files">Niepoprawne typy MIME dla plików CSS</a></li>
+ <li><a class="external" href="http://www.iana.org/assignments/media-types/index.html">Typy danych IANA | MIME</a></li>
+ <li><a class="external" href="http://www.w3.org/Protocols/HTTP/1.1/spec.html">Protokół transmisji hipertekstu — HTTP/1.1</a></li>
+ <li><a class="external" href="http://support.microsoft.com/default.aspx?sd=msdn&amp;scid=kb;en-us;293336">Microsoft - 293336 - INFO: WebCast: Podejście do typów MIME w Microsoft Internet Explorerze</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/networking/moniker/overview/appendix_a.asp">Microsoft - Appendix A: Wykrywanie typów MIME Type Detection w Internet Explorerze</a></li>
+ <li><a class="external" href="http://www.microsoft.com/windows/ie/downloads/critical/q290108/">Microsoft - Aktualizacja Bezpieczeństwa, 29.03.2001</a></li>
+ <li><a class="external" href="http://www.microsoft.com/windows/ie/downloads/critical/Q313675/">Microsoft - Aktualizacja Bezpieczeństwa, 13.12.2001</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Informacje dot. dokumentu źródłowego</h3>
+
+<ul>
+ <li>Author: Bob Clary, date: 20 Feb 2003</li>
+</ul>
+</div>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</div>
diff --git a/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html b/files/pl/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
index a23787a253..a23787a253 100644
--- a/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html
+++ b/files/pl/learn/server-side/express_nodejs/tutorial_local_library_website/index.html