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 (ważny elemnt w algorytmach wyszukiwarek) jak również łatwiejszy sposób zarządzania wyglądem strony. Plik z rozszerzenie CSS (np.: style.css) musi zostać podłączony do każdej strony, na której chcemy aby dane style były zastosowane. W tym celu umieszamy poniższy kod w sekcji HEAD (pomiędzy zanczniki <head> i </head>):

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

Oto przykładowa treść 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 przykładowym pliku umieściliśmy cztery selektory: h1, a, .header i #footer. Selektory, które definiują pewne sekcje dokumentu, można budować na wiele sposobów z następujących bloków:

  • element
  • class
  • Id

Element zawiera w sobie znacznik HTML (taki jak <p>, <h1>, <td>, <a>, etc.). W powyższym przykładzie zdefiniowaliśmy znacznik <h1> dla całego dokumentu. Określiliśmy kolor tła (czarny), kolor czcionki (biały) oraz wielkość czcionki (20px – o wiele lepszą formą jest podawanie wielkości w em np.:2em, która mówi , że czcionka ma być dwa razy większa od czcionki tekstu).

Zastosowanie class jest także bardzo łatwe. Klasa definuje wszystkie znaczniki, które się w niej znajdują. Dlatego w powyższym przykładzie wszystkie znaczniki klasy będą czerwone i pogrubione. W praktyce, aby użyć klasy stosuje się znacznik <div>, np: <div class="header"> lub każdy inny element, któy chcemy aby posiadał określone właściwości klasy np.: <p class="header">.

Ostatnim blokiem budowlanym jest id. Atrybut ten ma takie same właściwości jak klasa z jednym wyjątkiem – można zamieścić jedynie jeden element z takim samym id na danej stronie, np: <div id="footer">.

Używając tych trzech elemetów można budować bardzo zaawansowane pliki css, które definiują cały rozkład strony oraz właściwości wszystkich znaczników.

Wyjaśnijmy po krótce użyte elemety kodu. Każdy selektor zawiera deklaracje (declarations), w których definiowane są właściwości (property). Właściwości posiadają pewne wartości, które zmieniają definiowany element.

Na przykład:

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

Selektor a (czyli element linku) ma następującą deklarację, która zawiera następujące właściwości: kolor i rozmiar czcionki. Wartościami tych właścowości są: Blue i 3em. Dobrze jest znać wszystkie powyższe terminy, ponieważ pojawiają się one w literaturze fachowej.