Co to jest CSS? Z angielskiego Cascading Style Sheets to język arkuszy stylów, który pozwala na kontrolowanie i zarządzanie wyglądem oraz formatowaniem dokumentów napisanych w językach znaczników, takich jak HTML. CSS umożliwia twórcom strony internetowych oddzielenie prezentacji (tj. wygląd, kolory, typografia) od struktury (tj. elementy takie jak nagłówki, akapity, listy), co prowadzi do znacznie większej elastyczności i łatwości w utrzymaniu kodu.
Co to jest CSS?
Aby dobrze zobrazować znaczenie arkuszy styli, czyli CSS należy poruszyć kilka kluczowych elementów, które trzeba zrozumieć, aby lepiej poznać CSS.
-
Selektory — Selektory są wykorzystywane do wybrania elementów HTML, do których chcemy zastosować konkretne style. Istnieje wiele rodzajów selektorów, takich jak selektory elementów, klas, identyfikatorów czy atrybutów.
-
Deklaracje — Deklaracje to pary właściwość-wartość, które określają konkretne style dla wybranych elementów. Deklaracje zawsze umieszczane są wewnątrz nawiasów klamrowych
{}. -
Właściwości — Właściwości CSS określają, jakiego rodzaju styl ma być zastosowany, jak np.
color,font-size,border,background-imageitp. -
Wartości — Wartości są przypisywane do właściwości, aby określić dokładnie, jak powinien wyglądać dany styl. Wartości mogą prezentować różnorodne wymiary, np. kolorów, długości, procentów, jednostek względnych czy słów kluczowych.
Przykład prostego stylowania tekstu za pomocą CSS:
<predata-previewers=””><!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Witaj, świecie!</h1>
<p>To jest przykładowy tekst, który zostanie sformatowany za pomocą CSS.</p>
</body>
</html>
W powyższym przykładzie zostały użyte selektory h1 i p do wyboru elementów HTML, a następnie zastosowano odpowiednie deklaracje, aby zmienić kolor, rodzaj czcionki, rozmiar czcionki oraz interlinię.
Warto zapamiętać
CSS jest niezwykle ważnym narzędziem dla twórców stron internetowych, ponieważ pozwala na kontrolowanie szerokiej gamy aspektów prezentacji strony, tworzenie responsywnych i atrakcyjnych layoutów oraz utrzymanie czytelności i spójności kodu.
