CSS to zbiór reguł formatowania, które określają sposób prezentacji strony internetowej. Na przykład możemy używać arkusza stylów, aby dostosować wielkość i kolor tekstu, rozmieszczenie elementów na stronie i wiele innych rzeczy. Reguły formatowania są przypisywane do konkretnych elementów HTML za pomocą selektorów. Selektory określają tagi HTML lub atrybuty, aby pomóc programowi określić jak powinny być formatowane poszczególne elementy. Dzięki CSS możemy formować stronę internetową tak, aby odpowiadała naszym preferencjom i potrzebom. Przeczytaj artykuł i poznaj podstawy tego języka!
Reguły CSS
Reguły CSS są to uniwersalne zasady służące do aranżacji oraz formatowania treści stron internetowych. Zbudowane są one z pojedynczych własności (property) i ich wartości (value). Wartość jest zawsze poprzedzona dwukropkiem :, a cała reguła musi być zakończona średnikiem ;. Czasami własności składają się z kilku członów oddzielonych myślnikiem -, na przykład background-color. Ta własność służy do ustawienia koloru tła dla danego elementu strony internetowej. Jej wartość może być bardzo różna, np. blue oznacza niebieski kolor.
Sprawdź: Najpopularniejsze języki programowania.
Czcionki pozwalają nam zmodyfikować treść strony internetowej za pomocą reguły font. Mogą one mieć różne wielkości (np. w pikselach) i rodzaj. Przykładową popularną czcionką, z której mogliśmy skorzystać podczas pracy w edytorze tekstowym, jest Arial. Jeśli chcemy, aby nasza strona internetowa czy dokument zaprezentował się profesjonalnie, możemy używać innych czcionek oraz regulować ich wielkość. Zmieniając rozmiar czcionki, możemy go określać jako odległość od najwyższej litery do najniższej. Wiemy już, że w celu wykorzystania danej czcionki musimy znać jej pełną nazwę i podawać jedynie poprawne wartości np. oddzielone spacji jeśli mamy zamiar ustawić więcej niż jedną wartość.
Może Cię zainteresować: Podstawy HTML.
Selektory CSS
Konfigurowanie wyglądu strony internetowej za pomocą języka CSS wymaga uprzedniego przypisania reguł do odpowiednich elementów HTML. Wiązanie tych reguł do konkretnych części strony możliwe jest dzięki selektorom, czyli odpowiednio skonfigurowanym wyrażeniom. W języku CSS istnieje kilka sposobów tworzenia selektorów, takich jak użycie samych elementów HTML, atrybutów ID i class.
Selektor może stanowić:
- klasa elementu html, np. .klasa,
- element html np. p,
- id elementu html, np. #header.
Aby skompletować zapis selektora, należy dodać do niego nawiasy klamrowe {}. Poprzez wprowadzenie reguł CSS w obrębie tej struktury, możemy precyzyjnie dostosować elementy strony internetowej i określić, jak będą one ukazywane przez przeglądarki.
Aby skutecznie dostosować stronę do naszych potrzeb i preferencji, powinniśmy pomiędzy nawiasami klamrowymi dodać adekwatne do sytuacji reguły CSS. To one sprawiają, że możemy decydować o wyglądzie strony internetowej według naszych upodobań i wymagań, umożliwiając precyzyjną kontrolę jej formatowania.
Dodawanie CSS na stronę
Możemy dodać styl zapisany w języku CSS do strony internetowej na kilka sposobów. Możemy ustawić go bezpośrednio w atrybucie style=”” elementu HTML lub też umieścić go w elemencie <style>, który służy wyłącznie do tego celu. Trzecią opcją jest utworzenie osobnego pliku CSS, w którym będziemy przechowywać style. Tak naprawdę ważne jest, aby ustawić odpowiedni priorytet określający kolejność ładowania się styli, ponieważ może to mieć istotny wpływ na efekty finalne.
Sposoby na dodanie CSS:
- atrybut style=””,
- elementy <style>,
- zewnętrzny plik CSS.
Aby dodać styl CSS do strony internetowej, można skorzystać z atrybutu style. Takie style są nazywane liniowymi (ang. inline style), ponieważ są bezpośrednio dodawane do elementu, bez udziału osobnych plików. Na przykład można dodać atrybut style do elementu <p>, który wcześniej był pusty. Dodanie stylu pozwala na szybki i łatwy dostęp do zmiany wyglądu strony internetowej, bez potrzeby przechodzenia przez bardziej skomplikowane procesy tworzenia strony WWW.
Atrybut style umożliwia dodanie reguł CSS bez selektora – jest to szczególnie przydatne, jeśli chcemy nadać danemu elementowi unikalny styl. Aby dodać styl do elementu p, możemy wykorzystać regułę background-color i przypisać jej wartość żółtą (yellow). W ten sposób zmienimy kolor tła tego elementu.
Czytaj też: Jak zostać programistą?
Element <p> jest rodzajem elementu blokowego, który zgodnie z definicją powinien zajmować całą linię. Możemy to zobaczyć na przykładzie tego paragrafu – nawet bardzo krótki tekst wygląda ładnie, ponieważ tło rozciągnięte jest na całej linii. Oznacza to, że element <p> spełnia swoje zadanie i pozwala na przechowywanie danych w jasny i czytelny sposób. Jest to szczególnie istotne we współczesnych witrynach internetowych, gdzie ważna jest estetyka i responsywność. Elementy blokowe mogą również być używane do tworzenia struktury dokumentu HTML, co oznacza, że są one niemal niezbędne w każdej witrynie internetowej.
Element <style> umożliwia definiowanie i stosowanie stylów CSS, które służą do upiększania stron internetowych. Przeglądarka odczytuje reguły zawarte w tym elemencie jako język stylów zamiast HTML. Oznacza to, że można dostosować wygląd strony do swoich oczekiwań w bardziej elastyczny sposób niż realizacja tego poprzez edytowanie każdego elementu witryny osobno. Po umieszczeniu reguł CSS w elemencie <style>, można je szybko aktualizować, aby dostosować stronę do potrzeb i wartości estetycznych użytkownika.
W którym zatem miejscu możemy umieścić element <style>? w zasadzie w całym dokumencie html, zarówno w sekcji <body> jak i <head>, z jednym warunkiem, zawsze powyżej elementu, którego formatowanie dotyczy Jednak dobrą praktyką jest umieszczanie elementu <style> na samym dole sekcji <head>, czyli w tzw. ustawieniach strony
Element <style> może zostać umieszczony w całym dokumencie HTML. Można je dodawać do sekcji <body> i <head>, jednak najlepszą praktyką jest dopisywanie style’u na samym końcu sekcji head. Przed umieszczeniem elementu <style> należy upewnić się, że formatowanie dotyczy danego elementu. Sekcja head służy przede wszystkim do ustalania ustawień strony, takich jak kodowanie znaków, określenie stylów, linki do skryptów lub inne metainformacje.
Wiedząc już, gdzie najlepiej umieścić element <style>, więc możemy zacząć dodawać do niego odpowiednie wartości CSS. Przede wszystkim musimy określić element HTML, jaki chcemy edytować – dla naszych potrzeb wybierzemy selektor p. Następnie będziemy mieli możliwość dodania konkretnych stylów CSS, takich jak font i background-color, które służą do precyzyjnego ustalenia zachowania i formy tego selektora. Innymi słowy, będziemy w stanie edytować wygląd oraz strukturę elementu HTML pomocą reguł CSS.
CSS w oddzielnym pliku
Najlepszym sposobem dodawania stylu do strony internetowej jest stworzenie oddzielnego pliku ze stylami, takiego jak CSS. Plik ten można utworzyć w dowolnym edytorze tekstu i ma on postać podobną do pliku html z tym, że rozszerzenie powinno być .css. W codziennym użyciu nazwy takich plików to przede wszystkim main lub style, choć oczywiście mogą być one dowolne. Aby ułatwić sobie konserwację, warto stosować się do zasad zgodnych z obowiązującymi standardami. Po utworzeniu i otwarciu pliku main.css w danym edytorze, można już dopisywać odpowiednie style CSS i mieć gwarancję, że po publikacji styl będzie odpowiednio prezentowany na stronie.
Gdzie umieścić plik ze stylami?
Aby style zaczęły działać, musimy do nich stworzyć odpowiednie odwołanie na naszej stronie internetowej. Aby to zrobić, możemy wykorzystać element <link>. Dobrą praktyką jest utrzymywanie wszystkich plików ze stylami w jednym folderze. Zazwyczaj ten folder nazywamy „css” i umieszczamy tam wszystkie pliki .css. Po dodaniu tego folderu do głównego katalogu należy w nim umieścić plik main.css, aby mógł być on odczytany przez naszą stronę internetową.
Element <link> służy do importowania zewnętrznych plików, takich jak pliki ze stylami, do naszej strony www. Ważne jest by nie mylić elementu <link> z elementem <a>, który często nazywany jest linkiem, choć oba te pojęcia oznaczają coś innego. Jego miejscem umieszczania jest sekcja <head> dokumentu. Co istotne jest również to, że wykorzystując element <link> możemy łatwo dostosować wygląd naszej strony www w prostszy sposób i skrócić czas pracy poprzez uniknięcie ręcznego tworzenia stylów lub automatyzowanie ich tworzenia.
Atrybut href służy do wskazania lokalizacji naszego pliku ze stylami. Atrybut rel (z ang. relation – związek) pozwala określić rodzaj pliku. W tym przykładzie mamy do czynienia z kaskadowym arkuszem stylów, więc wartością atrybutu będzie stylesheet (ang. arkusz styli). Jest to ważny element dla umożliwienia precyzyjnego formatowania i renderowania stron internetowych. CSS jest rozbudowaną składnią, która pozwala na tworzenie elementów graficznych, takich jak kolory, fonty i marginesy. Z pomocą tego narzędzia można stworzyć dynamiczną i responsywną strukturę strony internetowej dopasowaną do różnych urządzeń końcowych.
Niezależnie od tego, jakim sposobem chcemy dołączyć CSS, efekt będzie taki sam. Różnice między tymi rozwiązaniami dotyczą przede wszystkim wygody dodawania, utrzymania kodu oraz czystości kodu. Aby zachować estetyczny wygląd strony i uporządkowany kod źródłowy, najlepszym rozwiązaniem jest wydzielenie CSS z HTML-a i umieszczenie go w osobnych plikach. Jest to dobra praktyka programistyczna, która pomaga ułatwić aktualizacje i optymalizację witryny.
Kod CSS może zajmować od kilkuset do nawet kilku tysięcy linii w zależności od skali projektu. Gdy przygotowujemy nawet niewielką stronę, musimy się uporać z całym kodem HTML i dorzucić do tego odpowiednie ilości linii CSS. Jednak czy to jest najlepsze rozwiązanie? Zamiast tego możemy wykorzystać osobny plik CSS, do którego linkujemy stronę – to pozwoli uniknąć chaosu i mnożenia się linii kodu. Pozwoli również ułatwić utrzymanie porządku na stronie oraz jej szybsze wczytywanie.
Korzystanie z zewnętrznych plików CSS ma wiele zalet, w tym możliwość optymalizacji ładowania stron. Przeglądarka pobiera taki plik jednorazowo i trzyma go w swojej pamięci podręcznej, co pozwala uniknąć konieczności przeładowywania strony przy każdej jej aktualizacji. To niesie ze sobą szereg pozytywnych aspektów, takich jak: oszczędność czasu i zasobów serwera, mniejsze obciążenie sieci oraz lepsza szybkość wczytywania stron.
Czytaj też: PHP – co to jest?
