Jak wdrożyć CSS na stronę internetową
16 lipca 2021 | 2 min czytania
Zastanawiasz się jak wdrożyć CSS na stronę internetową? Piszesz kod, a strona jak wyglądała tak wygląda? Prawdopodobnie zainicjowana „linijka kodu”, która odpowiada za wdrożenie CSS-a jest napisana błędnie lub nie ma jej wcale. Czasami powodem też może być zapisane dane w pamięci przeglądarki, więc żeby się upewnić, najpierw wyczyśćmy te dane, razem z ciasteczkami i spróbujmy odświeżyć stronę. Jeżeli nic się nie zadziało, zapraszam do dalszej części artykułu, w której pokaże jak łatwo wdrożyć CSS na stronę internetową.
Czym jest CSS
Czy w ogóle jest ten CSS? To język kodowania, bez którego strony internetowe wyglądałyby zupełnie inaczej niż wyglądają. CSS ma tak wiele zastosowań, że można powiedzieć, że w zasadzie odpowiada ze wszystko jeżeli chodzi o wygląd strony. Tak w sumie jest, chociaż dużo funkcji może też nadać stronie JavaScript i języki podobne do niego. Jednakże są to już języki programowania, bardziej zaawansowane. CSS charakteryzuje się tym, że separatory i innego rodzaju znaczniki, które w nim określamy piszemy po angielsku, czyli w języku, który praktycznie każdy z nas zna. Więc bardzo łatwo się go nauczyć.
Czy strona musi posiadać CSS
Teoretycznie na pytanie czy strona musi posiadać CSS odpowiadam – nie, nie musi. Jednakże praktycznie sprawa wygląda zupełnie inaczej. Strona internetowa bez CSS wyglądałaby bardzo ubogo. Wszystko byłoby jedno pod drugim, ułożone linijka po linijce jak w zeszycie. Co prawda kolory można określać za pomocą atrybutów HTML, ale raczej nie jest to dobrą praktyką. Co prawda można ułożyć elementy w tabelce i kiedyś tak się robiło, ponieważ było to, na tamte czasy wygodne, ale na czasy dzisiejsze ta praktyka również jest przestarzała, ponadto jest nieakceptowana przez techniki SEO. Tak, czy inaczej CSS daje nam dużo większe możliwości. Nie dość, że pozwala nam pozycjonować elementy na stronie na co najmniej trzy sposoby to jeszcze pozwala nam tworzyć wersje mobilne i na tablety naszej strony internetowej (technologia RWD). Jak widać CSS nie jest wymagany na stronie internetowej, ale w tej chwili nie znajdziemy nigdzie żadnej bez stylowania CSS.
Jak wdrożyć CSS
Na kluczowe pytanie w tym artykule, czyli jak wdrożyć CSS odpowiedź jest bardzo prosta. Potrzebna jest zaledwie jedna linijka kodu. Kod umieszczamy w sekcji HEAD strony internetowej, a wygląda on tak:
<link rel="stylesheet" href="css/style.css">
gdzie css/ to folder, w którym trzymamy pliki CSS, a style.css to nazwa pliku. Inna sprawa jest, gdy korzystamy z jakiegoś CMS-a. Najpopularniejszym CMS-em jest WordPress i żeby w nim zamieścić swoje style sprawa jest nieco skomplikowana, ale nie niemożliwa do osiągnięcia.
Jak zamieścić własne style CSS w WordPressie
W WordPressie najlepiej z motywu, na którym pracujemy utworzyć motyw potomny. Wtedy rozwijamy swój niezależny motyw, ale nie od początku, a na bazie tego, którego style nam się podobają, chcemy go jedynie „ulepszyć”. Ale to jest temat dla bardziej zaawansowanych, chociaż myślę, że poradziłby sobie praktycznie każdy, kto trochę posiedział w kodzie. Jeżeli nie chcemy tworzyć motywu potomnego, a styli mamy mało, możemy też skorzystać z opcji Dodatkowy CSS w opcjach Motywu. Jeżeli jednak tych styli jest więcej musimy skorzystać z własnych kilku linijek kodu.
Wchodzimy do pliku, który chcemy zmodyfikować i dodajemy następujący kod:
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts');
W tym wypadku style-name odpowiada za nazwę pliku ze stylami CSS.
Podobne posty:
