CSS dla początkujących

Poniższy artykuł jest lekcją wprowadzającą do CSS dla tych, którzy wiedzą trochę na temat języka HTML lub wcześniej budowali już strony internetowe.

Czym jest CSS?

CSS jest językiem, który wprowadza style (kolory, zdjęcia, granice, marginesy, tabelki, etc.) do dokumentów HTML, PHP lub XHTML. Zamiast definiowania stylów w dokumencie, definiuje się je w oddzielnym pliku, który może być wykorzystywany przez inne dokumenty.

Oznacza to mniejszą ilość kodu w oryginalnym pliku i łatwiejszy sposób zarządzania wyglądem strony. Plik z rozszerzeniem .css (np.: style.css) musi zostać podłączony do każdej strony:

<link rel="stylesheet" href="style.css" type="text/css">

Przykładowa zawartość pliku CSS:

h1 {
  font-size: 20px;
  color: red;
  background-color: black;
}
a {
  color: blue;
  font-size: 3em;
}

.header {
  color: red;
  font-weight: bold;
}
#footer {
  background-color: black;
}

W pliku zdefiniowaliśmy cztery selektory: h1, a, .header i #footer. Selektory można budować przy użyciu:

Element zawiera znacznik HTML i pozwala na ustawienie wyglądu całego typu elementu. Klasy stosujemy w znaczniki np.: <div class="header"> lub <p class="header">. Id używa się tylko raz na stronie, np.: <div id="footer">.

Używając tych trzech elementów można budować zaawansowane pliki CSS definiujące cały układ strony i właściwości wszystkich znaczników.

Wyjaśnienie użytych elementów kodu

Każdy selektor zawiera deklaracje (declarations), w których definiowane są właściwości (property) z przypisanymi wartościami.

a {
  color: blue;
  font-size: 3em;
}

W powyższym przykładzie selektor a definiuje kolor i wielkość czcionki dla wszystkich linków. Wartości to blue i 3em.