Czym jest CSS?
Przeczytaj czym jest CSS w naszym słowniku.
Pomoże Ci to lepiej zrozumieć, czym dokładnie jest CSS i jakie ma dla Ciebie znaczenie w codziennym użytkowaniu.
CSS
CSS (Cascading Style Sheets) to język stylów używany do definiowania wyglądu i formatowania stron internetowych napisanych w języku HTML (HyperText Markup Language). CSS umożliwia oddzielenie treści strony internetowej od jej prezentacji, co pozwala na bardziej elastyczne i konsekwentne zarządzanie wyglądem witryny.
CSS pozwala na definiowanie różnych stylów, takich jak kolor, czcionka, rozmiar, odstępy, tła itp., dla różnych elementów HTML, takich jak nagłówki, akapity, tabele, linki. CSS umożliwia oddzielenie treści strony internetowej od jej wyglądu, co ułatwia zarządzanie stylem strony i zmiany wyglądu bez konieczności zmiany samej treści.
CSS jest niezbędnym narzędziem dla twórców stron internetowych, umożliwiającym projektowanie atrakcyjnych, spójnych i responsywnych interfejsów użytkownika. W połączeniu z HTML i JavaScript stanowi trzon technologii stosowanych do tworzenia stron internetowych i aplikacji internetowych.
Jak działa CSS?
CSS działa na zasadzie selektorów i deklaracji. Selektor pozwala wybrać element (lub elementy) na stronie, do którego będą stosowane dane style. Deklaracja to para: właściwość i jej wartość, która określa, jak wybrany element będzie stylizowany. Deklaracje grupowane są w bloki, a każdy blok stylów otoczony jest nawiasami klamrowymi.
Dokument HTML linkuje do plików CSS za pomocą elementu <link> w sekcji <head>, umożliwiając przeglądarce naładowanie i zastosowanie stylów do dokumentu. CSS może być również umieszczany bezpośrednio w dokumencie HTML za pomocą znacznika <style> lub bezpośrednio do poszczególnych elementów za pomocą atrybutu style.
Przykłady użycia CSS
Wyobraź sobie, że chcesz, aby wszystkie akapity na twojej stronie były w kolorze czerwonym. Do tego celu użyjesz selektora p (odnoszącego się do akapitów) i określisz właściwość koloru (color) oraz jej wartość (red):
p {
color: red;
}
A teraz załóżmy, że chciałbyś, aby tylko akapity wewnątrz elementu z klasą .wazne były pogrubione. W tym przypadku twój CSS będzie wyglądał tak:
.wazne p {
font-weight: bold;
}
