Pytania rekrutacyjne CSS

Czym jest CSS i dlaczego się go używa?

CSS (ang. Cascading Style Sheets) to język arkuszy stylów, który służy do opisywania sposobu prezentacji elementów HTML na stronie internetowej. Umożliwia on oddzielenie warstwy stylu od warstwy struktury, co ułatwia utrzymanie i rozwijanie kodu. Dzięki CSS można kontrolować m.in. kolory, rozmiary, rozmieszczenie czy animacje elementów, co pozwala na poprawę wyglądu oraz dostępności strony.

Materiały:

• MDN Web Docs (PL) – Podstawy CSS
• W3C – Specyfikacja CSS (ENG)

Na czym polega różnica między elementami typu inline, inline-block i block-level?

• Inline – elementy zajmują tylko tyle miejsca, ile wynika z ich zawartości, a nie rozpoczynają nowej linii. Przykładowo, element <span> jest elementem typu inline.
• Inline-block – podobnie jak elementy inline, nie zajmują całej szerokości rodzica, ale można im nadawać wymiary (wysokość i szerokość), tak jak elementom blokowym.
• Block-level (blokowe) – elementy zajmują całą dostępną szerokość rodzica i zaczynają nową linię. Przykładem jest <div> czy <p>.

Materiały:

• MDN Web Docs (PL) – Display i poziomy wyświetlania elementów

Czym różni się margin od padding?

• Margin (margines) – to zewnętrzny odstęp wokół elementu, wpływający na odległość między sąsiadującymi elementami. Marginesy nakładają się (collapse) między elementami blokowymi.
• Padding (dopełnienie) – to wewnętrzny odstęp między obramowaniem (border) a zawartością elementu. Padding zwiększa obszar tła elementu, ale nie wpływa bezpośrednio na przestrzeń zewnętrzną.

Materiały:

• [MDN Web Docs (PL) – Margin i Padding](https://developer.mozilla.org/pl/docs/Web/CSS/margin oraz https://developer.mozilla.org/pl/docs/Web/CSS/padding)

Co reprezentuje model pudełkowy (box model) w CSS?

Model pudełkowy (box model) określa sposób obliczania rozmiarów i rozmieszczenia elementów. Każdy element w CSS jest rozpatrywany jako prostokąt, składający się z:

1. Content (zawartość) – główna treść elementu, np. tekst czy obrazek.
2. Padding – przestrzeń między obramowaniem a zawartością.
3. Border – obramowanie elementu.
4. Margin – zewnętrzny odstęp między elementem a otaczającymi go elementami.

Materiały:

• MDN Web Docs (PL) – Model pudełkowy (box model)

Jak można zdefiniować kolory w CSS (np. formaty hex, RGB, RGBA, HSL)?

• HEX (np. #FF5733) – notacja szesnastkowa, gdzie parametry koloru oznaczają wartości czerwonej, zielonej i niebieskiej części składowej.
• RGB (np. rgb(255, 255, 51)) – definiowanie koloru przez trzy wartości liczbowe (czerwień, zieleń, niebieski) w zakresie 0–255.
• RGBA (np. rgba(255, 255, 51, 0.8)) – rozszerzona wersja RGB, która dodatkowo zawiera kanał przezroczystości (alpha).
• HSL (np. hsl(120, 100%, 50%)) – definiowanie koloru przez barwę (hue), nasycenie (saturation) i jasność (lightness).

Materiały:

• MDN Web Docs (PL) – Kolory w CSS

Jaki jest cel stosowania resetu lub normalize w CSS?

Reset i normalize to pliki CSS, które służą do ujednolicenia lub zminimalizowania domyślnych styli przeglądarek. Pozwala to uniknąć niespójności wyświetlania strony w różnych przeglądarkach i stać się punktem wyjścia do dalszego stylowania.

• Reset CSS – usuwa większość domyślnych styli, co daje zupełnie czyste pole do popisu, ale może powodować konieczność dodania niektórych styli od nowa.
• Normalize CSS – nie tyle usuwa, co harmonizuje domyślne style w przeglądarkach, pozostawiając je tam, gdzie są one użyteczne, i standaryzując ich sposób działania.

Materiały:

• Normalize.css (ENG) – GitHub
• Eric Meyer’s Reset (ENG)

Jakie istnieją rodzaje selektorów CSS i kiedy należy ich używać?

W CSS wyróżnia się kilka podstawowych typów selektorów:

1. Selektory tagów (elementów) – np. p, div, span. Stosuje się je do formatowania wszystkich elementów określonego typu.
2. Selektory klas – np. .nazwa-klasy. Używane w sytuacjach, gdy chcemy zestylizować grupę elementów o tej samej klasie.
3. Selektory identyfikatorów – np. #nazwa-id. Używa się ich do zaznaczenia unikalnego elementu na stronie (występuje tylko raz).
4. Selektory atrybutów – np. input[type="text"]. Pozwalają uzależnić styl od konkretnego atrybutu lub jego wartości.
5. Selektory złożone (kombinatory) – np. z użyciem (descendant), > (child), + (sibling) i ~ (general sibling). Służą do bardziej precyzyjnego powiązania elementów względem ich położenia w strukturze DOM.
6. Pseudoklasy i pseudoelementy – np. :hover, :before, :after. Są wykorzystywane do stylowania stanów i części elementów.

Kiedy ich używać?

• Tagi (element) – gdy chcemy ustawić globalne reguły, np. domyślne marginesy czy czcionki.
• Klasy – gdy potrzebujemy wielokrotnie użyć tych samych stylów w różnych sekcjach kodu.
• ID – wyłącznie w przypadkach, w których stylowany element jest unikalny w dokumencie.
• Atrybuty – jeśli styl zależy od atrybutu, np. typ pola input.
• Kombinatory – gdy zależy nam na kontekście w drzewie DOM (relacji rodzic–dziecko lub rodzeństwo).
• Pseudoklasy i pseudoelementy – by nadać styl interaktywnym stanom elementów (np. najazd kursorem) lub wstawić dodatkową zawartość (np. ::before, ::after).

Źródła:

• MDN Web Docs: Rodzaje selektorów (PL)
• W3C: CSS Selectors (EN)

Jak działa kaskadowość (cascade) i specyficzność (specificity) w CSS?

Kaskadowość to mechanizm nakładania stylów z różnych arkuszy (i różnych miejsc w kodzie) na element. Im dalej w drzewie, tym styl jest bardziej szczegółowy. W przypadku konfliktu, styl zdefiniowany “niżej” (np. w pliku importowanym na końcu) ma wyższy priorytet, o ile specyficzność i ważność reguł nie narzucają innych zasad. Specyficzność określa, która reguła ma większą moc w przypadku konfliktu:

1. Najniższa waga: selektor tagu (np. div)
2. Wyższa waga: selektor klasy (np. .klasa)
3. Jeszcze wyższa waga: selektor ID (np. #id-elementu)
4. Najwyższa waga: reguły !important oraz style wbudowane (atrybut style="")

Przykładowo, jeśli mamy konflikt między #footer p a .main p, zwycięży #footer p ze względu na wyższą specyficzność wynikającą z selektora ID.

Źródła:

• MDN Web Docs: Kaskadowość i specyficzność (PL)
• Polska dokumentacja CSS (NaStykuKodu) (jeśli dany rozdział o specyficzności jest dostępny)

Do czego służą pseudoklasy i pseudoelementy? Podaj przykłady.

• Pseudoklasy (np. :hover, :active, :focus, :first-child) służą do stylowania elementów w określonych stanach (np. po najechaniu myszką). Również umożliwiają dopasowanie elementu na podstawie jego otoczenia w drzewie DOM (np. pierwszy element dziecka).

  a:hover {
    color: red;
  }

• Pseudoelementy (np. ::before, ::after, ::first-line, ::selection) służą do celowego generowania i stylowania wirtualnych elementów, które nie istnieją w strukturze HTML. Na przykład ::before pozwala dodać zawartość przed wybranym elementem, np. ikonę lub ozdobnik.

  .button::before {
    content: "→ ";
    margin-right: 4px;
  }

Źródła:

• MDN Web Docs: Pseudoklasy i pseudoelementy (PL)
• MDN Web Docs: Pseudoelementy (PL)

Jak zidentyfikować element na podstawie stanu jego rodzica lub rodzeństwa?

Można to zrobić za pomocą kombinatorów i pseudoklas:

• Selektor dziecka rodzica: na przykład div.parent > p.child. Styl zostanie zastosowany tylko do elementów p będących bezpośrednimi dziećmi .parent.
• Selektor rodzeństwa (+): np. .first + .second, gdzie .second to następny element rodzeństwa po .first.
• Selektor rodzeństwa (~): np. .first ~ .siblings, gdzie .siblings to wszystkie następne elementy rodzeństwa po .first.
• Pseudoklasa stanu rodzica: nie ma uniwersalnego pseudoklasowego selektora, który styluje dziecko w zależności od stanu rodzica, jednak często można osiągnąć podobny efekt poprzez stylowanie właściwości potomka w ramach stanu rodzica (np. togglowany stan w JavaScript lub popularne biblioteki CSS-in-JS, czy React–JSX). Natomiast w stricte czystym CSS można korzystać z kombinatorów oraz reguły :has() (wspieranej w najnowszych przeglądarkach), np. .parent:has(.active) .child { ... }.

Źródła:

• MDN Web Docs: Kombinatory rodzeństwa i dzieci (PL)
• MDN Web Docs: :has() (EN)

Czym różni się selektor > (child) od (descendant)?

• Selektor > (child) dopasowuje wyłącznie bezpośrednie dzieci wskazanego rodzica.

  .container > p {
    /* Styl dotyczy TYLKO bezpośrednich dziecior */
  }

• Selektor spacji " " (descendant) dopasowuje wszystkich potomków (na dowolnym poziomie zagnieżdżenia).

  .container p {
    /* Styl dotyczy wszystkich potomków typu <p> wewnątrz .container */
  }

Źródła:

• MDN Web Docs: Child combinator (>) (PL)
• MDN Web Docs: Descendant combinator (PL)

Jakie są tryby pozycjonowania elementów (static, relative, absolute, fixed, sticky)?

• static – domyślne pozycjonowanie elementów, które nie jest w żaden sposób modyfikowane. Elementy pojawiają się w kolejności przepływu dokumentu (tzw. flow).
• relative – element jest pozycjonowany względnie względem swojego pierwotnego położenia w normalnym przepływie. Przesunięcia za pomocą właściwości top, left, right czy bottom odnoszą się do oryginalnej pozycji elementu.
• absolute – element jest usuwany z normalnego przepływu i pozycjonowany względem najbliższego przodka, który ma zdefiniowaną pozycję inną niż static. Brak takiego przodka oznacza pozycjonowanie względem okna przeglądarki.
• fixed – element jest pozycjonowany względem okna przeglądarki, co powoduje, że pozostaje w niezmienionym położeniu nawet podczas przewijania strony.
• sticky – łączy cechy relative i fixed. Element zachowuje się jak relative do momentu, aż osiągnie określony próg przewijania, po czym przykleja się do krawędzi okna.

Polecane źródła:

• MDN: Pozycjonowanie w CSS (po polsku)
• KursHTML.edu.pl: Pozycjonowanie elementów (po polsku)

Na czym polega działanie float i jakie są sposoby czyszczenia (clear) pływających elementów?

• float – właściwość pozwalająca wyłączyć element z normalnego przepływu dokumentu i przesunąć go do lewej (float: left) lub prawej (float: right) krawędzi kontenera. Najczęściej była wykorzystywana do tworzenia layoutów w starszych wersjach stron.
• Czyszczenie (clear) – zapobiega zawijaniu się elementów wokół pływających bloków.
  • Dodanie elementu z właściwością clear (np. div z clear: both) po pływających elementach.
  • Użycie techniki clearfix – dodanie pseudo-elementu ::after z właściwością content: "" i display: block; clear: both; do rodzica elementów pływających.

Polecane źródła:

• MDN: float (po polsku)
• MDN: clear (po polsku)

Jaka jest różnica między display: block, display: inline a display: inline-block?

• display: block – element zajmuje całą dostępną szerokość kontenera, zaczyna się od nowej linii i może mieć zdefiniowane marginesy oraz wymiary wysokości i szerokości.
• display: inline – element zajmuje tylko tyle miejsca, ile potrzebuje jego treść (nie przenosi się do nowej linii). Nie można bezpośrednio ustawiać szerokości i wysokości (poza niektórymi wyjątkami, np. inline-block + box-sizing).
• display: inline-block – element zachowuje się w linii, podobnie jak inline, ale można mu ustawiać szerokość, wysokość i marginesy pionowe.

Polecane źródła:

• MDN: display (po polsku)

Czym różni się width: auto od width: 100%?

• width: auto – szerokość elementu jest wyliczana automatycznie przez przeglądarkę na podstawie zawartości i reguł zewnętrznych (np. margin, padding, inne style).
• width: 100% – element wypełnia całą dostępną szerokość kontenera nadrzędnego (oczywiście z uwzględnieniem box modelu, czyli marginesów, obramowań itd.).

Polecane źródła:

• MDN: width (po polsku)

W jaki sposób wycentrować element w poziomie i w pionie z wykorzystaniem nowoczesnych podejść (np. Flexbox, CSS Grid)?

Flexbox

.container {
  display: flex;
  justify-content: center; /* wyrównanie w poziomie */
  align-items: center;    /* wyrównanie w pionie */
  height: 100vh;          /* przykład pełnego ekranu */
}

CSS Grid

.container {
  display: grid;
  place-items: center; /* wyrównanie w pionie i poziomie */
  height: 100vh;
}

Obydwa podejścia są dużo wygodniejsze i bardziej elastyczne od starszych technik (np. margin: 0 auto razem z inline-block lub manipulacje przy użyciu position i przeliczeń transform).

Polecane źródła:

• MDN: Flexbox (po polsku)
• MDN: Wyśrodkowanie w CSS (po angielsku)
• MDN: CSS Grid Layout (po polsku)

Jakie są główne koncepcje i właściwości Flexboxa?

• Pojęcie osi głównej (main axis) i osi poprzecznej (cross axis) – flex-direction pozwala ustawić kierunek układu (np. wiersz lub kolumny).
• Justify-content, align-items, align-content – umożliwiają kontrolę rozmieszczenia elementów i odstępów na osi głównej i poprzecznej.
• Flex-wrap – decyduje, czy elementy mogą się zawijać w kolejne wiersze/kolumny.
• Order – pozwala zmieniać kolejność elementów bez modyfikowania HTML.
• Flex-grow, flex-shrink, flex-basis – kontrolują wzrost, kurczenie i bazowy rozmiar elementów.

Polecane źródła:

• MDN: CSS Flexible Box Layout (po polsku)

Czym się różni CSS Grid od Flexboxa i w jakich sytuacjach każdy z nich sprawdza się lepiej?

• CSS Grid – przeznaczony do tworzenia dwuwymiarowych układów (zarówno wiersze, jak i kolumny). Jest szczególnie przydatny przy tworzeniu kompleksowych struktur layoutu, gdzie zależy nam na rozbudowanej siatce i precyzyjnym zdefiniowaniu obszarów.
• Flexbox – najlepiej sprawdza się w jednowymiarowych układach (szczególnie rozmieszczenie elementów w jednym wierszu lub kolumnie). Nadaje się znakomicie do prostych i elastycznych układów, list czy pasków nawigacji.

Polecane źródła:

• MDN: Różnice między CSS Grid i Flexbox (po angielsku)
• CSS-Tricks: A Complete Guide to Flexbox (angielski)
• CSS-Tricks: A Complete Guide to Grid (angielski)

Dodatkowe materiały w języku polskim

• CSS. Wprowadzenie – książka dostępna w polskich księgarniach, np. Helion
• Blog o CSS – Samouczekprogramisty.pl (po polsku)

Czym są media queries i jak się je stosuje, aby tworzyć responsywne projekty?

Media queries to funkcjonalność w CSS, która pozwala na określenie reguł stylów w zależności od cech urządzenia (np. szerokości ekranu czy orientacji). Dzięki temu można dostosować układ elementów strony, kolory czy rozmiary czcionek do różnych rozdzielczości i urządzeń. Stosowanie media queries polega na definiowaniu bloków kodu w pliku CSS z użyciem dyrektywy @media. Przykładowo:

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Powyższy przykład sprawi, że na ekranach o szerokości do 768px element .container będzie miał szerokość 100% i wewnętrzne wcięcie 10px.

Polecane źródła:

• MDN Web Docs (PL) – Media Queries
• W3C (EN) – Media Queries Level 3

Jak można tworzyć responsywną typografię?

Responsywna typografia polega na skalowaniu rozmiaru i odstępów w tekście w zależności od wielkości ekranu, tak aby treść pozostała czytelna na każdym urządzeniu. Można to osiągnąć m.in. poprzez:

1. Używanie jednostek elastycznych (np. em, rem, vw, vh) – Pozwala to na skalowanie czcionki w zależności od wymiarów rodzica lub okna przeglądarki.
2. Mechanizm clamp() w CSS – Umożliwia określenie minimalnego, preferowanego i maksymalnego rozmiaru czcionki, np.:

   h1 {
     font-size: clamp(1.5rem, 5vw, 3rem);
   }

1. Media queries – Definiowanie różnych rozmiarów czcionek w zależności od szerokości ekranu.

Polecane źródła:

• Grafmag – Artykuł o responsywnej typografii (PL)
• MDN Web Docs (PL) – Jednostki CSS