CSS (ang. Cascading Style Sheets – Kaskadowe Arkusze Stylów) - co to jest, definicja

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.