`) pozwalają na nawigację. Bez HTML-a nie ma treści. CSS natomiast dodaje estetykę. To dzięki niemu możemy zdecydować, że nagłówek będzie czerwony i duży, akapit czarny i czytelny, a link niebieski i podkreślony. Rozdzielenie tych dwóch technologii sprawia, że kod jest czystszy, łatwiejszy do zrozumienia i, co najważniejsze, znacznie prostszy w modyfikacji. Jeśli kiedyś zdecydujesz się zmienić całą kolorystykę strony, wystarczy, że zmodyfikujesz pliki CSS, a struktura HTML pozostanie nienaruszona.
Historyczny błąd: Słów kilka o przestarzałym tagu < font> , którego musisz unikać
W starszych wersjach HTML-a istniał tag ``, który pozwalał na bezpośrednią zmianę koloru, rozmiaru czy kroju czcionki. Można było napisać na przykład: `Ten tekst będzie czerwony.`. Brzmi prosto, prawda? Niestety, to właśnie ta prostota była zgubna. Taki sposób stylizowania mieszał strukturę z wyglądem, co prowadziło do bałaganu w kodzie i ogromnych problemów z utrzymaniem spójności wizualnej na stronie. Na szczęście, wraz z pojawieniem się CSS, tag `` został uznany za przestarzały i wycofany ze standardu HTML5. Chociaż niektóre przeglądarki mogą go nadal obsługiwać ze względów kompatybilności, jego używanie jest dzisiaj absolutnie odradzane. To tak, jakbyś próbował malować ściany domu za pomocą pędzla przyczepionego do łopaty niby się da, ale jest to niepraktyczne i nieprofesjonalne.
Metoda #1: Najszybszy sposób na zmianę koloru, czyli style w linii (inline CSS)
Kiedy potrzebujesz szybko zmienić kolor konkretnego fragmentu tekstu, na przykład tylko jednego słowa w akapicie, najprostszą metodą jest użycie stylów inline. Polega to na dodaniu atrybutu `style` bezpośrednio do znacznika HTML, który chcesz ostylować. Jest to szybkie i skuteczne dla pojedynczych elementów, ale ma swoje wady, o których powiem za chwilę. Warto jednak znać tę metodę, bo bywa przydatna w specyficznych sytuacjach.
Krok po kroku: Jak użyć atrybutu "style" w praktyce? (Przykłady dla < p> , < h1> , < span> )
Aby zastosować styl inline, wystarczy dodać atrybut `style` do wybranego znacznika HTML. Wewnątrz cudzysłowów atrybutu `style` wpisujemy właściwość CSS i jej wartość, oddzielając je dwukropkiem, a kolejne pary właściwość-wartość średnikiem. Oto kilka przykładów:
Dla akapitu:
Ten akapit będzie niebieski.
Dla nagłówka pierwszego poziomu:
To jest zielony nagłówek.
Dla elementu ``, który często używamy do stylowania fragmentów tekstu wewnątrz większych bloków:
To jest zwykły tekst, a to słowo jest czerwone.
Jak widać, jest to bardzo bezpośredni sposób na nadanie koloru. Wystarczy dodać atrybut `style` i określić właściwość `color` wraz z pożądaną wartością.
Jak definiować kolory? Przykłady po nazwach, kodach HEX i wartościach RGB
CSS oferuje kilka sposobów na zdefiniowanie koloru. Wybór zależy od preferencji i potrzeb. Oto najpopularniejsze z nich:
Każdy z tych formatów można bez problemu użyć w atrybucie `style` do zmiany koloru tekstu.
Kiedy styl inline to dobry, a kiedy zły pomysł?
Style inline mają swoje mocne i słabe strony. Warto je znać, aby świadomie decydować, kiedy ich użyć:
-
Zalety:
-
Szybkość: Idealne do błyskawicznych, jednorazowych zmian.
-
Wysoki priorytet: Style inline mają najwyższy priorytet w kaskadzie CSS, co oznacza, że zazwyczaj nadpiszą inne style.
-
Wady:
-
Brak separacji: Mieszają strukturę (HTML) z prezentacją (CSS), co utrudnia czytanie i zarządzanie kodem.
-
Trudność w utrzymaniu: Jeśli chcesz zmienić kolor np. wszystkich czerwonych nagłówków na stronie, musisz znaleźć i zmodyfikować każdy pojedynczy atrybut `style`.
-
Brak ponownego użycia: Ten sam styl musisz powtarzać w wielu miejscach.
-
Zaśmiecanie kodu HTML: Znaczniki stają się dłuższe i mniej czytelne.
Podsumowując, style inline są dobre do szybkich testów lub bardzo specyficznych, jednorazowych zastosowań. W większości przypadków lepiej sięgnąć po inne metody.
Metoda #2: Lepsza organizacja – jak zmienić kolor dla wielu elementów naraz? (wewnętrzny CSS)
Jeśli chcesz nadać ten sam styl wielu elementom na jednej stronie, ale nie chcesz jeszcze tworzyć osobnego pliku CSS, dobrym rozwiązaniem jest wewnętrzny arkusz stylów. Polega on na umieszczeniu reguł CSS bezpośrednio w kodzie HTML, ale w specjalnym miejscu wewnątrz znacznika `
Gdzie umieścić tag < style> i jak go poprawnie używać?
Znacznik `
Strona z wewnętrznym CSS
To jest tytuł strony
To jest pierwszy akapit, który powinien być granatowy.
To jest drugi akapit, również granatowy.
To jest nagłówek drugiego poziomu, karmazynowy.
Jak widać, w sekcji `
` mamy tag `Proces jest prosty. Najpierw tworzymy nowy plik tekstowy, na przykład o nazwie `style.css`. W tym pliku zapisujemy wszystkie nasze reguły CSS, tak jak robiliśmy to w tagu `
