Elementi formatirani kao linijski ('display: inline;') popunjavaju liniju tako što zauzimaju najmanju širinu u okviru linije potrebnu da se prikaže sadržaj elementa. Linijski element koji sledi za linijskim elementom naći će se u sledećoj liniji samo u slučaju da za njega nema mesta u liniji desno od prethodnog elementa.
CSS ne dozvoljava da se linijskim elementima menja ni širina ('width'), ni visina ('height'), niti da se podešavaju vertikalne margine ('margin-top', 'margin-bottom'). CSS dozvoljava jedino podešavanje horizontalnih margina linijskih elemenata, bilo spoljašnjih ('margin-left', 'margin-right'), bilo unutrašnjih (svojstva čije ime počinje sa 'padding').
Linijski elementi HTML-a se mogu podeliti u dve grupe, strukturne i stilske. Stilski elementi, kao što im i naziv sugeriše, mogu da se koriste za formatiranje delova dokumenta ('b', 'i', 'u', 's', 'tt', itd.), ali pošto je tu ulogu preuzeo CSS, njih praktično treba izbegavati. Tipičan strukturni linijski element je 'a' (sidra i hiperveze). Postoji i generički (opšti) linijski element 'span' koji se, u kombinaciji sa CSS-klasama, koristi za formatiranje delova dokumenata.
U sledeća dva pasusa se pojavljuje isti tekst, skoro isto formatiran, ali na dva različita načina. Prvi pasus je formatiran korišćenjem HTML-a, što se ne preporučuje, pre svega, radi lakšeg održavanja dokumenta (razdvajanje strukture od izgleda). Drugi pasus koristi kombinaciju elementa 'span' i CSS-klasa, kao preporučeni način za formatiranje linijskih elemenata. Pogledajte HTML-kod koristeći prečicu Ctrl+U.
U ovom pasusu teksta se pojavljuju novi pojmovi, strane reči i napomene. Njihovo formatiranje može biti fizičko i logičko. U slučaju fizičkog formatiranja se direktno navodi kako element treba da izgleda (kakva je težina fonta, da li se koristi kurziv ili ne, u kojoj boji su slova i slično). Primeri: procesor; eng. processor; Napomena: još se naziva centralna jedinica obrade. U slučaju logičkog formatiranja elementu se pridružuje klasa čije ime ne sugeriše izgled već namenu elementa u dokumentu. Na taj način, ako su slučajno dva tipa elemenata sa različitom namenom (na primer, novi termini i strane reči) isto formatirani fizički, mukotrpno je izvršiti promenu formatiranja samo jednog tipa, već se mora analizirati svaki element oba tipa da bi se ustanovilo da li mora da se menja ili ne. Kada se logičko formatiranje radi prvi put u HTML-dokumentu, deluje da je posao isti, možda i veći; ali kada dođe do ažuriranja formatiranja, ispostavlja se koliko je logičko formatiranje efikasnije, jer je potrebno samo promeniti definiciju odgovarajuće klase, dok se u HTML-elementu ništa ne menja.
U ovom pasusu teksta se pojavljuju novi pojmovi, strane reči i napomene. Njihovo formatiranje može biti fizičko i logičko. U slučaju fizičkog formatiranja se direktno navodi kako element treba da izgleda (kakva je težina fonta, da li se koristi kurziv ili ne, u kojoj boji su slova i slično). Primeri: procesor; eng. processor; Napomena: još se naziva centralna jedinica obrade. U slučaju logičkog formatiranja elementu se pridružuje klasa čije ime ne sugeriše izgled već namenu elementa u dokumentu. Na taj način, ako su slučajno dva tipa elemenata sa različitom namenom (na primer,novi termini i strane reči) isto formatirani fizički, mukotrpno je izvršiti promenu formatiranja samo jednog tipa, već se mora analizirati svaki element oba tipa da bi se ustanovilo da li mora da se menja ili ne. Kada se logičko formatiranje radi prvi put u HTML-dokumentu, deluje da je posao isti, možda i veći; ali kada dođe do ažuriranja formatiranja, ispostavlja se koliko je logičko formatiranje efikasnije, jer je potrebno samo promeniti definiciju odgovarajuće klase, dok se u HTML-elementu ništa ne menja.
Elementi formatirani kao blokovski ('display: block;') zauzimaju celu širinu ekrana, tj. ne dozvoljavaju ostalim elementima da budu u istoj liniji sa njima, čak i ako ima mesta. Svi prethodni elementi su iznad bloka, tj. blok uvek počinje u novom redu; takođe, svaki sledeći element posle bloka uvek počinje u novom redu.
Tipičan primer blokovskih elemenata su elementi kojima se predstavljaju naslovi ('h1-h6'), pasusi ('p') i tabele ('table'). Postoji i generički (opšti) blokovski element koji se naziva 'div' (skraćeno od eng. 'division' što bi značilo 'jedinica'). Element 'div' se koristi kao omotač za više HTML-elemenata koji treba da predstavljaju jednu celinu, i da se na taj način prikazuju i pozicioniraju na ekranu. Kao blokovski element 'div' se po prikazu ne razlikuje od ostalih blokovskih elemenata (naslova, pasusa, itd.).
Elementi formatirani kao linijski blokovi ('display: inline-block;')
Elementi HTML-a mogu da se pozicioniraju pomoću CSS-a na četiri različita načina:
Podrazumevano pozicioniranje elemenata u HTML-u je statičko pozicioniranje koje podrazumeva da se elementi ređaju u redosledu u kom su navedeni odozgo nadole i sleva nadesno. U tom slučaju se CSS svojstva za pozicioniranje ('top', 'left', 'bottom', 'right') ignorišu.
Statički pasus (blok) sa linijskim elementima: linkom i slikom: Google
U slučaju fiksiranog pozicioniranja elementu HTML-dokumenta se pridružuje fiksirana pozicija u odnosu na gornji levi ili gornji desni ugao prozora u kome se prikazuje dokument, bez obzira na korisnikovo kretanje kroz dokument (pomeranje kursora ili klizača, eng. scroll).
Statički pasus (blok) sa linijskim elementom (linkom) i fiksiranom slikom: Google. Fiksirana slika ima crveni okvir da bi bila uočljivija. Ako pomeramo vertikalni klizač (eng. vertical scroll), slika zauzima istu poziciju u odnosu na okvir prozora, tj. ponaša se kao da je fiksirana.