Selektory | Funkcje | Wsparcie przeglądarek | 🅰 = animowalność
| /* ... */ | Definiuje komentarz w CSS | |
| align-content | Określa wyrównanie między liniami w elastycznym (flexible) kontenerze, gdy elementy nie zajmują jego całej dostępnej przestrzeni. | |
| align-items | Określa wyrównanie elementów w elastycznym kontenerze. | |
| align-self | Określa wyrównanie wybranych elementów w elastycznym kontenerze. | |
| all | Resetuje wszystkie właściwości (oprócz unicode-bidi i direction) | |
| ANIMATION | ||
| animation | Skrót dla wszystkich własności animacji (animation-*) | |
| animation-delay | Określa opóźnienie rozpoczęcia animacji | |
| animation-direction | Określa kierunek animacji - czy należy odtwarzać do przodu, do tyłu, czy w naprzemiennych cyklach | |
| animation-duration | Określa czas trwania animacji do ukończenia jednego cyklu | |
| animation-fill-mode | Określa styl elementu, gdy animacja nie jest odtwarzana (przed jej uruchomieniem, po zakończeniu lub w obu przypadkach) | |
| animation-iteration-count | Określa liczbę odtworzeń animacji | |
| animation-name | Określa nazwę animacji dla @keyframes | |
| animation-play-state | Określa, czy animacja jest uruchomiona, czy wstrzymana | |
| animation-timing-function | Określa krzywą prędkości animacji | |
| backface-visibility | Określa czy tylna ściana elementu ma być widoczna czy nie gdy jest obserwowana | |
| BACKGROUND | ||
| background | 🅰 | Skrót właściwości tła (background-*) |
| background-attachment | Określa, czy obraz tła ma być przewijany z resztą strony, czy też ma być nieruchomy | |
| background-blend-mode | Określa tryb mieszania każdej warstwy tła (kolor/obraz) | |
| background-clip | Określa, jak daleko tło (kolor lub obraz) powinno się rozciągać w obrębie elementu | |
| background-color | 🅰 | Określa kolor tła elementu |
| background-image | Określa jeden lub więcej obrazów tła dla elementu | |
| background-origin | Określa pozycję początkową obrazu tła | |
| background-position | 🅰 | Określa pozycję obrazu tła |
| background-repeat | Określa, czy/jak obraz w tle będzie powtarzany | |
| background-size | 🅰 | Określa rozmiar obrazów tła |
| BORDER | ||
| border | 🅰 | Skrót właściwości obramowania - szerokości, stylu i koloru (border-width, border-style i border-color) |
| border-color | 🅰 | Ustawia kolor wszystkich czterech krawędzi obramowania |
| border-style | Ustawia styl krawędzi obramowania (wszystkich czterech) | |
| border-width | 🅰 | Ustawia szerokość wszystkich czterech krawędzi obramowania |
| border-bottom | 🅰 | Skrót właściwości dla dolnej krawędzi obramowania - border-bottom-width, border-bottom-style i border-bottom-color |
| border-bottom-color | 🅰 | Ustawia kolor dolnej krawędzi obramowania |
| border-bottom-style | Ustawia styl dolnej krawędzi obramowania | |
| border-bottom-width | 🅰 | Ustawia szerokość dolnej krawędzi obramowania |
| border-left | 🅰 | Skrót właściwości dla lewego obramowaniaborder-left-* |
| border-left-color | 🅰 | Ustawia kolor lewego obramowania |
| border-left-style | Ustawia styl lewej krawędzi obramowania | |
| border-left-width | 🅰 | Ustawia szerokość lewej krawędzi obramowania |
| border-right | 🅰 | Skrót właściwości dla prawej krawędzi obramowaniaborder-right-* |
| border-right-color | 🅰 | Ustawia kolor prawej krawędzi obramowania |
| border-right-style | Ustawia styl prawej krawędzi obramowania | |
| border-right-width | 🅰 | Ustawia szerokość prawej krawędzi obramowania |
| border-top | 🅰 | Skrót właściwości border-top-width, border-top-style i border-top-color |
| border-top-color | 🅰 | Ustawia kolor górnej krawędzi obramowania |
| border-top-style | Ustawia styl górnej krawędzi obramowania | |
| border-top-width | 🅰 | Ustawia szerokość górnej krawędzi obramowania |
| border-image | Skrót do własności ustawień obrazu obramowania (border-image-*) | |
| border-image-outset | Określa wielkość, o jaką obszar obrazu obramowania wykracza poza pole obramowania | |
| border-image-repeat | Określa, czy obraz obramowania powinien być rozciągany (domyślnie), zaokrąglany czy powtarzany | |
| border-image-slice | Określa sposób wycinania obrazu obramowania | |
| border-image-source | Określa ścieżkę do obrazu, który ma być używany jako obramowanie | |
| border-image-width | Określa szerokość obrazu obramowania | |
| border-radius | Skrót właściwości dla 4 promieni (zaokrągleń) narożników obramowania border-*-*-radius | |
| border-bottom-left-radius | 🅰 | Definiuje promień zaokrąglenia lewego dolnego rogu obramowania |
| border-bottom-right-radius | 🅰 | Definiuje promień zaokrągleni prawego dolnego rogu obramowania |
| border-top-left-radius | 🅰 | Definiuje promień górnego lewego rogu obramowania |
| border-top-right-radius | 🅰 | Definiuje promień górnego prawego rogu obramowania |
| border-collapse | Określa, czy obramowania w tabeli powinny zostać zwinięte w jedną ramkę, czy też rozdzielone (domyślnie) | |
| border-spacing | 🅰 | Ustawia odległość między krawędziami obramowań sąsiednich komórek (tylko gdy nie zmieniono border-collapse: separate na :collapse) |
| bottom | 🅰 | Ustawia pozycję elementów od dołu ich elementu nadrzędnego |
| box-decoration-break | Ustawia zachowanie tła i obramowania elementu przy podziale strony lub, w przypadku elementów wbudowanych (in-line), przy podziale linii | |
| box-shadow | 🅰 | Dołącza jeden lub więcej cieni do elementu |
| box-sizing | Definiuje sposób obliczania szerokości i wysokości elementu: czy powinny one zawierać wypełnienie (padding) i obramowanie, czy nie | |
| break-after | Określa zachowanie podziału strony, kolumny lub regionu (page-, column-, region-) po wygenerowanym pudełka | |
| break-before | Określa zachowanie podziału strony, kolumny lub regionu przed wygenerowanym pudełkiem | |
| break-inside | Określa zachowanie podziału strony, kolumny lub regionu w wygenerowanym pudełku | |
| caption-side | Określa położenie podpisu tabeli | |
| caret-color | Określa kolor karetki kursora w danych wejściowych, obszarach tekstowych lub w jakimkolwiek edytowalnym elemencie | |
| @charset | Określa kodowanie znaków używane w arkuszu stylów | |
| clear | Określa, z której strony elementu elementy pływające nie mogą się unosić | |
| clip | 🅰 | Określa przycięcie elementu pozycjonowanego absolutnie. (Przestarzałe! zalecane: clip-path) |
| clip-path | 🅰- | Pozwala przyciąć element do podstawowego kształtu lub źródła SVG. Animowalne 🅰 dla basic-shape. |
| color | 🅰 | Ustawia kolor testu |
| COLUMN(s) | ||
| columns | 🅰 | Skrót właściwości szerokości i liczby kolumn (column-width i column-count) |
| column-count | 🅰 | Określa liczbę kolumn, na które należy podzielić element |
| column-width | 🅰 | Określa szerokość kolumny |
| column-fill | Określa sposób wypełniania kolumn (zrównoważony lub nie) | |
| column-gap | 🅰 | Określa odstęp między kolumnami |
| column-rule | 🅰 | Skrót właściwości column-rule-* |
| column-rule-color | 🅰 | Określa kolor pionowej linii rozdzielającej kolumny |
| column-rule-style | Określa styl pionowej linii między kolumnami | |
| column-rule-width | 🅰 | Określa szerokość pionowej linii między kolumnami |
| column-span | Określa ile kolumn powinien obejmować dany element (rozpiętość) | |
| content | Używany z pseudoelementami :before i :after do wstawiania generowanej treści | |
| counter-increment | Zwiększa lub zmniejsza wartość jednego lub więcej liczników CSS | |
| counter-reset | Tworzy lub resetuje jeden lub więcej liczników CSS | |
| cursor | Określa wygląd kursora myszy wyświetlany po wskazaniu elementu | |
| direction | Określa kierunek tekstu/pisania tekstu | |
| display | Określa sposób wyświetlania określonego elementu HTML | |
| empty-cells | Określa, czy ramki i tło mają być wyświetlane w pustych komórkach w tabeli | |
| 🛠️ filter | 🅰 | Definiuje efekty (np. Rozmycie lub przesunięcie koloru) na elemencie przed jego wyświetleniem |
| flex | 🅰 | Skrót właściwości flex-grow, flex-shrink i flex-basis |
| flex-basis | 🅰 | Określa początkową długość elementu elastycznego |
| flex-grow | 🅰 | Określa ile razy element wzrośnie w stosunku do reszty (elementów elastycznych) |
| flex-shrink | 🅰 | Określa sposób kurczenia się elementu w stosunku do reszty |
| flex-flow | Skrót właściwości flex-direction i flex-wrap | |
| flex-direction | Określa kierunek elementów elastycznych | |
| flex-wrap | Określa, czy elementy elastyczne powinny się zawijać, czy nie | |
| float | Określa, czy i w jaki sposób element powinien się unosić (pływać) | |
| FONT | ||
| @font-face | Reguła zezwalająca witrynom na pobieranie i używanie czcionek innych niż „bezpieczne dla sieci” | font | 🅰 | Skrót właściwości font-style, font-variant, font-weight, font-size/line-height, font-family |
| font-family | Określa rodzinę czcionek dla tekstu | |
| font-size | 🅰 | Określa rozmiar czcionki tekstu |
| font-style | Określa styl czcionki dla tekstu | |
| font-variant | Określa, czy tekst powinien być wyświetlany małą czcionką | |
| font-weight | 🅰 | Określa wagę (grubość) czcionki |
| font-feature-settings | Umożliwia kontrolę nad zaawansowanymi funkcjami typograficznymi czcionek OpenType | |
| font-kerning | Kontroluje wykorzystanie informacji o kerningu (sposób rozmieszczania liter) | |
| font-size-adjust | 🅰 | Kontrola rozmiaru czcionki poprzez 'wartość współczynnika kształtu', gdy pierwsza wybrana czcionka nie jest dostępna (na dziś tylko w Firefox) |
| font-stretch | 🅰 | Wybiera normal, condensed lub expanded face z rodziny czcionek |
| font-variant-caps | Kontroluje użycie alternatywnych glifów dla kapitalików | |
| font-synthesis | Kontroluje, które brakujące kroje pisma (pogrubienie lub kursywa) mogą zostać zsyntetyzowane przez przeglądarkę | |
| font-variant-alternates | Kontroluje użycie alternatywnych glifów powiązanych z alternatywnymi nazwami zdefiniowanymi w @font-feature-values | |
| font-language-override | Kontroluje użycie specyficznych dla języka glifów w kroju pisma | |
| @font-feature-values | Umożliwia autorom używanie wspólnej nazwy w font-variant-alternate dla funkcji aktywowanej inaczej w OpenType | |
| font-variant-east-asian | Kontroluje użycie alternatywnych glifów w skryptach wschodnioazjatyckich (np. Japońskim i chińskim) | |
| font-variant-ligatures | Określa, które ligatury i formy kontekstowe są używane w treści tekstowej elementów, których dotyczą | |
| font-variant-numeric | Kontroluje użycie alternatywnych glifów dla liczb, ułamków i znaczników porządkowych | |
| font-variant-position | Kontroluje użycie alternatywnych glifów o mniejszych rozmiarach umieszczonych jako indeks górny lub dolny względem linii bazowej czcionki | |
| grid | 🅰 | Skrót właściwości grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns i grid-auto-flow |
| grid-area | 🅰 | Albo przypisuje nazwę elementu siatki albo jest Skrótem właściwości grid-row-start, grid-column-start, grid-row-end i grid-column-end |
| grid-auto-columns | 🅰 | Określa domyślny rozmiar kolumny |
| grid-auto-flow | 🅰 | Określa automatyczny sposób wstawiania elementów do siatki |
| grid-auto-rows | 🅰 | Określa domyślny rozmiar wiersza |
| grid-column | 🅰 | Skrót właściwości grid-column-start i grid-column-end |
| grid-column-end | 🅰 | Określa, gdzie zakończyć element siatki (kolumnę) |
| grid-column-gap | 🅰 | Określa rozmiar odstępu między kolumnami w układzie siatki |
| grid-column-start | 🅰 | Określa od której kolumny zacząć element siatki |
| grid-gap | 🅰 | Skrót właściwości grid-row-gap i grid-column-gap |
| grid-row | 🅰 | Skrót właściwości grid-row-start i grid-row-end |
| grid-row-end | 🅰 | Określa, gdzie zakończyć element siatki (wiersz) |
| grid-row-gap | 🅰 | Określa rozmiar odstępu między wierszami |
| grid-row-start | 🅰 | Określa od którego wiersza zacząć element siatki |
| grid-template | 🅰 | Skrót właściwości grid-template-rows, grid-template-columns i grid-areas |
| grid-template-areas | 🅰 | Określa sposób wyświetlania kolumn i wierszy przy użyciu nazwanych elementów siatki |
| grid-template-columns | 🅰 | Określa rozmiar kolumn i ich liczbę w układzie siatki |
| grid-template-rows | 🅰 | Określa rozmiar wierszy w układzie siatki |
| hanging-punctuation | Określa, czy znak interpunkcyjny może być umieszczony poza polem wiersza | |
| height | 🅰 | Ustawia wysokość elementu |
| hyphens | Ustawia sposób podziału słów, aby poprawić układ akapitów | |
| image-rendering | Wskazuje przeglądarce, które aspekty obrazu są najważniejsze do zachowania podczas skalowania obrazu | |
| @import | Umożliwia importowanie arkusza stylów do innego arkusza stylów | |
| isolation | Określa, czy element musi utworzyć nową zawartość stosu (przydatne przy mixowaniu obrazów) | |
| justify-content | Określa wyrównanie między elementami wewnątrz elastycznego pojemnika, gdy elementy nie zajmują całej dostępnej przestrzeni | |
| @keyframes | Określa kod animacji (z listą klatek kluczowych). |
| left | 🅰 | Określa lewą pozycję ustawienia pozycjonowanego elementu |
| letter-spacing | 🅰 | Zwiększa lub zmniejsza odstęp między znakami w tekście |
| line-break | Określa sposób przerywania linii tekstu chińskiego, japońskiego lub koreańskiego (CJK). | |
| line-height | 🅰 | Określa wysokość wiersza (interlinię) |
| list-style | Skrót właściwości listy (wszystkich - typ, pozycja, obraz) | |
| list-style-image | Określa obraz jako znacznik elementu listy | |
| list-style-position | Określa pozycję znaczników pozycji na liście (w punktowaniu) | |
| list-style-type | Określa typ znacznika pozycji listy |
| 🛠️ @media | Ustawia reguły stylu dla różnych mediów - typów/urządzeń/rozmiarów | |
| margin | 🅰 | Skrót do ustawień wszystkich marginesów elementu |
| margin-bottom | 🅰 | Ustawia dolny margines elementu |
| margin-left | 🅰 | Ustawia lewy margines elementu |
| margin-right | 🅰 | Ustawia prawy margines elementu |
| margin-top | 🅰 | Ustawia górny margines elementu |
| max-height | 🅰 | Ustawia maksymalną wysokość elementu |
| max-width | 🅰 | Ustawia maksymalną szerokość elementu |
| min-height | 🅰 | Ustawia minimalną wysokość elementu |
| min-width | 🅰 | Ustawia minimalną szerokość elementu |
| mix-blend-mode | Określa, w jaki sposób zawartość elementu powinna się mieszać (miksować) z tłem nadrzędnym |
| object-fit | Określa sposób, w jaki zawartość img i video powinna być dopasowana do pudełka | |
| object-position | 🅰 | Określa wyrównanie elementów img i video w jego pudełku |
| opacity | 🅰 | Ustawia poziom krycia (nieprzeźroczystości) dla elementu |
| order | 🅰 | Ustawia kolejność elementu elastycznego względem pozostałych |
| orphans (sieroty) | Ustawia minimalną liczbę wierszy, które należy pozostawić na dole strony, gdy dojdzie do podziału strony w elemencie | |
| outline | 🅰 | Skrót właściwości outline-width, outline-style i outline-color |
| outline-style | Określa styl konturu | |
| outline-width | 🅰 | Ustawia szerokość konturu |
| outline-color | 🅰 | Ustawia kolor konturu |
| outline-offset | 🅰 | Odsuwa kontur i rysuje go poza krawędzią ramki |
| overflow | Określa, co ma się stać, gdy zawartość przepełnia pole elementu (ciąć, ukrywać, paski przewijania). | |
| overflow-x | Określa, co zrobić gdy zawartość przepełni obszar krawędzi pola elementu z lewej / prawej strony. | |
| overflow-y | Określa, co zrobić gdy zawartość przepełni obszar krawędzi pola elementu z góry / na dole strony. | |
| overflow-wrap | Określa, czy przeglądarka może przerywać wiersze w słowach, aby zapobiec przepełnieniu |
| padding | 🅰 | Skrót wszystkich właściwości padding-* (wyściółka, wypełnienie, margines wewnętrzny) |
| padding-top | 🅰 | Ustawia górne wypełnienie elementu |
| padding-right | 🅰 | Ustawia prawe wypełnienie elementu |
| padding-bottom | 🅰 | Ustawia dolne wypełnienie elementu |
| padding-left | 🅰 | Ustawia lewe wypełnienie elementu |
| 🛠️ page-break-after | Ustawia zachowanie podziału strony po elemencie | |
| 🛠️ page-break-before | Ustawia zachowanie podziału strony przed elementem | |
| 🛠️ page-break-inside | Ustawia zachowanie podziału strony wewnątrz elementu | |
| perspective | 🅰 | Daje elementowi pozycjonowanemu 3D trochę perspektywy |
| perspective-origin | 🅰 | Określa, w której pozycji użytkownik patrzy na element pozycjonowany 3D |
| pointer-events | Określa, czy element reaguje na zdarzenia wskaźnika | |
| position | Określa typ metody pozycjonowania elementu (statyczny, względny, bezwzględny lub stały) |
| quotes | Ustawia typ znaków cudzysłowu dla osadzonych cytatów | |
| resize | Określa, czy (i jak) można zmieniać rozmiar elementu przez użytkownika | |
| right | 🅰 | Określa prawą pozycję elementu pozycjonowanego |
| scroll-behavior | Określa, czy zamiast prostego skoku animować płynnie pozycję przewijania w przewijanym polu |
| tab-size | Określa szerokość znaku tabulacji | |
| table-layout | Definiuje algorytm używany do układania komórek tabeli, wierszy i kolumn | |
| TEXT | ||
| text-align | Określa wyrównanie tekstu w poziomie | |
| text-align-last | Opisuje sposób wyrównania ostatniego wiersza bloku lub linii tuż przed wymuszonym podziałem linii, gdy wyrównanie tekstu jest „justowane” | |
| text-combine-upright | Określa kombinację wielu znaków w przestrzeni pojedynczego znaku | |
| text-decoration | Określa dekorację tekstu | |
| text-decoration-line | Określa umiejscowienie linii dekoracji tekstu | |
| text-decoration-style | Określa styl linii dekoracyjnej tekstu | |
| text-decoration-color | 🅰 | Określa kolor linii dekoracyjnej tekstu |
| text-indent | 🅰 | Określa wcięcie pierwszego wiersza w bloku tekstowym |
| text-justify | Określa metodę justowania tekstu | |
| text-orientation | Określa orientację tekstu w linii | |
| text-overflow | Określa, co powinno się stać, gdy tekst przepełni element zawierający | |
| text-shadow | 🅰 | Dodaje cień do tekstu |
| text-transform | Kontroluje wielkie litery tekstu | |
| text-underline-position | Określa pozycję podkreślenia ustawioną za pomocą właściwości text-decoration | |
| top | 🅰 | Określa górną pozycję elementu pozycjonowanego |
| transform | 🅰 | Stosuje transformację 2D lub 3D do elementu |
| transform-origin | 🅰 | Umożliwia zmianę położenia przekształconych elementów |
| transform-style | Określa sposób renderowania elementów zagnieżdżonych w przestrzeni 3D | |
| transition | Skrót wszystkich właściwości transition-* | |
| transition-delay | Określa, kiedy rozpocznie się efekt przejścia (opóźnienie) | |
| transition-duration | Określa, ile sekund lub milisekund zajmuje przejście efektu | |
| transition-property | Określa nazwę właściwości CSS, dla której służy efekt przejścia | |
| transition-timing-function | Określa krzywą prędkości efektu przejścia | |
| unicode-bidi | Używany razem z właściwością direction do ustawiania lub zwracania, czy tekst powinien zostać zastąpiony w celu obsługi wielu języków w tym samym dokumencie | |
| user-select | Określa, czy można wybrać tekst elementu | |
| vertical-align | 🅰 | Określa pionowe wyrównanie elementów wbudowanych (inline) lub komórek tabeli |
| visibility | 🅰 | Określa, czy element jest widoczny |
| white-space | Określa sposób obsługi białych znaków w elemencie | |
| widows | Ustawia minimalną liczbę wierszy, które należy pozostawić u góry strony, gdy podział strony nastąpi w elemencie (wdowy) | |
| width | 🅰 | Ustawia szerokość elementu |
| word-break | Określa podział słów po osiągnięciu końca linii | |
| word-spacing | 🅰 | Zwiększa lub zmniejsza odstęp między słowami w tekście |
| word-wrap | Umożliwia łamanie długich, niepodzielnych słów i zawijanie ich do następnego wiersza | |
| writing-mode |
Tryb pisania. Określa, czy wiersze tekstu mają być ułożone poziomo czy pionowo | |
| z-index | 🅰 | Ustawia z-index (kolejność na stosie) elementu pozycjonowanego |