---
title: CSSs
slug: Learn/CSS
translation_of: Learn/CSS
---
<div>{{LearnSidebar}}</div>

<p class="summary">Kaskadowe arkusze styli (ang. Cascading Style Sheets) — lub po prostu CSS — jest drugą technologią której powinieneś się nauczyć po HTML, który jest używany do zdefiniowania struktury i semantyki zawartości strony. CSS jest używany do nadania jej wyglądu i rozmieszczenia elementów. Dla przykładu CSS możesz użyć do zmiany czcionki, koloru, wielkości, odstępu twojej zawartości, podzielenia jej na wiele kolumn, lub dodaniaanimacji i innych dekoracyjnych cech.</p>

<h2 id="Ścieżka_nauczania">Ścieżka nauczania</h2>

<p>Zanim przystąpisz do nauki CSS, powinieneś w pierwszej kolejności poznać podstawy HTML. Rekomendujemy, byś przerobił najpierw rozdział <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Wprowadzenie do HTML</a> — później możesz uczyć się o:</p>

<ul>
 <li>CSS, zaczynająć od rozdziału <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a></li>
 <li>Bardziej zaawansowanych <a href="https://developer.mozilla.org/en-US/Learn/HTML#Modules">Modułach HTML</a> </li>
 <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, i jak jej używać do dodawania dynamicznych funkcjonalności na stronach internetowych</li>
</ul>

<p>Kiedy już zrozumiesz absolutne podstawy HTML, rekomendujemy byś uczył się HTML i CSS jednocześnie, skacząc wte i wewte między tymi dwoma tematami. Powodem jest to, że HTML jest dalece bardziej interesujący z CSS, a z drugiej strony nie możesz naprawdę poznać CSS bez znajomości HTML.</p>

<p>Zanim zaczniesz ten temat, powinieneś również mieć co najmniej podstawową umiejętność korzystania z komputera oraz biernego używania Internetu (tzn. przeglądania stron internetowych). Powinieneś mieć skonfigurowane podstawowe środowisko pracy w sposób wyszczególniony w rozdziale <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalowanie podstawowego oprogramowania</a>, a także rozumieć jak się tworzy i zarządza plikami, jak zostało to wyszczególnione w rozdziale <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a> — oba te rozdziały są częścią naszego modułu dla zupełnych początkujących <a href="/en-US/docs/Learn/Getting_started_with_the_web">Rozpocznij pracę z siecią</a>.</p>

<p>Zalecane jest, byś przerobił najpierw moduł <a href="/en-US/docs/Learn/Getting_started_with_the_web">Rozpocznij pracę z siecią</a> zanim przystąpisz do tego tematu, jednak nie jest to absolutnie konieczne; wiele z tego, co zostało poruszone w artykule Podstawy CSS, znajduje się także w module Wprowadzenie do CSS, jednak opisane jest dużo bardziej szczegółowo.</p>

<h2 id="Moduły">Moduły</h2>

<p>Ten rozdział zawiera następujące moduły, w sugerowanej kolejności przerabiania ich. Zdecydowanie powinieneś zacząć po kolei, od pierwszego.</p>

<dl>
 <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a></dt>
 <dd>Ten moduł pozwoli Ci zapoznać się z podstawami działania CSS, obejmującymi selektory i właściwości, pisanie reguł CSS, załączanie CSS do HTML, określanie wymiarów, kolorów i innych jednostek w CSS, kaskadowość i dziedziczenie, podstawy modelu pudełkowego (box model) oraz debugowanie CSS.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Stylowanie tekstu</a></dt>
 <dd>W tym module spojrzymy na podstawy stylowania tekstu, takie jak ustawianie czcionki, pogrubienia i kursywy, interlinie i odstępy między literami, cieniowania i inne cechy tekstu. Na koniec załączymy <span style="background-color: #f6d5d9;">niestandardowe </span>czcionki do Twojej strony oraz ostylujemy listy i linki.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Stylowanie kontenerów</a></dt>
 <dd>Następnie zajmiemy się stylowaniem kontenerów, jednym z fundamentalnych kroków w kierunku tworzenia układów (layoutów) stron internetowych. W tym module powtórzymy model pudełkowy (box model), dalej spojrzymy na sposoby kontrolowania układu kontenerów poprzez ustawianie dopełnienia (padding), ramek (borders) i marginesów (margins), ustawimy spersonalizowane kolory tła, obrazków i innych cech, a także zajmiemy się bardziej wyszukanymi cechami jak cieniowania i filtry na kontenerach.</dd>
 <dt>Układ (layout) CSS</dt>
 <dd>W tym momencie spojrzeliśmy już na podstawy CSS, na to jak stylować tekst, a także na to jak stylować i manipulować kontenerami, w których zawarta jest Twoja treść. Teraz pora przyjrzeć się jak umieścić Twoje kontenery we właściwych miejscach na stronie, zarówno względem siebie, jak i w relacji do okna przeglądarki. Poznaliśmy już niezbędne warunki, można teraz się zagłębić w kwestię układu (layoutu) CSS, przyglądając się różnym ustawieniom wyświetlania, tradycyjnym metodom projektowania układów (layoutów) takimi jak floaty i pozycjonowanie, oraz tym świeżo wprowadzonym narzędziom jak flexbox.</dd>
</dl>

<h2 id="Rozwiązywanie_częstych_problemów_w_CSS">Rozwiązywanie częstych problemów w CSS</h2>

<p><a href="/en-US/docs/Learn/CSS/Howto">Rozwiązywanie częstych problemów przy użyciu CSS</a> zapewnia linki do sekcji, w których dowiesz się jak rozwiązywać najczęstsze problemy w budowaniu stron internetowych.</p>

<p>Na początku beziesz zmieniał kolory elementów kodu HTML oraz ich tła; rozmiary, kształty, pozycje na stronie oraz dodawał i definiował ich obramowania.<span lang="pl">Możesz zrobić wiele jeśli dobrze rozumiesz podstawy CSS. Jedną z najlepszych rzeczy w nauce CSS jest to, że kiedy poznasz podstawy, zazwyczaj masz dobre wyczucie, co można, a czego nie można zrobić, nawet jeśli tak naprawdę nie wiesz, jak to zrobić!</span></p>

<h2 id="Zobacz_również">Zobacz również</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS">CSS w MDN</a></dt>
 <dd><span lang="pl">Główny punkt wejścia do dokumentacji CSS w MDN, gdzie znajdziesz szczegółową dokumentację dla wszystkich funkcji języka CSS. Chcesz się dowiedzieć więcej? Tutaj możesz zacząć.</span></dd>
</dl>