Wprowadzenie do CSS

CSS, czyli kaskadowe arkusze stylów (ang. Cascading Style Sheets), to język służący do definiowania układu, wyglądu i prezentacji elementów na stronie internetowej. Opracowany przez organizację W3C w 1996 roku, stał się nieodzownym narzędziem w projektowaniu i tworzeniu stron internetowych.

Jest to trochę jak budowanie piramidy - starannie układamy każdy element, aby stworzyć końcowy produkt, który jest zarówno funkcjonalny, jak i estetycznie atrakcyjny.

Surowy kamień i pomalowane ściany

Wyobraź sobie świątynię tuż po zakończeniu budowy. Ściany stoją, komnaty są na swoich miejscach, ale wszędzie widać szary, surowy kamień. Tak wygląda strona napisana w samym HTML: struktura jest gotowa, są nagłówki, akapity i listy, tylko że wszystko ma czarny tekst na białym tle.

Każda przeglądarka internetowa ma swój zestaw domyślnych stylów, które określają, jak wyglądają poszczególne elementy strony. To dlatego nagłówki różnego stopnia mają różne wielkości czcionek na stronie.

Tutaj właśnie zaczyna się magia CSS. Za pomocą kodu możemy modyfikować wygląd naszej strony - zmieniać kolory, rozmiary, czcionki, marginesy, tła i wiele innych elementów, aby nasza strona wyglądała dokładnie tak, jak chcemy. CSS to farby i złoto, którymi malarze pokrywali ściany świątyni: HTML mówi, czym jest dany element, a CSS - jak ma wyglądać.

Niemniej jednak, tak jak budowa piramidy, CSS ma swoje wyzwania. Różne przeglądarki mogą interpretować niektóre style w inny sposób, co może prowadzić do nieoczekiwanych rezultatów. Dlatego ważne jest, aby nauczyć się najlepszych praktyk i technik, aby uniknąć takich problemów.

Mimo tych wyzwań, nauka CSS jest ekscytującym i twórczym procesem - tworzymy strony internetowe, które są piękne, funkcjonalne i przyjemne dla użytkowników.

Skąd słowo "kaskadowe"?

Do jednego elementu może trafić kilka stylów naraz: domyślny styl przeglądarki i Twoje reguły, a czasem kilka Twoich reguł, które się ze sobą nie zgadzają. Style spływają jak woda po stopniach kaskady i jedne nadpisują drugie. O tym, która reguła wygrywa, decydują jasne zasady - poznasz je w lekcji o kaskadowości.

Gdzie zapisujemy CSS?

Style możesz wpisać w atrybucie style wybranego elementu, w znaczniku <style> w sekcji <head> albo w osobnym pliku z rozszerzeniem .css, podłączonym do HTML. Najczęściej używa się osobnego pliku, bo jeden arkusz stylów może ozdobić wiele stron naraz. Wszystkie trzy sposoby poznasz dokładnie w lekcji o tworzeniu projektu HTML/CSS.

Czego nauczysz się w tym module?

• jak zbudowana jest reguła CSS i jak działają selektory: znaczników, klas, identyfikatorów i bardziej zaawansowane,
• jak ustawiać kolory, tła i czcionki,
• czym jest model pudełkowy (box model), czyli odstępy, ramki i marginesy,
• jak elementy układają się obok siebie albo jeden pod drugim (display i opływanie),
• jak pozycjonować elementy i nakładać je na siebie,
• jak działają pseudo-klasy i pseudo-elementy, a na koniec filtry i transformacje.

Jak przeglądarka przetwarza CSS?

Kiedy otwierasz stronę internetową, przeglądarka wykonuje kilka kroków, zanim zobaczysz gotowy rezultat. Możesz to porównać do procesu budowy piramidy - każdy etap jest niezbędny:

1. Parsowanie HTML i CSS - przeglądarka czyta kod HTML i CSS, analizując jego strukturę.
2. Budowanie DOM i CSSOM - na podstawie HTML powstaje DOM (Document Object Model), a na podstawie CSS - CSSOM (CSS Object Model). To dwa "plany budowy", które przeglądarka łączy w jedną całość.
3. Tworzenie Render Tree - przeglądarka łączy DOM z CSSOM, tworząc drzewo renderowania. Określa ono, które elementy będą widoczne i jakie style im przypisać.
4. Layout (rozmieszczenie) - przeglądarka oblicza pozycje i wymiary każdego elementu na stronie.
5. Paint (malowanie) - na końcu przeglądarka rysuje piksele na ekranie, tworząc to, co widzisz.

Ten proces zachodzi błyskawicznie - w milisekundach! Ale zrozumienie go pomoże Ci pisać bardziej wydajny CSS.

Pierwsze spojrzenie na CSS

W następnej lekcji rozłożysz na części pierwszą regułę CSS: selektor, który wskazuje element, i deklaracje w nawiasach klamrowych, które mówią, co zmienić. Na razie wystarczy, że zobaczysz CSS w działaniu.

W edytorze poniżej ten sam HTML dostaje wygląd z pliku style.css. Zmień kolor nagłówka albo tła i zobacz, jak przeglądarka od razu maluje stronę na nowo:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <title>Pierwszy CSS</title>
6  <link rel="stylesheet" href="style.css">
7</head>
8<body>
9  <h1>Świątynia w Karnaku</h1>
10  <p>Ten sam HTML, a wygląd nadaje mu plik style.css.</p>
11</body>
12</html>

Właśnie pomalowałeś swoją pierwszą ścianę świątyni. W kolejnych lekcjach krok po kroku zamienisz surowy kamień HTML w komnaty godne faraona.