К содержанию

Tutorial za HTML i CSS za početnike

Jednostavan tutorial za izradu stranica u HTML-u i CSS-u za početnike sa detaljnom teorijom i zbirkom zadataka.

Selektori

Roditeljske veze tagova u HTML-u

Nasleđivanje CSS svojstava

Grupisanje selektora u CSS

Opšta svojstva pri grupisanju selektora u CSS

CSS selektor potomaka

Deteći selektor u CSS-u

Klase elemenata u CSS

Tag span za delove teksta u HTML-u

Div tag za grupisanje tagova u HTML-u

Grupisanje klasa u CSS

CSS selektor elementa sa određenom klasom

Selektor potomaka i klase u CSS

Kompleksne kombinacije selektora potomaka i klasa u CSS-u

Greška početnika u selektoru potomaka

Element sa više CSS klasa

Izbor elementa po jedinstvenom id u CSS

Selektori po id-u i CSS klase

Upotreba id u CSS-u

Izbor elementa po više klasa u CSS-u

Više CSS selektora napisanih zajedno

Greška pri korišćenju više CSS selektora

Grupisanje složenih selektora u CSS-u

Greška pri grupisanju složenih CSS selektora

Vežba na kombinacije CSS selektora

Prioritet CSS selektora

Napomena o CSS konfliktu svojstava

Pravila specifičnosti u CSS-u

Prioritet selektora potomaka u CSS

Susedni selektor u CSS

Susedni selektor u CSS-u

Univerzalni selektor u CSS-u

Selektori atributa u CSS-u

Stanja linkova u CSS

Nijanse redosleda stanja linkova u CSS-u

Stanja linkova link i visited u CSS

Uobičajena upotreba stanja linkova u CSS-u

Kompleksni selektori sa stanjima linkova u CSS

Link sa klasom u CSS

Selekcija krajnjih elemenata u CSS-u

Selekcija po poziciji elemenata u CSS-u

Selektovanje jedinog potomka u CSS

Odabir praznih elemenata u CSS

Selekcija po poziciji i tipu elemenata u CSS-u

CSS selektor negacije

Dekoracija

Postavljanje boje pozadine u CSS-u

Osnove rada sa granicama u CSS

Puna granica u CSS

Tačka-sta granica u CSS

Granica u vidu crtice u CSS

Convex Border in CSS

Dvostruki okvir u CSS

CSS svojstvo-skraćenica za ivicu

Granica za pojedinačne strane u CSS

Zaobljavanje ivica bloka u CSS

Zaobljavanje ivica pozadine u CSS-u

Kreiranje kruga u CSS-u

Različita zaobljenja za različite uglove CSS

Četiri vrednosti zaobljenja za različite uglove CSS

Dva značenja zaobljavanja za različite uglove CSS

Tri vrednosti zaobljavanja za različite uglove u CSS

Zaobljeni uglovi u procentima u CSS-u

Kako napraviti krug pomoću procentualnog zaokruživanja u CSS-u

Slika za pozadinu u CSS-u

Ponavljanje pozadinske slike u CSS-u

Ostala svojstva za pozadinu u CSS

Rad sa markerima liste ul u CSS-u

Kvadratni markeri listi ul u CSS-u

Markeri liste ul u obliku krugova u CSS

Rad sa markerima lista ul u CSS

Uklanjanje oznaka liste ul u CSS-u

Rad sa markerima lista ol u CSS

Mali rimski brojevi za liste ol u CSS-u

Velika rimska slova za liste ol u CSS-u

Stvaranje latiničnih malih slova za liste ol u CSS-u

Velika latinična slova za liste ol u CSS-u

Grčka mala slova za ol liste u CSS

Brojevi sa nula ispred za liste ol u CSS-u

Blok model

Rad sa margin odstupima u CSS

Margini za različite strane u CSS-u

Više vrednosti u svojstvu margin u CSS-u

Četiri vrednosti u margin svojstvu u CSS-u

Dve vrednosti u svojstvu margin u CSS-u

Tri vrednosti u svojstvu margin u CSS-u

Rad sa unutrašnjim prostorom (padding) u CSS-u

Uvlačenja (padding) za različite strane u CSS-u

Više vrednosti u CSS svojstvu padding

Rad sa padding odstupima u CSS-u

Uticaj granice na širenje elemenata u CSS

Uticaj padding-a i granice na širenje elemenata u CSS-u

Opozivanje proširenja elemenata u CSS

Karakteristike blok elemenata u CSS

Širina i visina blok elementa u CSS

Širina blok elementa u CSS

Visina blok elementa u CSS

Visina blok elementa bez sadržaja u CSS

Više blok elemenata jedan pored drugog u CSS

Karakteristike inline elemenata u CSS-u

Širina i visina inline elementa u CSS

Nekoliko inline elemenata jedan pored drugog u CSS

Uvlačenja između inline elemenata u CSS-u

Određivanje blok modela HTML tagova

Rad sa svojstvom display u CSS-u

Karakteristike inline-blok elemenata u CSS-u

Širina i visina inline-block elementa u CSS

Širina inline-block elementa u CSS-u

Visina inline-blok elementa u CSS

Više inline-block elemenata jedan pored drugog u CSS-u

Poravnavanje blok elemenata u CSS

Poravnanje blok elementa sa levim odstupom u CSS-u

Poravnanje blok elementa sa desnim odmakom u CSS

Poravnanje inline elemenata u CSS-u

Centriranje inline elemenata u CSS-u

Centriranje više inline elemenata

Poravnanje inline elemenata po desnoj ivici u CSS

Poravnavanje inline-blok elemenata u CSS

Centriranje inline-block elemenata u CSS

Poravnanje inline-blok elemenata uz desnu ivicu u CSS-u

Fleks elementi u CSS

Visina roditelja fleks elemenata u CSS-u

Širina roditelja fleks elemenata u CSS

Inline-blok roditelj fleks elemenata u CSS

Uvlačenje padding roditelja fleks elemenata u CSS

Margini za potomke u CSS

Poravnavanje flex elemenata u CSS-u

Centriranje flex elemenata u CSS-u

Poravnanje fleks elemenata po roditelju u CSS

Poravnanje fleks elemenata u odnosu na roditelja sa odstupima

Poravnanje fleks elemenata u odnosu na roditelja sa jednakim razmacima

Pozicioniranje

Apsolutno pozicioniranje elemenata u CSS

Relativno pozicioniranje elemenata u CSS-u

Pozicioniranje u odnosu na roditelja u CSS-u

Pozicioniranje u odnosu na apsolutnog roditelja u CSS-u

Apsolutno pozicioniranje bez koordinata u CSS

Centriranje putem apsoluta u CSS

Negativne vrednosti pri pozicioniranju u CSS

Fiksno pozicioniranje u CSS-u

Blok na punu širinu ekrana u CSS-u

Preklapanje elemenata po Z osi u CSS-u

Regulacija slaganja elemenata duž Z ose u CSS-u

Nijanse primene negativne vrednosti z-index u CSS-u

Plutajući elementi (Floats)

Uvod u float svojstvo u CSS-u

Prodiranje plivajućih elemenata kroz tagove u CSS-u

Kombinacija float i margin u CSS-u

Kombinacija float i padding u CSS-u

Plivajući elementi ispod tagova u CSS

Dejstvo floata na roditelja u CSS

Visina roditelja float elemenata u CSS-u

Tekst u roditelju float-ova u CSS

Plutanje u CSS

Otkazivanje oblivanja pomoću svojstva clear u CSS-u

Odvojeni div sa clearfix-om u CSS

Clearfix i visina roditelja u CSS

Svojstvo float za blokove u CSS

Svojstvo float i više blokova u CSS

CSS svojstvo float i roditelj bez teksta

Fleksboks

Pozicioniranje fleks elemenata u red ili kolonu u CSS

Pozicioniranje flex elemenata u obrnutom redu u CSS-u

Postavljanje fleks elemenata u kolonu u CSS-u

Okretanje kolone sa fleks elementima u CSS-u

Glavna i poprečna osa u fleks blokovima u CSS-u

Poravnanje fleks elemenata duž glavne ose u CSS-u

Poravnanje fleks blokova po poprečnoj osi u CSS

Vrednost center za svojstvo align-items u CSS-u

Centriranje bez visine blokova u CSS

Centriranje sa različitim visinama blokova u CSS

Značenje stretch vrednosti svojstva align-items u CSS-u

Vežba za poravnanje po osama u CSS-u

Poravnanje pojedinačnog elementa u CSS flex modelu

Redosled flex blokova u CSS-u

Gridovi

Uvod u CSS Grid

Tragovi i linije u CSS Grid-ovima

Prikazivanje gridova u browser debuggeru

Broj i širina kolona u CSS grid-ovima

fr jedinica u CSS gridovima

Frakcione jedinice fr u CSS gridovima

Pikseli i fr jedinice u CSS gridovima

Procenat i fr jedinice u CSS gridovima

Funkcija repeat u CSS gridovima

Vrednost auto u CSS gridovima

Značenje auto-fill u CSS gridovima

Funkcija minmax u CSS gridovima

Vrednost auto-fit u CSS gridovima

Broj i širina redova u CSS gridovima

Skraćenica za redove i kolone u CSS gridovima

Spajanje redova u CSS gridovima

Spajanje kolona u CSS Grid-ovima

Kombinacije spajanja redova i kolona u CSS Grid-u

Preklapanje kolona u CSS gridovima

Razmak između kolona u CSS gridovima

Razmak između redova u CSS gridovima

Razmak između kolona i redova u CSS gridovima

CSS Grid mreža sa elementima u obliku pločica

Maketi

Kreiranje menija u CSS

Jednostavni jednokolonski rasporedi sajtova u CSS-u

Šema izgleda sa više omotača u CSS-u

Strukturni blokovi sajta u HTML-u

Shema dvokolonačnog izgleda sajta u CSS-u

Šema troslojnog izgleda sajta u CSS-u

Posebne oznake za elemente izgleda sajta u HTML-u

Osnovni tagovi rasporeda u HTML-u

Tag za sekcije u HTML-u

Praksa na maketima u HTML i CSS