CSS korak po korak Kako CSS funkcionise

U ovoj lekciji ćete naučiti kako da napravite svoj prvi CSS. Takođe ćete naučiti osnovni CSS model, koji kodovi su neophodni za korišćenje CSS u HTML dokumentu.
Mnoge osobine se koriste u CSS-u su slične onima kod HTML-a. Dakle, ako ste navikli da koristite HTML za raspored, verovatno ćete prepoznati mnoge kodove. Pogledaćemo na konkretnim primerima.

Osnovne CSS sintakse
Recimo da želimo crvenu boju kao pozadinu za web stranice:
Korišćenje HTML-mogli smo to uradili ovako:
Pomoću CSS-a isti rezultat se može postići na sledeći način:
Kao što ćete primetiti, kodovi su manje-više identičan za HTML i CSS. U prethodnom primeru pokazali smo osnovni CSS model:


Ali gde staviti CSS kod?

Primena CSS HTML dokumenta
Postoje tri načina na koje možete primeniti CSS HTML dokumenta. Ove metode su sve navedene u nastavku. Preporučujemo vam da se fokusiraju na treći metod, odnosno spoljašnje.

Metod 1: In-line (atribut stil)
Jedan od načina da se prijave CSS HTML je pomoću HTML atribut stila. Nadovezujući se na gornjem primeru sa crvenom pozadinom, može se primeniti ovako:
Metod 2: Interni (oznaka stil)
Drugi način je da se uključi u CSS je koristeći HTML tagove. Na primer ovako:
3. metod: Spoljni (link stila)
Preporučeni metod je da se poveže na tzv spoljni CSS. Kroz ovaj tutorial ćemo koristiti ove metode u svim našim primerima.
Eksterni CSS file je jednostavno tekst fajl sa ekstenzijom CSS. Kao i bilo koji drugi fajl, možete ga postaviti na svoj web server ili hard disku.
Na primer, recimo da je vaš stil dokument zove stile.css i nalazi se u folderu pod nazivom stil. Situacija može se ilustrovati ovako:
Trik je da se napravi link sa HTML dokumenta (default.htm) do stila (stile.css). Takva veza može biti kreiran sa jedne linije HTML kod:
Primetiti kako put do našeg stila je označena pomoću atributa href.
Linija koda mora biti ubačena u zaglavlju deo HTML koda, odnosno izmedju i tagova. Ovako:
Ovaj link govori pretraživaču da koristite raspored sa CSS fajla kada se prikazuju HTML dokument. Stvarno pametna stvar je da nekoliko HTML dokumenatamože biti povezano sa istim CSS stilom tj fajlom. Drugim rečima, jedan CSS fajl se može koristiti za kontrolu rasporeda mnogih HTML dokumenata.
Ova tehnika može da vam uštedi puno posla. Ako, na primer, želite da promenite boju pozadine sajta sa 100 stranica, CSS vas može spasiti od potrebe da ručno promenite svih 100 HTML dokumenata. Pomoću CSS, promena može biti u nekoliko sekundi samo promenom jednog koda u centralnom stila.