Nema mnogo smisla učiti CSS ako već ne znate HTML, a učiti HTML bez CSS-a bi bilo previše dosadno, pa ćemo mi ovde ova dva jezika učiti paralelno. Pride, oni nisu programski jezici i vrlo su jednostavni, tako da neće biti problem učiti ih paralelno (poznavanje Engleskog jezika bi bilo od koristi).

Ima smisla pomenuti da je CSS ogroman jezik, te da kažu da danas ne postoje experti za njega. Postoje eksperti za neke oblasti CSS-a.

Naravno, kao i sa ljudskim jezikom, vrlo mali broj pravila se koristi skoro uvek, a onda u retkim situacijama može da nam zatreba nešto što iziskuje malo internet pretraživanja.

Takođe, dok je pojedina CSS pravila lako naučiti, potrebno je steći praksu sa njima. CSS se izvršava odozgo na dole, pa će kasnija pravila gaziti ranija pravila. Ovo može da bude vrlo konfuzno u početku.

HTML je nešto što nazivamo markup jezikom. U pitanju je tekstualni fajl. Hyper označava da se neki delovi tog teksta ponašaju izuzetno, npr, deo teksta može biti link, ili slika.

A šta je markup?

U davna vremena, knjige i novine su se štampale na štamparskoj presi, u koju biste poređali pločice sa željenim slovima, premazali ih mastilom, i onda to otisnuli na papir. Tadašnji tekstopisci su se morali dogovoriti sa slovoslagačima kako da im stave do znanja ako neka reč treba da bude odštampana masnim ili iskošenim slovima.

Ponekad, pisci bi želeli da neka reč, ili deo rečenice, bude odštampana malo drugačijim slovima, recimo masnim ili iskošenim, kako bi se taj deo teksta lakše uočio i zaintrigirao čitaoca. U takvom slučaju, slovoslagač bi uzeo drugu kutiju, sa masnim ili iskošenim slovima, i datu reč složio odatle. Međutim, kako bi autor, stavio slovoslagaču na znanje, da ova reč treba da bude napisana masnim slovima, a ona reč iskošenim slovima? Ne bi mogao naprosto da dopiše u tekstu "ovu reč složi masnim slovima", jer bi slovoslagač običnim slovima složio i rečenicu "ovu reč složi masnim slovima", pre nego što bi uvideo da je upravo izgubio 10 minuta birajući pločice bez razloga, ako bi mu rečenica uopšte doprla do svesti.

Iz tog razloga su autori tekstova i slovoslagači, standardizovali prvi markup jezik ikada.

Npr, ako bi autor hteo da neka reč bude masna, on bi je napisao između zvezdica, *ovako*. Kada bi slovoslagač video zvezdicu, znao bi da to nije slovo koje treba da traži, već da treba da pređe na kutiju sa masnim slovima. Slovoslagač bi nastavio da ređa masna slova, sve dok ne bi ponovo naišao na zvezdicu, kada bi se vratio na kutiju sa običnim slovima. Problem rešen.

U HTML-u koristimo sličan standardizovan set pravila, poput oznaka koje su koristile štamparije, samo što umesto zvezdica i sličnih simbola, ovde koristimo nešto što nazivamo tagovima. Tagovi u HTML-u su standardizovani, i ne možete izmišljati svoje, što je i dobro, jer kompjuteri znaju šta određeni tagovi znače, i kako tekst u nekom tagu treba da tretiraju. Velika većina tagova mora da se <otvori>, i da se </zatvori>.

Kada gledate neki sajt, kompjuter ne prikazuje ove tagove, već ih koristi da formatira tekst. Ovaj format, se obično definiše u CSS-u, ne u HTML-u. CSS definiše DA LI SU slova masna, iskošena, crvena, ili veća od ostatka teksta. HTML definiše KOJA SU slova masna, iskošena, crvena, ili veća. Iz tog razloga, nema smisla razdvajati HTML i CSS u zasebne tutorijale.

Zajedničko ime za oba taga i njihov sadržaj, odnosno za celinu koja se manifestuje u browser-u, je element. Pojmovi tag i element u HTML-u se uglavnom brkaju ali eto, zvanično, postoji razlika.

CSS je deo kôda koji definiše kako stranica treba da izgleda, u smislu boja i sl. Sheet bukvalno znači "stranica" ili "prekrivač", kao stranica koja prekriva HTML strukturu stilom. Reč cascading označava da se ti stilovi, primenjuju onim redosledom kojim su navedeni u fajlu, odozgo na dole. Ovo znači da ako se na dva mesta u CSS-u jedna ista stvar okiti na različite načine, browser će prikazati onaj stil koji je kasnije naveden. Možete o tome razmišljati kao da su oba stila primenjena, prvi navedeni stil je bio roze potkošulja, a potonji stil šareni džemper. Pošto je džemper obučen kasnije, niko neće znati da nosite roze potkošulju.

Potrebne su nam dve stvari, internet browser, koji verovatno imate ako ovo čitate, i tekst editor (word je tekstualni procesor, nama treba editor).

Od browsera je najbolje da imate po jedan od svega, jer postoje uvek neka mala odstupanja koja hoćete da ispeglate kako bi sve svima izgledalo isto.

Ako tek počinjete, preporuka je da koristite:

• chrome ili brave (brave je samo modifikovani chrome, s akcentom na privatnosti)
• firefox

Pored toga što neke stvari izgledaju drugačije u različitim browser-ima, takođe je neke stvari lakše testirati u jednom browseru nego u drugom.

Za pisanje samog kôda, treba vam "tekstualni editor". Danas se ubedljivo najviše koristi VS Code .

HTML fajlovi se čuvaju sa extenzijom .html a CSS sa extenzijom .css. HTML fajlovi se automatski otvaraju u browseru, tako da dvoklikom na takav fajl, možete videti svoj rad.