Podstawy CSS. Szybki start dla początkujących

HTML vs CSS: Co jest czym?

Zanim zagłębimy się w świat CSS, chciałabym w pierwszej kolejności wyjaśnić różnice między HTML a CSS. Jest to istotny punkt wyjścia, który pomoże nam lepiej zrozumieć, jak te dwie kluczowe technologie współpracują ze sobą w procesie tworzenia stron internetowych.

HTML jest przeznaczony do definiowania struktury strony internetowej. Co to znaczy w praktyce? To znaczy, że HTML jest używany do tworzenia podstawowego szkieletu strony, określając, gdzie znajdują się poszczególne elementy takie jak nagłówki, paragrafy, obrazy, linki, itp. HTML jest odpowiedzialny za określenie „co” znajduje się na stronie.

CSS jest używany do stylizacji stron internetowych. Można by go porównać do projektanta wnętrz, ponieważ to właśnie CSS decyduje o takich aspektach jak np. paleta kolorów, odstępy między elementami, wybór czcionek i wiele innych detali dotyczących estetyki strony. To właśnie CSS nadaje każdej stronie internetowej jej unikalny styl i jest odpowiedzialny za to “jak” elementy są wyświetlane na stronie.

Gdzie umieścić CSS?

Przed rozpoczęciem pisania pierwszej reguły stylów porozmawiamy o tym, gdzie dokładnie powinniśmy umieścić nasz kod CSS. Istnieją trzy główne możliwości:

W zewnętrznym pliku CSS

To jest rekomendowana i powszechnie stosowana praktyka. Tworzy się oddzielny plik CSS (np. „style.css”) i dołącza go do strony HTML za pomocą linku w sekcji nagłówka head dokumentu HTML (wartość atrybutu href musi wskazywać rzeczywisty, istniejący plik), tak jak poniżej:

Struktura katalogów projektu:

project-folder/
│
├── index.html
│
└── css/
└── style.css

Kod HTML (index.html):

Kod CSS (style.css – w folderze „css”):

Ta metoda pozwala na łatwe zarządzanie stylami na całej stronie. Dodatkowo, przeglądarki buforują zewnętrzne pliki CSS, co przyspiesza czas ładowania strony.

W tagach <style></style>

Możesz również umieścić CSS bezpośrednio w sekcji nagłówka HTML head – między tagami <style></style>.

Jest to przydatne, gdy chcesz dostosować styl tylko dla jednej konkretnej podstrony. Nie jest to jednak zalecana praktyka dla ogólnych stylów na całej stronie. Jeśli używane są style wewnętrzne (<style></style>), należy upewnić się, że są one odpowiednio zorganizowane i nie powodują bałaganu w kodzie HTML. W większych projektach lepiej stosować zewnętrzny plik CSS.

Liniowo

Możesz również umieścić CSS bezpośrednio w tagach HTML, używając atrybutu „style”.

Metoda ta jest przydatna do szybkiego dostosowania stylu pojedynczych elementów na stronie. Jednak nie jest zalecana w większych projektach, ponieważ może prowadzić do trudności w zarządzaniu stylami na całej stronie. Ponadto, style liniowe nie są buforowane przez przeglądarki, co może wpłynąć na czas ładowania strony.

Priorytet ważności metod stylowania

Hierarchia ważności różnych metod stylizacji stron internetowych wygląda następująco: 3 > 2 > 1.

Style inline, czyli te zdefiniowane bezpośrednio w tagach HTML, mają pierwszeństwo i przeważają nad stylami zdefiniowanymi w sekcji <style>. Natomiast style z sekcji <style> mają pierwszeństwo nad stylami zdefiniowanymi w zewnętrznym arkuszu CSS (jeśli ten arkusz jest podpięty przed sekcją <style>). To logiczne, ponieważ style inline są umieszczone bezpośrednio w tagach HTML, a więc są najbliżej treści strony, co sprawia, że są najważniejsze w hierarchii i mają zawsze pierwszeństwo przed innymi stylami.

!important

W CSS istnieje możliwość nadania absolutnego pierwszeństwa pewnym stylom, ignorując naturalną hierarchię. Jest to podobne do sytuacji, w której pewne zasady stają się wyjątkiem od reguły i traktowane są jako najważniejsze. Do tego celu używamy klauzuli !important:

Klauzula !important nadaje absolutny priorytet danemu stylowi, ignorując inne reguły. Jednak nadużywanie !important może prowadzić do dezorganizacji stylów i utrudniać ich zarządzanie. Zaleca się używanie jej tylko w wyjątkowych sytuacjach – jako koło ratunkowe, gdy inne metody nie przynoszą pożądanego rezultatu.

Budowa reguł CSS

Budowanie reguł CSS polega na definiowaniu, jak poszczególne elementy na stronie internetowej powinny być prezentowane.

Każda reguła CSS jest zbudowana z kilku podstawowych elementów: selektorów, które wskazują na elementy HTML do stylizacji, oraz deklaracji, które określają, jak te elementy powinny być stylizowane. Deklaracja składa się z właściwości i wartości, które razem precyzują wygląd i zachowanie elementów na stronie. Aby lepiej to zrozumieć, przejdźmy do przykładu.

Przykład reguły CSS

Załóżmy, że chcemy ustawić kolor tekstu i rozmiar czcionki dla wszystkich paragrafów na stronie. Oto jak mogłaby wyglądać reguła CSS realizująca to zadanie:

W tym przykładzie:

p to selektor – określa on, do jakiego elementu (lub elementów) HTML reguła ma być zastosowana. W tym przypadku reguła dotyczy wszystkich elementów <p>, czyli paragrafów.

Deklaracja to cały ten fragment znajdujący się w nawiasach klamrowych:

{ color: blue; font-size: 16px; }.

Deklaracje definiują, jakie style mają być zastosowane do wybranych przez selektor elementów.

Właściwość to rodzaj stylizacji, którą chcemy zastosować, na przykład color (kolor tekstu) lub font-size (rozmiar czcionki).

Wartość to konkretne ustawienie dla danej właściwości, na przykład blue (niebieski) dla właściwości color lub 16px dla właściwości font-size.

Jak to działa

Gdy przeglądarka wczyta CSS i napotka regułę, użyje selektora (p w naszym przykładzie) do znalezienia wszystkich odpowiadających mu elementów na stronie. Następnie zastosuje do nich deklaracje zawarte w nawiasach klamrowych. W efekcie wszystkie paragrafy na stronie będą miały tekst koloru niebieskiego (color: blue;) i rozmiar czcionki ustawiony na 16 pikseli (font-size: 16px;).

Rodzaje selektorów

Należy pamiętać, że istnieją różne rodzaje selektorów, a każdy z nich ma swoje unikalne zastosowanie.

Selektory elementów HTML

Selektory elementów HTML, jak sama nazwa wskazuje, odnoszą się do nazw tagów HTML. W powyższym przykładzie, p jest selektorem elementu HTML i wskazuje, że styl ma być zastosowany do wszystkich elementów <p> (paragrafów) na stronie. Stosowanie selektorów elementów jest najprostszą formą stylizacji, która wpływa na wszystkie elementy danego typu.

Selektory klas

Selektory klas pozwalają na stylizację grupy elementów oznaczonych wspólną klasą. Klasa jest definiowana w HTML za pomocą atrybutu class i w CSS jest poprzedzona kropką, np. .highlight. Dzięki temu, jeśli chcemy stylizować tylko określone paragrafy ( w tym przykładzie – która mają być użyta do wyróżniania tekstu), możemy nadać im klasę (np. <p class=” highlight”>) i zastosować styl tylko do elementów tej klasy (. highlight { color: red; }). To umożliwia większą elastyczność niż selektory elementów, ponieważ można wybrać, które dokładnie elementy mają być stylizowane.

Selektory ID

Selektory ID identyfikują unikalny element na stronie, oznaczony przez atrybut id w HTML. W CSS selektor ID jest poprzedzony znakiem #, np. #unikatowy-element. Stylizowanie po ID jest bardzo specyficzne i powinno być stosowane do elementów, które występują na stronie tylko raz, jak np. menu nawigacyjne czy stopka. Ze względu na wysoką specyficzność, style zdefiniowane przez selektor ID mogą być trudniejsze do nadpisania przez inne reguły.

Zachowanie najlepszych praktyk:

Zaleca się, aby do stylizacji używać głównie klas, ponieważ klasy są mniej specyficzne niż ID i łatwiejsze do zarządzania w kontekście całej strony czy aplikacji. Stylizowanie po klasach ułatwia ponowne wykorzystanie stylów i utrzymanie spójności.

Zainteresowany frontendem? Dowiedz się więcej o roli programisty stron internetowych

Ewelina Mucha

Dzień zaczyna od kawy i linijki kodu, a gdy znika sprzed ekranu, z pewnością znajdziesz ją albo z patelnią w ręku w kuchni, albo z rakietką przy stole do ping-ponga.