Uvod u CSS

2.1. Klasni selektori

Jednostavni selektori su praktični, jer se definirane postavke odnose na sve oznake istog tipa. Međutim, često se pojavljuje potreba za dodatnim oblikovanjem. Ponekad poželimo dio teksta istaknuti tako da ga uokvirimo ili obojamo pozadinu. Ili pišemo kod (npr HTML kod) koji prikazujemo fontom Courier New. U tom slučaju koristimo klasne selektore - definiramo stil za pojedinu klasu i pridruživanjem te klase nekom elementu određujemo njegov izgled.

Postoje dvije vrste klasa:

• klase koje određuju sve elemente i
• klase koje određuju određene elemente

Pri definiranju klasnih selektora koristimo točku (.) kojom određujemo da se radi o klasi.

Kao što možete primjetiti, prethodni odlomak drugačijeg je oblikovanja od ostalih na ovoj stranici. Oblikovan je klasnim selektorom!

Primjer:

CSS kod kojim je definiran izgled prethodnog paragrafa izgleda ovako:

.istaknuto
{
    background-color: Silver;
    margin-left: 5%;
    margin-right: 10%;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

Kod kojim je definiran stil pisanja koda:

.kod
{
    font-family: "Courier New", Courier, monospace;
    font-size: 10pt;
    padding-left: 10px;
}

U oba ova primjera pokazane su klase koje određuju sve elemente (mogu se pridružiti bilo kojoj oznaci, npr. p, table i slično).
Korištenjem klasa koje određuju određene elemente ograničava se njihova primjena samo na elemente nekog tipa. Selektor takve klase počinje s elementom na koji se primjenjuje, u sredini je točka, a završava nazivom klase.

Primjer klasnog selektora koji će se koristiti samo za oznaku p:

p.istaknuto
{
    background-color: Silver;
    margin-left: 5%;
    margin-right: 10%;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

Povezivanje klasnih selektora sa HTML kodom

Klase se pridružuju elementima korištenjem atributa class:

<p class="kod">Tekst na koji se odnosi oblikovanje tipa kod</p>