Elementi CSS-a

Nakon što ste u prethodnom poglavlju teoretski upoznali vezu između HTML-a i CSS-a, u ovom slijedi stvarno povezivanje odgovarajućih datoteka te prvi koraci u pisanju opisa stilova. Prvo ćete naučiti kako CSS-om reći na koji se dio stranice odnosi koji opis stila, tj. što su to selektori u CSS‑u. Osim toga, naučit ćete i kako se zadaju pojedina svojstva, ali detaljno opisivanje svojstava ostavljamo za sljedeće poglavlje.

Upoznat ćete i dva nova HTML elementa koja bez CSS‑a nemaju puno smisla, odnosno koji postoje zato bi CSS-u omogućili da pokaže svu svoju snagu.

U ovom se poglavlju nalazi niz detalja zbog kojih vjerujemo da ćete se na njega više puta vraćati tijekom rada, najčešće kad ćete razmišljati o tome na koji element treba primijeniti svojstvo da biste dobili izgled stranice koji želite.

Ishodi učenja

Na kraju ovog poglavlja ćete moći:

  • povezati definicije stila u CSS datoteci s HTML datotekom upotrebom elementa link ili style
  • napisati definiciju stila koja se odnosi samo na jednu stranicu upotrebom elementa style
  • promijeniti stil pojedinom elementu na stranici upotrebom atributa style
  • navesti što su selektori, svojstva i vrijednosti te ih prepoznati u bilo kojem (ili bilo čijem) opisu stila
  • prepoznati selektore raznih vrsta u bilo kojem opisu stila i znati kako se primjenjuju: jednostavni, klasni, id selektori, kontekstni selektori, te pseudoklase
  • nacrtati strukturu HTML dokumenta kao stablo
  • razlikovati linijske od blok elemenata jezika HTML, te popise
  • imenovati generičke linijske i blok kontejnere u CSS-u
  • navesti pojedine dijelove kutije u CSS-u.

Za odabir najprikladnijeg od četiriju načina uključivanja stilova u dokument ovisno o situaciji, kao i za odabir najprikladnijih selektora koji će omogućiti da se stilovi primjenjuju na pojedine elemente vaših stranica, trebat ćete steći još malo iskustva. No, za sad je važno da znate uključiti stilove i da oni oblikuju stranicu po vašoj želji.

Aktivnosti u ovom poglavlju

Uz čitanje lekcija u ovom će vas poglavlju osim navedenih ciljeva dočekati nekoliko svojstava i vrijednosti koje ćete intuitivno prihvatiti.

Tijekom prvih nekoliko lekcija pažljivo promatrajte primjere. U primjerima su, kao što je to često slučaj, svaka riječ i svaki znak važan. Nemojte ih preskakati i zaustavite se na svakom primjeru (po potrebi se možete vraćati na već prijeđeno gradivo). Da bi uočavanje elemenata HTML-a i CCS-a bilo što lakše, obojili smo primjere kao što to čine i mnogi HTML, odnosno CSS editori.

Nakon što upoznate povezivanje HTML-a s CSS-om, slijede vježbe na datotekama koje smo pripremili za vas:

  • zadaci u kojima ćete povezati HTML s CSS-om na različite načine
  • primjeri kroz koje ćete proučavati izneseno gradivo, a koje možete također kopirati te učiti mijenjajući ih u editoru i promatrajući rezultate u web preglednicima.

Uz sve vježbe postoje i rješenja koja možete pogledati. U većini je slučajeva riječ o jednostavnim zadacima u kojima je predloženo rješenje jedino ispravno, ali ne mora uvijek biti tako – važno je samo da dobijete ispravan prikaz u web preglednicima.

Poglavlje završava kratkim izletom u predvorje web sjedišta CSS Zen Garden te vježbom s materijalima s tog web sjedišta.