W tym miejscu zebrałem najczęściej zadawane pytania dotyczące CSS podczas rozmów rekrutacyjnych, zwanych również kwalifikacyjnymi na stanowisko Frontend developera.

Zanim przejdę do pytań, pozwól, że pokrótce wyjaśnię czym jest CSS.

CSS, czyli kaskadowe arkusze stylów (ang. Cascading Style Sheets) to język używany do opisu układu elementów na stronie WWW. Można za jego pomocą zdefiniować wiele parametrów, takich jak rodzaj czcionek, kolor tła, układ elementów na stronie itp.

CSS może być używany począwszy od bardzo podstawowego stylizowania tekstu na przykład do zmiany koloru i rozmiaru nagłówków i linków. A także, może służyć do tworzenia układu elementów na stronie, dodawania animacji itd.

Zapraszam również do Pytań rekrutacyjnych HTML i Pytań rekrutacyjnych JavaScript

Więcej pytań rekrutacyjnych z odpowiedziami znajdziesz w ebooku, który przygotowałem specjalnie dla Ciebie

Jak stylizowałbyś obraz lub element, aby miał zaokrąglone rogi?

Aby zaokrąglić obraz lub element możemy użyć właściwości border-radius. Określa promień narożników obrazu lub elementu. Właściwość border-radius ma wartości:

• border-top-left-radius,
• border-top-right-radius,
• border-bottom-right-radius
• border-bottom-left-radius.

Promień może mieć od jednej do czterech wartości, jak zdefiniowano poniżej:

• Jedna wartość: ta wartość dotyczy wszystkich czterech rogów, które są zaokrąglone jednakowo.
• Dwie wartości: w tym przypadku pierwsze wartości dotyczą lewego górnego i prawego dolnego narożnika elementu, a druga wartość dotyczy prawego górnego i lewego dolnego narożnika elementu.
• Trzy wartości: tutaj pierwsza wartość dotyczy lewego górnego rogu, druga wartość dotyczy prawego górnego i lewego dolnego narożnika, a trzecia wartość dotyczy prawego dolnego rogu elementu.
• Cztery wartości: W tym przypadku pierwsza wartość dotyczy lewego górnego rogu, druga wartość dotyczy prawego górnego rogu, trzecia wartość dotyczy prawego dolnego rogu, w końcu czwarta wartość dotyczy dolnego lewy róg elementu.

Jakie są różne atrybuty związane z czcionkami w CSS?

• font-family: służy do zmiany wyglądu czcionki.
• font-style: Służy do tworzenia czcionki ukośnej lub kursywy.
• font-weight: Służy do zwiększania lub zmniejszania pogrubienia czcionki.
• font-size: Służy do zwiększania lub zmniejszania rozmiaru czcionki.

Czym się różni podejście RWD (Responsive Web Design) od Mobile First?

Projekt responsywnej strony internetowej rozpoczyna się tzw. dużym ekranie, przy założeniu, że odwiedzający będą przeglądać witrynę ze swojego komputera/laptopa. Następnie strona jest modyfikowana tak, aby można ją było przeglądać na smartfonach lub tabletach. Można więc powiedzieć, że witryna jest skalowana w dół.

Strategia mobile-first to podejście, w którym projektanci projektują stronę internetową dla najmniejszego urządzenia mobilnego, a następnie skalują w górę, aby można było przeglądać ją na komputerach stacjonarnych.

Jakie są różne sposoby pozycjonowania elementu w CSS?

Istnieje pięć różnych sposobów pozycjonowania określonego elementu w CSS:

• position:static – w HTML elementy są domyślnie statyczne; są one ustawione zgodnie z normalnym flow strony.
• position:relative – : Tutaj element HTML jest pozycjonowany względem swojej normalnej pozycji. Pozwala to na umieszczenie obiektu względem siebie.
• position:fixed – Kiedy ustawimy pozycję dowolnego elementu HTML na fixed, pozostaje on w określonej lokalizacji, nawet gdy zawartość przewija się pod nim. Dzięki temu stały element nie pozostawia żadnych luk na stronie.
• position: absolute – określa pozycję względem najbliższego pozycjonowanego przodka. Tutaj elementem „pozycjonowanym” są te, które mają jakąkolwiek pozycję oprócz position:static
• position:sticky – Oparta jest na pozycji przewijania użytkownika. Przełącza się między względnym a stałym, w zależności od pozycji przewijania.

Co to jest box-shadow i co robi?

Właściwość box-shadow dodaje cienie do ramek różnych elementów. Elementowi możemy nadać jeden lub więcej cieni.

Dlaczego często zaleca się nadanie na początku wszystkim elementom właściwości box-sizing : border-box?

Właściwość box-sizing: border-box na elemencie zmienia sposób obliczania szerokości i wysokości elementu. Wlicza do szerokości i wysokości elementu, wielkość obramowania i paddingu.
Dzięki temu nadając jakiś rozmiar w pikselach mamy pewność, że taki będzie wymiar a nie zaskoczy nas np. jakiś padding, którego na pierwszy rzut oka nie widać. W tym przypadku nadając margines, wiemy, że element będzie się np. od czegoś odsuwał o konkretny margines.

Czym są funkcje/mixiny w CSS?

Ogólnie w programowaniu funkcje to zbiór instrukcji, które wykonują zadanie i zwracają pojedynczą wartość dowolnego typu danych. Mixiny są bardzo podobne do funkcji. Dzięki tworzeniu mixinów nasz kod CSS staje się reużywalny i możemy go zastosować w kilku miejscach
Składnia mixinów w Sass:
@nazwa {
właściwość: wartość;
właściwość: wartość;
…
}

Co to jest preprocesor CSS?

Preprocesor CSS służy do kompilacji kodu, który jest pisany za pomocą specjalnego kompilatora. Preprocesor CSS zapewnia dodatkowe korzyści, których nie ma w czystym CSS, takie jak zagnieżdżania selektorów, mixiny, warunki itd. Popularnym preprocesorem CSS są Sass, Stylus i LESS.
W fazie rozwoju większych projektów programiści napotykają wiele problemów związanych z debugowaniem, formatowaniem i utrzymaniem kodu. W takich przypadkach programiści zazwyczaj wykorzystują preprocesory bo jest po prostu łatwiej. Dzięki temu pisanie kodu jest łatwe i prostsze w pisaniu i utrzymaniu dla programistów.

Co to jest dzielenie kodu CSS i kiedy go używamy ?

Praca nad większymi plikami CSS w większych projektach stanowi wyzwanie dla utrzymania ogromnego pliku CSS. Podczas pracy nad takimi projektami dobrze jest zastosować podejście modułowe i podzielić CSS na wiele plików. Dzielenie plików CSS ułatwia rozdzielenie pracy nad różnymi zadaniami między członkami zespołu oraz można podzielić kod np. na dane sekcje lub strony . Pomoże to również zwiększyć ogólną produktywność.
Oto kilka przykładowych struktur plików CSS:
forms.css
lists.css
…

Co to jest Flexbox?

CSS Flexbox jest oficjalnie znany jako CSS Flexible Box Layout. Jest to model układu strony wprowadzony w CSS3. Główną funkcją jest zapewnienie wydajnego sposobu rozmieszczania, i wyrównywania przestrzeni pomiędzy elementami wewnątrz kontenera-głównego elementu nadrzędnego na ekranach o różnych rozmiarach. Flexbox umożliwia automatyczne rozmieszczanie responsywnych elementów w kontenerze w zależności od typu urządzenia lub ekranu. Zalecany przede wszystkim jako model blokowy.

Jak działa CSS?

Za każdym razem, gdy przeglądarka wyświetla stronę, łączy zawartość dokumentu HTML z plikiem zawierającym style.

• Przeglądarka ładuje stronę HTML, która jest konwertowana na DOM (Document Object Model)
• Przeglądarka pobiera większość zasobów powiązanych z dokumentem HTML, takich jak obrazy, filmy itp. oraz połączona strona CSS.
• Przeglądarka analizuje pobraną stronę CSS i sortuje je według typu selektora.
• Następnie CSS Object model jest tworzony zgodnie z kolejnością, w jakiej powinno się pojawiać po zastosowaniu do niego reguł.
• Wizualne wyświetlanie strony jest następnie pokazywane na naszym ekranie.

Co to jest uniwersalny selektor?

Selektor uniwersalny to selektor pasujący do dowolnego typu elementu bez potrzeby określania jego specyficznej nazwy. Tak w skrócie, gdy użyjesz tego selektora to wszystkie elementy na stronie otrzymają takie właśnie style. Bardzo często stosuje się go do tzw. resetu styli na stronie, czyli takiego ustawienia pozwalającego nam na początku zdefiniować, jak chcemy, żeby na przykład strona nie miała domyślnych marginesów i paddingów.
Przykład:
* {
margin:0;
padding:0;
box-sizing:border-box;
}

Co to jest CSS Box Model?

Model pudełkowy CSS to kontener, który zawiera wiele właściwości, w tym obramowania, marginesy, paddingi i samą zawartość. Służy do tworzenia projektu i układu stron internetowych. Może być używany jako zestaw narzędzi do dostosowywania układu różnych elementów. Przeglądarka internetowa renderuje każdy element jako prostokątne pudełko zgodnie z CSS Box Model. Box-Model ma wiele właściwości w CSS. Należą do nich miedzy innymi: content, padding, border, margin.

Jakie są różnice pomiędzy CSS2 a CSS3?

Główna różnica między CSS3 i CSS2 polega na tym, że CSS dzieli różne sekcje na moduły i obsługuje wiele przeglądarek.

• Każdy moduł dodaje nowe możliwości lub rozszerza opcje opisane w CSS2.CSS3 wprowadza kilka nowych selektorów.
• CSS3 wprowadza kilka właściwości z nowymi wartościami i jednostkami. Ułatwia stylizację tła, obramowań itp.,
• Wprowadzono nowe wartości i nowe jednostki miary kwadratowej, aby wesprzeć wszystkie te nowe właściwości.

W jaki sposób dodać style do dokumenty HTML?

Istnieją trzy sposoby implementacji CSS w HTML:

1. używanie znaczników <style></style> w sekcji <head> i dodanie pomiędzy nimi kodu CSS,
2. pisanie stylów CSS w elementach HTML w atrybucie style=” ” (tzw. inlajnowo), oddzielając kolejne wartości średnikami
3. pisanie CSS w osobnym pliku i łączenie ze stroną HTML za pomocą znacznika link – polecany sposób

Jak określić kolor za pomocą RGB?

W CSS kolor można określić jako wartość RGB za pomocą tego wzoru: rgb (red, green, blue)- Intensywność kolorów jest reprezentowana za pomocą liczb od 0 do 256. Najczęściej używa się wersji RGBA, gdzie A oznacza kanał alfa i dzięki temu możemy dodawać do koloru przezroczystość. Nie wiem czy ktoś pisze takie style samemu, najczęściej używa się do tego generatorów rgba lub rgba lub możesz to samo zrobić w edytorze kodu (Webstorm ma taką funkcję domyślnie) https://www.rapidtables.com/web/color/RGB_Color.html

Jaka jest różnica między klasą a identyfikatorem?

Klasa to sposób na uchwycenie elementów HTML, aby można było je ostylować. Klasy nie są unikalne i wiele elementów na stronie może mieć taką samą klasę. Na przykład stylujesz przycisk i później nadajesz taką samą klasę dla wszystkich przycisków dzięki czemu wyglądają tak samo a nie trzeba duplikować kodu . Natomiast ID jest unikalny i można go przypisać tylko do jednego elementu.

Co to jest z-index?

To jedno z najczęściej zadawanych pytań. właściwość z-index służy do określenia kolejności elementów, które nakładają się na siebie. Jego wartość domyślna to 0 i może przyjmować zarówno wartości ujemne, jak i dodatnie. Wyższa wartość z-index mówi nam o tym, że ten element powinien być umieszczony nad elementem, który ma niższą wartość z-indexu lub nie ma w ogóle zdefiniowanej, czyli wynosi ona 0. Przyjmuje następujące wartości: auto, liczba (zarówno dodatnie jak i ujemne), initial, and inherit.

Jak nadać te same style kilku elementom?

Możesz uchwycić wiele elementów, poprzez wypisanie ich po przecinku ( pamiętaj aby na końcu przed klamrami nie było przecinka):
h2, h3, p { color: red;}

Jak dodać obrazek w tle, który się nie scrolluje?

Właściwość background-attachment służy do określenia, czy obraz tła jest stały, czy przewija się z resztą strony.
Przykład:
body {
background-image: url(‘url_obrazka’);
background-repeat: no-repeat;
background-attachment: fixed;
}

Co to jest właściwość float w CSS?

Obecnie rzadko jej się używa ale ogólnie służy do ustawienia obrazu w prawo lub w lewo, w zależności od potrzeb, włączając w to zawijanie tekstu wokół niego. Wszystkie właściwości użytych wcześniej elementów pozostają niezmienione.