Magia wizualna: Kaskadowe Arkusze Stylów

Gdyby strony internetowe składały się z samego HTML, przypominałyby surowe dokumenty tekstowe z lat 90. Aby nadać im kolory, ułożyć elementy w odpowiednich miejscach, zaokrąglić rogi i dodać animacje, używamy CSS (Cascading Style Sheets).

Model Pudełkowy (Box Model)

Najważniejszym konceptem, który musisz zrozumieć w CSS, jest Box Model. Przeglądarka traktuje każdy pojedynczy element HTML (nawet literę) jako prostokątne pudełko. Każde z tych pudełek składa się z:

1. Content (Zawartość): Rzeczywisty tekst lub obraz.
2. Padding (Dopełnienie): Pusta, wewnętrzna przestrzeń pomiędzy zawartością a ramką (odpycha tekst od ścianek pudełka).
3. Border (Ramka): Fizyczna linia (widoczna lub nie) otaczająca element.
4. Margin (Margines): Zewnętrzna, pusta przestrzeń, która odpycha całe nasze pudełko od innych pudełek na stronie.

RWD (Responsive Web Design)

Dziś większość ruchu w Internecie pochodzi ze smartfonów. RWD to podejście w projektowaniu, które gwarantuje, że strona internetowa automatycznie dostosuje swój wygląd do wielkości ekranu, na którym jest wyświetlana. W CSS osiągamy to za pomocą Media Queries (zapytań o media), które potrafią nałożyć zupełnie inne style (np. zmienić układ z 3 kolumn na 1), gdy wykryją, że ekran użytkownika jest węższy niż np. 768 pikseli.