CSS – co to jest?
Język CSS (od ang. Cascading Style Sheets) służy do kodowania warstwy prezentacji stron internetowych.
W istocie odpowiada on za faktyczny wygląd witryny. Jednocześnie pozwala na jego dostosowanie do wyświetlania na różnych urządzeniach (komputerach stacjonarnych, telefonach czy tabletach), a także przystosowania do wydruku.
Określane również jako Kaskadowe Arkusze Stylów elementy są niezależne od kodu HTML, co sprawia, że łatwiej nimi zarządzać.
Dzięki temu można zadbać o ich kompatybilność z różnymi przeglądarkami.
Są one zapisywane w plikach z rozszerzeniem *.css. Przykład plików CSS na hostingu:
Jedną z cech, które definiują język CSS, jest tzw. kaskadowość (ang. cascading). Właściwość ta umożliwia bardzo precyzyjne tworzenie zestawów reguł, które mogą wzajemnie na siebie wpływać.
Drugim określeniem jest Arkusz Stylów (od angielskiego „Style Sheet”). Odpowiada on za faktyczne uporządkowanie struktury strony www.
CSS – przykład, selektory
Sam kod jest złożony z dyrektyw mających postać jak poniżej.
p { color: red; }
Litera p stanowi tzw. selektor, który jest elementem należącym do języka HTML, oznaczającym w tym przypadku akapit, jaki chcemy ostylować.
Człon CSS odpowiadający za ustawienie koloru czerwonego nazywamy deklaracją.
Jest on zakończony średnikiem.
Sam „color” jest określany jako właściwość, natomiast jej wartość poprzedzona dwukropkiem stanowi „red”.
Każdy zbiór reguł w Kaskadowym Arkuszu Stylów otoczony jest nawiasami klamrowymi.
Z pomocą selektora można również wybrać element oznaczony klasą lub id.
Przykładowo jeśli w kodzie jest grafika oznaczona klasą img-large:
img src=”http://strona.pl/myimage.jpg” class=”img-large”
To można taką grafikę wybrać z pomocą selektora:
.img-large { width: 600px;height:auto }
Pełną listę selektorów można znaleźć np. Na stronach jak W3Schools.
CSS a HTML
Dość łatwo można zrozumieć różnicę między kodem HTML a CSS.
Kod HTML tworzy strukturę, szkielet naszej strony. Jest on podzielony na nagłówek, część główną body oraz na stopkę (footer).
Kod CSS wpływa na wygląd poszczególnych elementów kodu HTML. Dzięki temu możemy dopasować wielkość i kolorystykę poszczególnych elementów kodu.
Jak sprawdzić kod CSS
Najprostsza metoda sprawdzenia kodu CSS to skorzystanie z inspektora wbudowanego w przeglądarkę. Przykładowo w Chrome inspektor kodu można otworzyć z pomocą komendy CTRL + SHIFT + I.
Następnie po najechaniu na dany element widzimy w bocznej kolumnie jaki kod CSS wpływa na jego wygląd:
Inna metoda to kliknięcie na stronie prawym przyciskiem myszy i wybranie z opcji Pokaż źródło strony. Otworzy się podgląd kodu HTML przeglądanej podstrony. Następnie należy odszukać pliki z rozszerzeniem .css i kliknąć je. Otworzy się plik CSS ze wszystkimi regułami stylu.
- Ad Network – Sieć reklamowa
- Adres IP
- Adsense
- Adwords
- Afiliacja, Marketing Afiliacyjny
- Aktualizacja algorytmu
- Algorytm Google
- Anchor Text – Kotwica linku
- Architektura informacji
- Artykuł sponsorowany
- Atrybut alt
- Atrybut dofollow
- Audyt strony www - optymalizacja SEO
- Audyt UX
- Ban od Google
- Baner reklamowy
- Bing
- Black Hat SEO
- Błąd 403
- Błąd 404
- Błąd 500
- Blog - co to jest, jak założyć
- Bot
- Bounce Rate
- Branding
- Breadcrumbs
- Brief
- Buyer persona
- Buzz Marketing
- Cache wyszukiwarki
- Canonical
- CcTLD
- CDN
- Cloaking
- CMS (ang. Content Management System – System zarządzania treścią)
- Content marketing (marketing treści)
- Copywriting
- CR (ang. Conversion Rate)
- Crawler
- CSS (ang. Cascading Style Sheets – Kaskadowe Arkusze Stylów)
- CTA (ang. Call to Action – Wezwanie do działania)
- CTR (ang. Click-through-rate – Współczynnik klikalności)
- Dane strukturalne
- Data Center
- Depozycjonowanie
- Disavow
- Domain age
- Domain authority
- Doorway page
- Dopasowanie przybliżone
- DSA (ang. Dynamic Search Ads)
- Duplicate Content, zduplikowana treść
- Dynamic content (dynamiczna treść)
- Działania ręczne Google