Składnia CSS

Składnia CSS opiera się na dwóch głównych elementach – selektorach i deklaracjach styli. Podstawowym selektorem jest dowolny element języka html taki jak paragraf, czy link, któremu chcemy nadać odpowiedni wygląd – określony poprzez deklaracje. Deklaracje składają się z dwóch części: atrybutu i jego wartości. Przykładami atrybutów mogą być: kolor czcionki, szerokość elementu czy margines, wartością natomiast czerwony, 100%, czy 20 pixeli.

Przykładowy kod CSS

p {color: red; background: silver;}

Tak wygląda przykładowy fragment kodu CSS. Dla lepszej czytelności warto jednak zapisać w następujący sposób:

p {
    color: red;
    background: silver;
}

Przeanalizujmy teraz jego znaczenie. Na początku powyższego fragmentu wybraliśmy selektor paragrafu z języka HTML czyli p. Oznacza to, że deklaracje umieszczone pomiędzy nawiasami klamrowymi {} dotyczyć będą wszystkich wszystkich paragrafów na stronie. Pierwsza deklaracja składa się z atrybutu color, któremu przypisujemy wartość red. Pomiędzy atrybutem a wartością zawsze musi znajdować się dwukropek, a po określeniu wartości deklarację kończymy średnikiem. W tym miejscu można zamknąć nawias klamrowy, albo dopisać kolejna.

Znaki puste i nowego wiersza są przez przeglądarkę ignorowanie – nie maja wpływu na interpretację kodu.

Umieszczanie komentarzy

Komentarze pozwalają nam na umieszczenie wewnątrz kodu CSS tekstu, który zostanie zignorowany przez przeglądarkę podczas renderowania strony www, ale może pomóc nam w trakcie tworzenia i konserwacji kodu. Możliwość ta jest może mało przydatna w przypadku niedużych plików, ale kiedy kod rozrasta się do kilku tysięcy linii, może stanowić nieocenioną pomoc.

/* Teraz zmieni się kolor i tło paragrafów, a to jest komentarz. */

p {
    color: red;
    background: silver;
}

/* Kolory zmieniły się, a to jest kolejny komentarz */